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：