image
- 来源 | 愿码(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中的输出类似于以下屏幕截图：
image
Android中的输出类似于以下屏幕截图：
image
-
如果您要为组件的过渡（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 | √ | √ |
网友评论