【譯】React Native中的動畫漸變

最近作項目時須要實現一個漸變色的背景,真正實現時才發現要比我想象中花費的時間要多。react

求大佬們點個關注,會按期寫原創和翻譯國外最新文章,跟大佬們一塊兒學習進步,有問題或者建議歡迎加微信ruiwendelll,拉你們進技術交流羣,一塊兒探討學習,謝謝了!git

原文地址 這裏是源碼github

天真的嘗試

要在React Native中顯示漸變,人們使用react-native-linear-gradient項目。我想看看是否有人試過動態地改變顏色,我找到了Animated Gradient Transition這個項目。仔細查看代碼,個人反應是這張的:react-native

我不明白爲何它須要兩個類,爲何有這麼多的代碼。我不想花太多時間去理解它了。我以爲我本身的思路就能簡單地解決這個問題:數組

  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?ide

我求助了twttier,動畫不能使用arrays。儘管我以爲我作了正確的事。動畫庫不會處理任何數組類型的值,因此底層的native組件不會獲得動態的顏色。函數

這就是以前的代碼如此龐大的緣由。學習

正確構建

知道了動態化的限制。咱們修改一下思路讓程序更健壯吧。動畫

  1. 我須要主控件AnimatedGradientLinearGradient那樣工做。它接收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中實現動態漸變,和一點點動畫效果。

相關文章
相關標籤/搜索