如何在 Jetpack Compose 中实现弹出(放大和缩小)动画

问题描述 投票:0回答:0

我最近开始使用 Jetpack Compose 制作动画,我有几个问题......我的研究只是为了了解上下文,包括阅读文档、观看 Youtube 视频和询问 ChatGPT。然而,我的想法是最好的学习方法是在我的项目中实现一些动画并解决问题。

直到现在,这种方法适用于我的 Android 应用程序开发之旅中的所有内容。因此,我决定在 StackOverflow 上提问,所以就这样吧。

在我的项目中,屏幕上显示了一个计数器。计数器当然是一个 Text() 可组合项,每次视图模型通过 stateFlow 向它发送一个新数字时都会重新组合。 Text() 可组合项位于 Box() 可组合项内以使其居中,这是它的简化版本:

Box(
    modifier = Modifier
            .fillMaxWidth(),
    contentAlignment = Alignment.Center
) {
    Text(text = myState.number) 
}

这部分代码工作正常。从这里开始,我想以特定方式为我的文本制作动画。我想要文本,所以数字,按比例放大和缩小以达到流行效果。放大应该从 1f 到 1.3f 最大值。我希望每次文本更改时都会发生该动画,并且我希望它的持续时间为 200 毫秒。

为了完成这项工作,我尝试了很多东西(animate*asState、AnimatedContent、LaunchedEffect 等),但它们似乎都失败了。

任何帮助或正确方向的指导来解决这个问题将不胜感激!

附:

我已经在 XML 和 Java 中实现了这种行为,但我无法在 Jetpack Compose 中复制它。

这是放大的 XML 动画:

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="1"
    android:fromYScale="1"
    android:toXScale="1.314"
    android:toYScale="1.314"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="100"

    >
</scale>

和缩小动画:

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="1.314"
    android:fromYScale="1.314"
    android:toXScale="1"
    android:toYScale="1"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="100"

    >
</scale>

编辑1:

这里是动画的例子: Example 1

这是我想要实现的效果,但不是确切的动画。正如我之前所说,我只希望我的文本在每次更改时放大和缩小(以实现弹出效果),我不希望我的文本像示例中所示那样连续放大和缩小。

我想要达到的效果的另一个例子是这样的: Example 2

所以在这里你可以看到同样的东西,文本按比例放大和缩小。我希望每次我的文本更改时都会发生这种情况,但不像示例中那样慢,它必须更快才能产生“流行”效果。

android kotlin animation android-jetpack-compose android-animation
© www.soinside.com 2019 - 2024. All rights reserved.