【译】React Native中的动画渐变

最近作项目时须要实现一个渐变色的背景，真正实现时才发现要比我想象中花费的时间要多。

求大佬们点个关注，会按期写原创和翻译国外最新文章，跟大佬们一块儿学习进步，有问题或者建议欢迎加微信ruiwendelll，拉你们进技术交流群，一块儿探讨学习，谢谢了！

原文地址 这里是源码

天真的尝试

要在React Native中显示渐变，人们使用react-native-linear-gradient项目。我想看看是否有人试过动态地改变颜色，我找到了Animated Gradient Transition这个项目。仔细查看代码，个人反应是这张的：

我不明白为何它须要两个类，为何有这么多的代码。我不想花太多时间去理解它了。我以为我本身的思路就能简单地解决这个问题：

1. 使用Animate.createAnimatedComponent建立一个AnimatedLinearGradient组件
2. 插入某些颜色并传递给AnimatedLinearGradient

很简单吧？这里是源码（会崩溃）。我使用它作了一个demo，而后就获得了error：

JSON value <null> of type NSNull cannot be converted to a UIColor. Did you forget to call processColor() on the JS side?

我求助了twttier，动画不能使用arrays。尽管我以为我作了正确的事。动画库不会处理任何数组类型的值，因此底层的native组件不会获得动态的颜色。

这就是以前的代码如此庞大的缘由。

正确构建

知道了动态化的限制。咱们修改一下思路让程序更健壮吧。

1. 我须要主控件AnimatedGradient像LinearGradient那样工做。它接收color类型的数组
2. 在改变colors数组的时候。咱们想要一个动画效果。为了实现这个，AnimatedGradient须要保持对以前colors数组的追踪。
3. 由于咱们不能使用arrays来改变值，咱们要创建一个GradientHelper来独立地接收颜色数组。而后在Animated.createAnimatedComponent中调用它。GradientHelper会经过react-native-linear-gradient包把array中的值传给LinearGradient控件。

为了便于理解，咱们假设两种颜色。

AnimatedGradient component

源码

首先，建立一个AnimatedGradientHelper

在AnimatedGradient的构造函数中，咱们将以跟踪之前的颜色初始化prevColors状态字段。咱们还初始化了一个名为tweener的Animated.Value。

在getDerivedStateFromProps中，咱们获取state.colors值并保持在state.prevColors中。咱们设置了新的state.colors，咱们重置了tweener。

在componentWillUpdate（也就是当参数改变时），咱们将使tweener从0移动到1。

在render方法中，咱们使用tweener，prevColors和colors来建立两个颜色插值，并将它们分别传递给AnimatedGradientHelper。

Gradient Helper

源码

在GradientHelper中，咱们所作的就是获取color1和color2参数，将它们放入一个数组中，并将其传递给LinearGradient。咱们这样作是由于咱们须要绕过Animated的限制。

下面是demo；

如今咱们知道为何原始的代码如此之大。它必须作全部这些，并处理超过2种颜色的渐变。

如何动态改变

咱们能够增长额外一步为其余属性添加动画。LinearGradient组件容许您指定渐变开始和结束的坐标。为何不插入那些呢？这是一个更新的渲染方法。您能够猜想组件的其他部分发生了什么。源码

咱们只须要经过作一些道具来调整咱们的GradientHelper。代码

咱们就获得了一个更酷的demo：

因此咱们知道了如何在RN中实现动态渐变，和一点点动画效果。