Expo 动画该用 Animated、Reanimated 还是 Lottie？

Expo 里做动画，先看动画的“控制权”在哪里：只是按钮淡入、卡片位移、骨架屏闪一下，用 React Native 自带 Animated 就够；动画要跟手势实时绑定、拖拽时不能掉帧，优先用 React Native Reanimated；如果设计师已经从 After Effects 导出了复杂插画，就用 Lottie。别把三者理解成替代关系，它们更像三种入口：Animated 轻、Reanimated 稳、Lottie 还原设计稿快。

追问

Animated 和 Reanimated 到底差在哪？

Animated 适合透明度、缩放、平移这类常规过渡，API 学习成本低。Reanimated 的共享值和 worklet 能跑在 UI 线程，手势拖拽、底部抽屉、列表联动更稳，但写法和调试成本也更高。

Lottie 适合替代手写动画吗？

不适合全部替代。Lottie 很适合加载、空状态、品牌动效，因为它能最大程度还原设计资源；但它不适合承载复杂业务状态。

Expo 项目里需要额外配置什么？

依赖建议用 npx expo install react-native-reanimated lottie-react-native，版本会跟当前 SDK 对齐。Reanimated 还要确认 Babel 插件放在 plugins 最后。

动画卡顿时先排查哪里？

先看动画是不是被 JS 线程阻塞，比如大量 setState、日志、JSON 解析或列表重渲染。能用 transform 就别改布局尺寸。

实战选型有什么取舍？

简单动效别强行上 Reanimated，后续维护成本更高；设计师交付 Lottie JSON 时优先 Lottie；和手势强绑定再用 Reanimated。

写段代码

tsx
const x = useSharedValue(0);
const style = useAnimatedStyle(() => ({ transform: [{ translateX: withSpring(x.value) }] }));