【前端分享】RN 原生动画 Animated 用法、动画性能优化！

React Native 原生Animated是 RN 官方提供的动画库适合实现大部分基础动画淡入淡出、缩放、位移、旋转等。如果是面试通常会问两个方面•Animated 的基本用法•动画为什么会卡如何优化下面按这两个方面总结。一、Animated 基本用法1. 创建动画值const fadeAnim useRef(new Animated.Value(0)).current;Animated.Value 是动画驱动值。例如0 ----- 1表示透明度从 0 到 1。2. Animated.View普通 View 不能绑定 Animated.Value。必须使用Animated.View style{{ opacity: fadeAnim, }} /3. timing 动画最常见。Animated.timing(fadeAnim, { toValue: 1, duration: 500, useNativeDriver: true, }).start();参数参数作用toValue目标值duration动画时间easing缓动函数delay延迟useNativeDriver是否使用原生驱动4. spring 弹簧动画Animated.spring(scale, { toValue: 1, friction: 4, tension: 80, useNativeDriver: true, }).start();效果0.8 ↓1.1 ↓0.98 ↓1适合•Button点击•卡片弹出•Drawer5. decay模拟惯性。Animated.decay(position, { velocity: 2, deceleration: 0.998, useNativeDriver: true, }).start();一般用于滑动↓松手继续滑6. sequence串行动画。Animated.sequence([ Animated.timing(opacity,...), Animated.spring(scale,...) ]).start();执行顺序透明↓缩放7. parallel并行动画。Animated.parallel([ Animated.timing(opacity,...), Animated.spring(scale,...) ]).start();同时执行。8. stagger交错动画。Animated.stagger(100, animations).start();效果Item1100msItem2100msItem39. loop循环动画。Animated.loop( Animated.timing(...) ).start();例如 Loading。二、插值 interpolateAnimated.Value 往往只有0~1需要转换。例如const rotate value.interpolate({ inputRange:[0,1], outputRange:[0deg,360deg] })再绑定transform:[ { rotate } ]也可以0↓100pxtranslateX:value.interpolate({ inputRange:[0,1], outputRange:[0,100] })三、Animated.event绑定滚动。const scrollY useRef(new Animated.Value(0)).current; Animated.ScrollView onScroll{Animated.event( [{ nativeEvent:{ contentOffset:{ y:scrollY } } }], { useNativeDriver:true } )} /这样 Header 就能跟随 Scroll 做动画而且使用原生驱动时不会因 JS 线程繁忙而明显掉帧。(React Native)四、Animated 常见动画例如透明opacity位移translateX translateY缩放scale旋转rotate组合transform:[ {translateY}, {scale}, {rotate} ]五、为什么 Animated 会卡RN 有JS Thread↓Bridge↓Native(UI Thread)如果JS执行太久例如大量计算网络回调rendersetState动画每一帧都要经过 Bridge 更新就容易掉帧。六、useNativeDriver 原理默认JS↓计算动画↓Bridge↓Native每一帧都要跨线程。开启useNativeDriver:true之后开始动画↓把动画配置发送给 Native↓Native 自己执行动画运行过程中无需每帧经过 JS因此即使 JS 线程短暂阻塞动画仍能保持流畅。(React Native Archive)七、为什么 useNativeDriver 更快因为没有 Bridge 通信以前60FPS↓60次Bridge现在启动一次↓Native执行Bridge 开销几乎没有。八、useNativeDriver 的限制只能动画✅opacitytransformtranslatescalerotate不能widthheightlefttopflexmargin也就是说布局属性通常不能由原生驱动直接动画。(React Native Archive)九、动画性能优化① 优先使用 useNativeDriverAnimated.timing(...,{ useNativeDriver:true })这是官方推荐的首选优化。(React Native)② 少动画 Layout不要widthheightlefttop推荐translatescaleopacityGPU 对transform和opacity的处理通常更高效。(React Native Archive)③ 避免频繁 setState错误setState() ↓ render() ↓ 动画改为Animated.Value驱动 UI。④ 减少组件重渲染例如React.memouseMemouseCallback动画组件不要反复 Render。⑤ Scroll 动画使用 Animated.event不要onScroll{(){ setState() }}而是Animated.event(...)减少 JS 参与提高滚动跟随动画的流畅度。(React Native Archive)⑥ 大列表不要全部动画例如FlatList1000 Item↓1000 Animation建议•仅为可见项添加动画•配合FlatList的虚拟化能力•避免长时间运行大量循环动画⑦ 使用 Release 包测试Debug 模式下JS很慢不要拿 Debug 判断动画性能。十、Animated 与 Reanimated 对比对比项AnimatedReanimated官方支持✅第三方社区主流学习成本低较高useNativeDriver支持默认在 UI 线程执行工作单元手势联动一般很强复杂动画一般优秀性能好更好尤其复杂交互场景目前 React Native 社区中如果涉及复杂手势、共享值、拖拽、布局动画等很多项目更倾向于使用 Reanimated而简单的透明度、位移、缩放等动画官方Animated已经能够满足大多数需求。(SWMansion Docs)