React-Native 动画优化
前言
动画对于客户端来说是非常重要的一部分，直接影响到应用的用户体验。前端对于动画优化通常使用CSS3样式来实现动画，以利用GPU加速特性。而React-Native由于渲染模式的不同，无法使用CSS样式的方式优化。
React-Native的实现
React-Native在动画方面有两个主要方式，一个是Animated，一个是LayoutAnimation。
Animated
Animated动画库的原理是由JavaScript来进行动画的计算，然后在每帧设置对应组件的style来实现动画过程（requestAnimationFrame）。
这个动画库的特点是非常灵活，因为所有的控制都是通过JavaScript实现的，动画补帧都是在JavaScript端完成，可以实现各种复杂动画效果，包括跟手动画等。
但是成也JavaScript败也JavaScript，JavaScript是单线程的，动画的特点是要保证流畅就要保证每秒60的帧率，也就是说如果在16ms内处理不完，势必要掉帧。而在实际业务中，播放动画的同时一般都会执行一些任务处理逻辑。比如数据拉取、数据计算，典型情况通常会伴有Loading动画，切换页面过场时伴随新页面数据加载等。在复杂场景下，由于业务逻辑的加入，动画处理的帧率就很难保证，用我们QA的话说就是卡的像个Web。。。
优点：
- 可实现复杂动画
- 非常灵活
- 可以兼容Web
缺点：
- 性能问题，掉帧、卡顿
LayoutAnimation
React-Native自带还有一种动画的实现方式，就是LayoutAnimation。这种方案是直接在Native实现一些动画效果，然后由JavaScript进行设置调用，由于整个动画过程交由Native处理，使得性能得以保证。不过LayoutAnimation的实现思路有点问题，他只是预置了几个动画效果，并且只能配置在create/update/delete的时候，需要自定义的动画、跟手动画等都没法实现。
优点：
- 性能良好
缺点：
- 动画效果简单，可适用范围较窄
尝试解决
给他特权
针对Animated的优化思路就是解决动画播放时JavaScript任务量的问题，保证动画循环达到60帧。一个典型的解决方案就是暂时停止所有同步任务的处理，等到动画执行完成之后再同步或异步的执行任务处理。比如在切页转场前暂停耗时操作（延迟Redux的dispatch过程等），转场动画结束后再进行同步或异步处理，把大的同步任务用setTimeout等方式拆成多个异步过程处理。
这种方案可以一定程度上解决动画卡顿的问题，但是有几个缺点：
- 任务总是要执行的，延迟处理会导致整个处理过程变长，响应用户操作速度变慢，影响用户体验。
- 治标不治本，复杂动画该卡还得卡。。。
优点：
- 改动较少，成本低，万一以后facebook改进了呢？比如在独立线程进行动画渲染计算？（需要解决数据同步问题，WebWorker也是个坑）
- 可以实现跟手动画，控制好JavaScript的任务量，效果还可以
所以此方案适用 动画相对简单、后续任务不复杂 的场景
原生优化
要从根本上解决问题，就需要让动画过程脱离JavaScript。所以就要开发原生组件来实现动画过程，这样可以充分利用机器性能，可以使用GPU进行动画渲染。还需要考虑灵活性，如果只能实现固定的效果那么使用场景就大打折扣。
然而，我们并不需要从头设计，OC、Android、WPF，都有优秀的动画API，我们还等什么？抄吧。
（So，欢迎使用 react-native-animation 支持iOS、Android，目前验证可行、能用、不完善、待重构，欢迎PR~）
举个小栗子：
<Animation.AnimationView
data={[{
type: 'Alpha',
from: 0,
to: 1,
duration: 500,
}]} autoplay={true}>
other views...
</Animation.AnimationView>
*Now support: 'Translate' | 'Rotate' | 'Scale' | 'Alpha'
Props：
export interface PropsDefine {
data: AnimationModel[]
style?: React.ViewStyle
autoplay?: boolean
autoclear?: boolean
onStart?: (view: AnimationView) => void
onEnd?: (view: AnimationView) => void
}
数据模型：
export interface AnimationModel {
name?: string
type: 'Translate' | 'Rotate' | 'Scale' | 'Alpha'
from?: number
to?: number
from2?: number
to2?: number
duration: number
startOffset?: number
interpolator?: 'Linear'
interpolatorData?: number
repeat?: number
}
效果演示：
iOS微粉App（android版兼容开发中），业务逻辑全React-Native实现。赞踩动画、弹幕动画、切页动画、回复/评论弹层动画已应用优化。
虽然这种方案可以解决可预测的动画得卡顿问题，缺点也很明显：
- 动画的过程是预设好的，所以无法实现跟手动画
优点：
- 动画过程交由Native处理，性能Max，JavaScript任务处理不影响动画效果，可并行
所以此方案适用 可预测的动画 的场景
结语
虽然React-Native标榜的就是性能更好，但也只是跟Web对比而言，跟Native比还是有不少差距的，跟Xamarin等跨平台方案对比性能也差距不小，所以在开发时还是要关注下性能问题，性能调优还是要花不少精力去解决的。
微粉iOS：
