【譯】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中實現動態漸變，和一點點動畫效果。