5、让 App 活起来：React Native 动画实战指南

---

🎯 技术专家导语

“我想让按钮点击有个淡入效果，图片能弹跳一下怎么办？”
“用 React Native 的动画系统，你可以为 App 注入灵魂！”

这一篇带你掌握 React Native 的两大动画系统：Animated API 和 Reanimated，让页面从死板变得生动流畅。

---

🎞 一、Animated：原生支持，轻量易用

📦 先导入

import { Animated } from 'react-native'

📐 核心概念

概念	说明
Animated.Value	状态容器，接管组件属性
Animated.timing	时间驱动的动画
Animated.spring	弹性动画，模仿自然惯性
useRef()	创建动画状态的推荐方式

---

✨ 示例：淡入动画

const fadeAnim = useRef(new Animated.Value(0)).current

useEffect(() => {
  Animated.timing(fadeAnim, {
    toValue: 1,
    duration: 1000,
    useNativeDriver: true
  }).start()
}, [])

return (
  <Animated.View style={{ opacity: fadeAnim }}>
    <Text>渐显内容</Text>
  </Animated.View>
)

---

🧠 二、Reanimated：进阶动画利器

react-native-reanimated 提供更高性能和更复杂的动画控制能力，如手势联动、物理动画等。

npm install react-native-reanimated

支持：

• ⚡ 在 UI 线程运行动画，不卡顿
• ✋ 搭配 react-native-gesture-handler 实现拖拽、滑动等交互动画
• 🔁 支持共享值（useSharedValue）、派生动画（useAnimatedStyle）

const sv = useSharedValue(0)

const style = useAnimatedStyle(() => ({
  transform: [{ translateX: sv.value }]
}))

---

🎮 常见动画场景与实现方式

需求	推荐方式
淡入淡出	Animated.timing
弹跳/放大缩小	Animated.spring
拖拽交互动画	Reanimated + Gesture
复杂状态联动动画	Reanimated

---

✅ 动画优化建议

• ✅ 尽可能使用 useNativeDriver: true 提升流畅性
• ✅ 简单场景优先使用 Animated，复杂场景使用 Reanimated
• ✅ 合理控制动画时长，建议保持在 300~700ms 之间

---

📘 下一篇预告：
👉 《React Native 网络请求实战：App 如何与世界对话》