动画特效

让界面像活了一样动起来

📖知识引入

🎬动画=快速翻页

动画的秘密：每秒切换24张静态画面，眼睛就觉得「它在动」。界面动画同理：位置、大小、透明度快速渐变，就动起来了。

🌈缓动曲线：自然的秘诀

匀速移动像机器人，生硬。加上「缓入缓出」——开头慢、中间快、结尾慢，动作立刻像有生命。手机动画几乎都用它。

🚪转场动画

页面切换时别「啪」地闪过去，让新页面从右边滑进来、旧页面微微后退——用户知道「我前进了一层」，方向感不丢。

💖微交互：小动作大好感

点赞时爱心弹一下、删除时卡片飞出去、下拉刷新时转圈圈——这些小细节让APP「有温度」，用户会不知不觉爱上它。

⚠️动画要克制

满屏乱飞、到处闪烁=灾难现场。动画时长控制在0.2-0.4秒，只为「指引用户注意力」服务。花哨不是目的，清晰才是。

💡

好动画让人感觉不到动画，只觉得「这APP真顺滑」！

🔍动起来之后判若两屏

// React Native：打卡成功的弹性动画
import Animated, {
  useAnimatedStyle, withSpring,
} from "react-native-reanimated";

function CheckMark({ checked }) {
  const style = useAnimatedStyle(() => ({
    // withSpring：像弹簧一样「啵」地弹出
    transform: [{ scale: withSpring(checked ? 1 : 0) }],
  }));
  return <Animated.Text style={style}>✅</Animated.Text>;
}

同一个「打卡成功」的两种呈现：

😐 无动画版：点击打卡 → 按钮文字从「打卡」变成「已打卡」 → 用户：发生了什么？我点到了吗？

✨ 有动画版：
  点击打卡 → 按钮微微下压
  → 对勾图标「啵」地弹出
  → 撒出一圈彩色粒子 🎉
  → 轻轻震动一下
  → 「+1」飘向统计数字
  → 用户：好爽！明天再来！

动画时长参考：
  按钮反馈：0.1秒
  弹窗出现：0.25秒
  页面转场：0.3秒
  庆祝特效：0.5-1秒

口诀：反馈要快、转场要顺、特效要少而精！

🎯小测验

第1题：动画的本质是什么？

第2题：「缓入缓出」让动画看起来？

第3题：界面动画的合适时长一般是？

📝本课知识点

✓动画=每秒24张画面的魔术
✓缓入缓出是自然感的秘诀
✓转场动画保住方向感
✓微交互带来温度
✓动画要克制：0.2-0.4秒刚好

第17课完成！继续探索下一课吧 🚀

🎬

上一课

第16课

下一课

第18课

🎬