应用react-native-reanimated 能够在使RN 上的动画更加晦涩。应用它的陈说式的api 将动画事后定义好。并在UI 线程中运行,防止了js 与native 的交互。实现了60FPS 的动画成果。
本文记录一次在应用reanimated 和 react-native-svg 中遇到的一个问题曾经解决方案。
遇到的问题
最近一个需要中,遇到须要利用svg 来实现一个绳子弹动的动画。
在做demo 时,成果合乎预期。
但当放到实在的页面中,并存在大量组件渲染时,通过Animated.createAnimatedComponent(Path)
创立的<Path />
组件在执行动画时存在卡顿的状况(并不合乎预期)。
解决形式
最终一番排查问题之后,找到问题所在。感激这个issue – Animating SVGs with reanimated are not native animations
reanimated 默认只对存在白名单中的props 解决成native 端执行动画
而在svg 中,想要批改<Path />
上的props 来实现动画,比方d
这种,默认是不在native 端执行
所以须要把d
这个prop 加到reanimated 的白名单中,应用上面两行代码:
Animated.addWhitelistedNativeProps({ d: true })
Animated.addWhitelistedUIProps({ d: true })
当然除了<Path />
的d
prop,别的组件上的prop 都能用这种形式增加到reanimated 的白名单中
最初
最终通过上文提到的issue 我的问题失去了解决,reanimated 的维护者也将上述两个办法增加到了reanimated v1.x.x 的文档中。
本文作者: Roy Luo
本文链接: react-native-reanimated 与react-native-svg 应用中的一个小问题
发表回复