2021-02-02 react-native Animated useNativeDriver 详解

react native 的 Animated api 有一个很重要的设计：可序列化。这意味着，我们在动画开始前，就可以向 native 端发送所有的参数，这样一来，native 端就可以在 UI线程执行这个动画，而不是每一帧都通过brdige 发送消息更新UI。

这个对于性能优化很有用，因为一旦动画开始执行，js线程即使阻塞了，动画也可以很流畅的执行（不需要js线程了）；在实践中，业务逻辑代码和 react 的ui更新都是在js线程执行，导致js线程可能会阻塞。

动画原理

动画执行的流程如下

img

执行步骤：

• js端：动画引擎利用requestAnimationFrame 这个api，根据动画配置的曲线，在每一帧计算新的动画值。

• js端：新的动画值作为 props 传递到使用这个动画值的view。

• js端：view 调用 setNativeProps 。

• 参数通过 bidge 传到 native端。

• native端： UIView 或者 android.View 更新。

我们可以发现，大部分的工作是在js线程执行的，如果js线程阻塞了就会掉帧。而且，每一帧的UI更新都要通过bridge, birdge 也会又可能阻塞。

如果使用 native driver ，所有的步骤都移到原生端了。由于Animated api 生成的是一系列按动画曲线组成的动画节点，只需在动画开始前完成序列化，并一次性发给native端，native 代码就会自己在ui线程更新每一帧的UI了。

使用native driver后的动画执行步骤

• native端：native driver 使用CADisplayLink 或者 android.view.Choreographer 在每一帧执行并根据动画曲线更新动画值。

• native端：新的动画值作为 props 传递到使用这个动画值的 native view。

• native端： UIView 或者 android.View 更新。

可以发现，不需要js线程，不需要birdge，这意味着动画更加流畅

注意

只能在非layout属性（比如transform或者opacity）上使用native driver ，不能在 flexbox、position （比如width, height, top, left等）上使用 native driver