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：