惊艳亮相！AnimateContent让Compose动起来！

Compose 动画：AnimatedContent（二）

动画类型

AnimatedContent 可实现多种动画效果，包括：

• 淡入淡出： 逐渐显示或隐藏视图。
• 滑动： 从一个位置移动视图到另一个位置。
• 缩放： 放大或缩小视图。
• 旋转： 旋转视图一定角度。
• 组合： 组合多种效果，打造更复杂、更具视觉冲击力的动画。

动画持续时间

duration 参数控制动画时长（毫秒）。例如，1 秒动画代码如下：

AnimatedContent(
    targetState = targetState,
    transitionSpec = {
        fadeIn(animationSpec = tweenTo(durationMillis = 1000))
    }
)

动画延迟时间

delay 参数控制动画延迟时间（毫秒）。例如，1 秒延迟动画代码如下：

AnimatedContent(
    targetState = targetState,
    transitionSpec = {
        fadeIn(animationSpec = tweenTo(durationMillis = 1000, delayMillis = 1000))
    }
)

动画插值器

animationSpec 参数控制动画插值器，它决定动画加速或减速方式。例如，匀速动画代码如下：

AnimatedContent(
    targetState = targetState,
    transitionSpec = {
        fadeIn(animationSpec = tweenTo(durationMillis = 1000, easing = LinearEasing))
    }
)

动画监听器

您可以使用以下参数添加动画监听器：

• onAnimationStart：动画开始时调用。
• onAnimationEnd：动画结束时调用。
• onAnimationCancel：动画取消时调用。

例如，在动画开始时打印消息的代码如下：

AnimatedContent(
    targetState = targetState,
    transitionSpec = {
        fadeIn(animationSpec = tweenTo(durationMillis = 1000))
    },
    onAnimationStart = {
        Log.d("MainActivity", "Animation started")
    }
)

示例代码

以下示例展示了如何使用 AnimatedContent 创建不同动画效果：

// 淡入淡出
AnimatedContent(
    targetState = targetState,
    transitionSpec = {
        fadeIn(animationSpec = tweenTo(durationMillis = 1000))
    }
)

// 滑动
AnimatedContent(
    targetState = targetState,
    transitionSpec = {
        slideInHorizontally(animationSpec = tweenTo(durationMillis = 1000))
    }
)

// 缩放
AnimatedContent(
    targetState = targetState,
    transitionSpec = {
        scaleIn(animationSpec = tweenTo(durationMillis = 1000))
    }
)

// 旋转
AnimatedContent(
    targetState = targetState,
    transitionSpec = {
        rotateIn(animationSpec = tweenTo(durationMillis = 1000))
    }
)

// 组合
AnimatedContent(
    targetState = targetState,
    transitionSpec = {
        fadeIn(animationSpec = tweenTo(durationMillis = 1000)) +
                slideInHorizontally(animationSpec = tweenTo(durationMillis = 1000))
    }
)

结论

AnimatedContent 是一个强大的工具，可让您创建各种动画效果，从而提升 Compose 应用程序的吸引力和响应性。

常见问题解答

1. 如何创建动画列表？
   使用 AnimatedList 组件。

2. 如何暂停或恢复动画？
   使用 rememberCoroutineScope 创建一个协程作用域，并使用 launch 函数暂停或恢复动画。

3. 如何使用外部数据源驱动动画？
   使用 rememberUpdatedState 钩子获取外部数据的最新状态，然后使用该状态更新 AnimatedContent 的 targetState。

4. 如何创建自定义动画？
   使用 AnimatedVisibilityScope 和 AnimatedContent 的 transitionSpec 参数创建自定义动画。

5. 如何优化 Compose 动画性能？
   避免使用频繁的 recomposition，优化视图层级，并考虑使用协程来暂停或恢复动画。