2、跨平台方案选型：原生动画(Android/iOS)、Web动画(CSS/JS)、Flutter动画、React Native动画、Unity动画对比
做跨平台动画开发，选型永远是第一道坎。
说实话，我见过太多团队一上来就拍脑袋选方案，结果做到一半发现性能扛不住，或者某个交互效果根本实现不了。嗯，今天我就把这几种主流方案掰开揉碎讲清楚，帮你少走弯路。
2.1 原生动画（Android/iOS）
原生动画，说白了就是各玩各的。Android 用 ViewPropertyAnimator、ValueAnimator，iOS 用 UIView.animate、CAAnimation。它们直接调用 GPU 硬件加速，性能是最好的。
我在项目中遇到过一个问题：一个列表项的入场动画，用原生实现丝滑流畅，但换成跨平台方案后，在低端机上明显掉帧。为什么？因为原生动画跑在 UI 线程之外，由渲染管线直接处理。
2.2 Web动画（CSS/JS）
Web 动画，大家最熟悉。CSS 动画用 transition、@keyframes，JS 动画用 requestAnimationFrame、GSAP。
你想想看，CSS 动画为什么快？因为它走的是合成线程，不阻塞主线程。但 JS 动画就不一样了——一旦主线程有大量计算，动画就会卡。
我记得有一次做 H5 活动页，用 JS 驱动一个粒子爆炸效果，在 iPhone 6 上直接卡成 PPT。后来换成 CSS 加 canvas 混合方案，才勉强跑起来。
transform 和 opacity，它们能触发 GPU 加速。
2.3 Flutter动画
Flutter 的动画系统，我个人觉得是跨平台里最优雅的。它用 AnimationController 驱动，配合 Tween 和 Curve，能实现从简单到复杂的各种效果。
为什么 Flutter 动画性能好？因为它自己实现了渲染引擎（Skia），不依赖平台原生控件。说白了，它把每一帧都画在画布上，控制力极强。
// Flutter 动画示例
AnimationController controller = AnimationController(
duration: const Duration(milliseconds: 500),
vsync: this,
);
Animation<double> animation = Tween(begin: 0.0, end: 1.0).animate(controller);
controller.forward();我在项目中用 Flutter 做过一个复杂的转场动画，页面切换时带缩放和透明度变化，60fps 稳稳的。但要注意，Flutter 的动画调试工具不如原生成熟，遇到诡异 bug 时排查起来比较头疼。
2.4 React Native动画
React Native 的动画，核心是 Animated API 和 react-native-reanimated。前者走 JS 线程，后者走 UI 线程。
这里有个坑：Animated 默认跑在 JS 线程，如果 JS 线程有大量计算（比如列表渲染），动画就会卡。我曾经在做一个拖拽排序功能时，用 Animated 驱动，结果拖到一半卡住了。后来换成 react-native-reanimated，问题解决。
Animated 的 useNativeDriver: false，导致动画在 Android 低端机上掉帧严重。记住，能用 native driver 就用。
2.5 Unity动画
Unity 动画，主要用于游戏和 3D 场景。它用 Animator 和 Animation 组件，配合状态机控制。
说实话，Unity 做 2D 动画有点大材小用。但如果你需要 3D 效果、粒子系统、物理模拟，那 Unity 是唯一选择。
我记得有一次做 AR 应用，需要在手机屏幕上显示一个 3D 模型并做旋转动画。用 Unity 实现，从建模到动画导出，一气呵成。但打包体积确实大，随便一个 demo 就 50MB+。
2.6 横向对比表格
| 方案 | 性能 | 开发效率 | 学习成本 | 适用场景 |
|---|---|---|---|---|
| 原生动画 | ★★★★★ | ★★☆☆☆ | ★★★☆☆ | 高性能要求、复杂交互 |
| Web动画 | ★★★☆☆ | ★★★★★ | ★★☆☆☆ | H5、活动页、轻量应用 |
| Flutter动画 | ★★★★☆ | ★★★★☆ | ★★★☆☆ | 跨平台应用、自定义UI |
| React Native动画 | ★★★★☆ | ★★★★☆ | ★★★☆☆ | 跨平台应用、快速迭代 |
| Unity动画 | ★★★★★ | ★★☆☆☆ | ★★★★★ | 3D、游戏、AR/VR |
2.7 选型建议
说了这么多，到底怎么选？我总结三条原则：
- 看团队：如果团队全是前端，别硬上 Flutter。用 React Native 或 Web 方案，至少能快速出活。
- 看性能要求：如果动画是核心卖点（比如转场、手势、物理模拟），优先原生或 Flutter。Web 方案在低端机上容易翻车。
- 看未来维护：Unity 和原生方案维护成本高，适合长期项目。Web 和 React Native 适合快速验证。
嗯，这一章就到这里。下一章我会深入讲 Flutter 动画的实战技巧，包括如何用 AnimationController 做复杂动画编排。到时候见。