React Native Reanimated 动画序列(Sequence)使用教程

前言

React Native Reanimated 是一个强大的动画库，它提供了高性能的动画解决方案。本文将重点介绍如何使用 withSequence 方法创建复杂的动画序列，实现类似"摇动"效果的动画。

动画序列基础概念

在 React Native Reanimated 中，withSequence 是一个非常重要的动画组合方法，它允许我们将多个动画按顺序组合在一起执行。这与 CSS 动画中的关键帧序列类似，但提供了更灵活的控制方式。

代码解析

让我们先看一下示例代码的核心部分：

offset.value = withSequence(
  withTiming(-OFFSET, { duration: TIME / 2 }),
  withRepeat(withTiming(OFFSET, { duration: TIME }), 5, true),
  withTiming(0, { duration: TIME / 2 })
);

这段代码创建了一个三阶段的动画序列：

1. 第一阶段：元素快速移动到左侧(-OFFSET位置)
2. 第二阶段：在左右位置之间来回摆动5次
3. 第三阶段：最终回到中心位置

关键API详解

1. useSharedValue

useSharedValue 是 Reanimated 的核心概念之一，它创建了一个可以在 UI 线程和 JavaScript 线程之间共享的值。在这个例子中，我们用它来存储和控制元素的水平位移。

2. useAnimatedStyle

useAnimatedStyle 用于创建动画样式，它会自动响应 sharedValue 的变化并更新样式。这里我们用它来将 offset.value 应用到元素的 translateX 变换上。

3. withSequence

withSequence 是本文的重点，它接受多个动画作为参数，并按顺序执行它们。每个动画可以是基础动画(如 withTiming)或复合动画(如 withRepeat)。

4. withTiming

withTiming 创建了一个基于时间的动画，从当前值平滑过渡到目标值。我们可以通过 duration 参数控制动画持续时间。

5. withRepeat

withRepeat 可以让一个动画重复执行多次。在这个例子中，我们用它来创建左右摆动的效果。第三个参数 true 表示动画应该反向执行(即往返运动)。

实际应用场景

这种动画序列特别适合以下场景：

1. 表单验证错误时的输入框摇动提示
2. 游戏中的角色受伤效果
3. 吸引用户注意的交互元素
4. 加载状态时的微交互

性能优化建议

虽然 Reanimated 已经做了很多性能优化，但在使用动画序列时仍需注意：

1. 尽量减少动画的持续时间，特别是移动设备的性能有限
2. 避免在序列中嵌套过多的动画
3. 考虑使用 withSpring 代替 withTiming 可以获得更自然的物理效果
4. 对于复杂的动画序列，可以考虑使用 withDelay 来精确控制时间

扩展练习

如果你想进一步掌握动画序列，可以尝试：

1. 修改代码实现垂直方向的摇动效果
2. 添加旋转动画使摇动效果更生动
3. 尝试组合缩放和位移创建更复杂的动画序列
4. 使用 withSpring 替换 withTiming 观察效果差异

总结

通过这个简单的摇动动画示例，我们学习了 React Native Reanimated 中 withSequence 的基本用法。动画序列是创建复杂交互效果的有力工具，合理运用可以大大提升应用的用户体验。记住，好的动画应该是有目的性的，而不是为了动画而动画。