14｜Reanimated：如何让动画变得更流畅？
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
React Native中实现流畅动画的关键在于选择合适的动画库。动画的本质是由一张张快速切换的静态图片组成，为了保证手机动画流畅，需要每秒渲染60帧。在本文中，作者指出了使用setInterval + setState的方法在复杂页面、复杂交互情况下并不适合实现动画，因为setState是一种耗时较长的更新页面的方法。因此，在涉及动画的业务场景中，需要引入动画库来保障动画的流畅性。文章还详细介绍了React Native中常用的三种动画工具，包括适合轻量级动画场景使用的React Native自带的动画。此外，文章还详细介绍了Reanimated动画库的使用方法，包括共享值、衍生值、动画组件和更新共享值等概念。通过对比State和Reanimated的更新机制，读者可以更好地理解Reanimated动画库的使用方式。通过示例代码和对比分析，读者可以更好地理解Reanimated动画库的使用方法，为实现流畅动画提供了有益的指导。
《React Native 新架构实战课》，新⼈⾸单¥59
全部留言(5)
- 最新
- 精选
Wcly👺请问现在Reanimated支持RN新架构了吗？作者回复: 支持了
2022-11-28归属地：北京1
worm老师您好，Reanimated 是如何把 JS 动画代码放到 UI 主线程的 JS 虚拟机中的呢？这部分是 C++ 实现的吧？有没有这部分的讲解材料或者实现的源码位置？作者回复: 简单的讲，执行 JavaScript 代码（字符串）依赖的是 JavaScript 引擎，而 JavaScript 函数调用时，可以把 aWorklet 函数和其上下文告诉 JavaScript 引擎，然后再在 UI 线程单独开一个同步的上下文执行。 官方视频如下：https://swmansion.com/academy/webinars/krzysztof-magiera-reanimated-2/ 官方伪代码如下： ---JavaScript--- const CHANCE = 0.6; function notAWorklet(hotDogOrNot){ lemmeUpdateSomeReeduxx({ isHotDog: hotDogOrNot }); } function aWorklet(thing){ 'worklet'; const decide = Math.random() > CHANCE; notAWorklet(decide); } ---C++--- aWorklet.asString ='function aWorklet(thing){ const decide = Math.random() >0' aWorklet.closure ={ CHANCE,notAWorklet }
2022-05-111
happy老师，问个问题。被RN的动画抓狂，想实现一个ScrollView，内部有很长的列表，然后要实现一个切换scrollView的高度的动画，内容的不会动。整体就是高度变大变小的一个动画，感觉都很难实现。。。Animated提供的貌似都是transform之类的动画，没有设置height的这种动画吗？作者回复: 这个需求有点奇怪，能具体描述一下吗
2022-07-29归属地：北京
*****有人碰到过 android debug 时 demo crash吗？2024-03-12归属地：福建1
见字如晤我记得 react-native-gesture-handler 也是使用了 UI线程，都交给 UI 线程，UI 线程会不会也“不堪重负”？2022-06-08