来源 | 愿码 (ChainDesk.CN) 内容编辑
愿码 Slogan | 连接每个程序员的故事
网站 | http://chaindesk.cn
愿码愿景 | 打造全学科 IT 系统免费课程，助力小白用户、初级工程师 0 成本免费系统学习、低成本进阶，帮助 BAT 一线资深工程师成长并利用自身优势创造睡后收入。
官方公众号 | 愿码 | 愿码服务号 | 区块链部落
免费加入愿码全思维工程师社群 | 任一公众号回复“愿码”两个字获取入群二维码
本文阅读时长：4min
任何高质量移动应用程序的一个重要方面是用户界面的流动性。动画用于提供丰富的用户体验，任何 jank 或抖动都会对此产生负面影响。动画可能会用于各种交互，从视图之间的转换，到对用户在组件上的触摸交互作出反应。高质量动画的第二个最重要的因素是确保它们不会阻止 JavaScript 线程。为了使动画保持流畅而不中断 UI 交互，渲染循环必须在 16.67 ms 内渲染每个帧，以便可以实现 60 FPS。
在本文中，我们将介绍几种在 React Native 移动应用程序中提高动画性能的技术。这些技术将防止 JavaScript 执行中断主线程。
对于这篇文章，我们假设你有一个 React Native 应用程序，它定义了一些动画。
怎么做
首先，在 React Native 中调试动画性能时，我们需要启用性能监视器。为此，请显示开发菜单（从模拟器中摇动设备或 cmd + D），然后点击显示 Perf 监视器。iOS 中的输出类似于以下屏幕截图：
Android 中的输出类似于以下屏幕截图：
如果您要为组件的过渡（opacity）或尺寸（width，height）设置动画，请确保使用 LayoutAnimation。如果要 LayoutAnimation 在 Android 上使用，则需要在应用程序启动时添加以下代码：UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true)。
如果您需要对动画进行有限控制，建议您使用 AnimatedReact Native 附带的库。此库允许您将所有动画工作卸载到本机 UI 线程上。为此，我们必须将 useNativeDriver 属性添加到我们的 Animated 调用中。我们来看一个示例 Animated 示例并将其卸载到本机线程：
componentWillMount() {
this.setState({
fadeAnimimation: new Animated.Value(0)
});
}
componentDidMount() {
Animated.timing(this.state.fadeAnimimation, {
toValue: 1,
useNativeDriver: true
}).start();
}
如果您无法将动画工作卸载到本机线程上，则仍然可以提供顺畅体验的解决方案。我们可以 InteractionManager 在动画完成后使用它来执行任务：
componentWillMount() {
this.setState({
isAnimationDone: false
});
}
componentWillUpdate() {
LayoutAnimation.easeInAndOut();
}
componentDidMount() {
InteractionManager.runAfterInteractions(() => {
this.setState({
isAnimationDone: true
});
})
}
render() {
if (!this.state.isAnimationDone) {
return this.renderPlaceholder();
}
return this.renderMainScene();
}
最后，如果您仍然遇到性能不佳的问题，则必须重新考虑动画策略或将效果不佳的视图实现为目标平台上的自定义 UI 视图组件。您必须使用 iOS 和 / 或 Android SDK 本地实现视图和动画。
这个怎么运作
本文中的提示着重于防止 JavaScript 线程锁定的简单目标。我们的 JavaScript 线程开始丢帧（锁定）的那一刻，我们失去了与我们的应用程序交互的能力，即使它只是一小段时间。这可能看起来无关紧要，但精明的用户会立即感受到这种效果。本文中提示的重点是将动画卸载到 GPU 上。当动画在主线程（由 GPU 渲染的本机层）上运行时，用户可以自由地与应用交互，而不会出现口吃，悬挂，抖动或抖动。
其他
这里有一个 useNativeDriver 可用的快速参考：
功能
iOS 版
Android 的
style，value，propertys
√
√
decay
√
timing
√
√
spring
√
add
√
√
multiply
√
√
modulo
√
diffClamp
√
√
interpoloate
√
√
event
√
division
√
√
transform
√
√