之前的文章已經介紹了 Lottie 是什麼，以及如何導入/導出設計文件，那麼今天就為大家講解如何修復漸變。

往期回顧：

閱讀文章 >>

閱讀文章 >>

閱讀文章 >>

大家在使用Lottie輸出矢量漸變圖形的時候，應該有遇到過設計的漸變效果無法正常显示的問題。無論你設計的效果是什麼樣的，導出以後都變成了黑白漸變。那麼這個問題可以修復嗎？答案是肯定的。

MAC系統漸變修復

其實在之前的文章中有提到過修復漸變的問題。對於MAC平台而言很簡單，只需要修改「漸變填充」為「Gradient」即可，方法是選中漸變填充屬性，點擊鍵盤迴車鍵即可重命名。(如果修改后還是無效，建議更新bodymovin插件為最新版)

Windows系統漸變修復

1. 雙色漸變修復

對於win系統，網上的方法是，修改ae為英文版，同時需要修改系統語言編碼方式，歷史文章中也有提到。但是進行實操后發現，特別繁瑣。而且容易導致其他軟件出錯。得不償失。所以這裏給出win系統下的修復方案，由於Airbnb官方一直沒有修復這個問題的打算（可能歪果仁的版本就不會出錯），所以只能咱們自己想辦法了。

我們知道lottie是通過json文件來描述動效的，那麼我們比對正常显示漸變的json文件和显示異常的文件就極有可能發現問題出現的原因。所以針對頭圖中的漸變圓形，我比對了一下兩個json文件的差異。發現問題來自下下面這一行代碼。

在正常显示的json文件中，這段代碼是這樣的

"g":{"p":2,"k":{"a":0,"k":[0,0.047,0.518,1,1,1,0,0.941],"ix":9}}

而在显示異常的json文件中，代碼是這樣嬸兒的

"g":{"p":2,"k":{"a":0,"k":[0,1,1,1,1,0,0,0],"ix":9}}

WTF？這誰能看得懂，一臉懵逼好么。別著急，咱們慢慢分析。首先代碼里不同的只有中括號中的数字。那麼這裏面的数字必然是用來控制顏色的。而我們知道常用的色彩模式有HSB和RGB。而本示例中的漸變參數如下，只要我們找到對應關係就能發現其中的秘密。

考驗邏輯思維的時候到了，對比上面的第一行代碼和下面的參數你能找到對應關係嗎？

首先我們知道無所是哪種色彩模式，控制色彩的都是三個參數，但是括號中一共有8個參數，那麼另外兩個就必然是控制其他屬性的。在漸變控制器中，我們發現除了色彩參數還有不透明度和位置屬性，這裏我們沒有用到不透明度那麼就一定是用來表示位置的。

我們的漸變顏色起始位置和終止位置分別位於0%和100%，那麼不難猜出，在上述代碼中就是0和1了，那麼0和1後面的三個參數顯然就是表示色彩的。

是不是感覺勝利就在眼前？然而我窮盡了九年義務教育學到的數學知識，也沒有找到任何規律。後來我就在網上搜素哦色彩模式相關的文檔，無意中發現了這個

具體咱也看不太明白，反正就是RGB有各種不同的显示方法。其中有一種被稱為浮點數的表示方法。計算方式為分別用R,G,B值除以255。然後我用色彩編輯器中的值計算了一下，頓時真相大白！

json代碼中的色彩就是通過浮點數來表示的，只需要用顏色的R,G,B值分別處以255，即可得到浮點表示的色彩值。

因為經常有除不盡的情況，所以這裏通常显示小數點后三位。到了這裏我們就能明白導致漸變出現問題的原因和修復方式了。

所以對於雙色漸變修復的方式就是在json文件中搜索「”k”:[0,1,1,1,1,0,0,0]」，然後修改為「顏色1位置，R1/255,G/255，B1/255,顏色2位置，R2/255,G2/255，B2/255」即可。

到這裏就完了嗎？別急，在日常工作當中可能還會遇到透明度漸變或者多色漸變的情況。這個時候我們怎麼通過修改json文件來解決呢？這裏就不詳述過程了，直接上乾貨。

多色/透明漸變修復

首先我們需要知道的一個事實是，當我們的導出的漸變不生效時，通常显示的是下面的代碼，也就是說不管你有幾種顏色，默認显示的都是黑白漸變”k”:[0,1,1,1,1,0,0,0]，其實這個也給我們帶來了一個便利，就是只要在代碼編輯器里查找這一段代碼就可以快速定位了。

接下來我們就通過一個稍顯複雜的案例來詳解漸變的終極修復方法。下圖是一個三色漸變的圓形及其在AE中的參數

首先這個漸變圓形有三種不同的顏色，然後有三個不透明度控制滑塊。不透明度滑塊1位置是0.1，不透明度數值為0.5；不透明度滑塊2位置是0.5，不透明度數值為1；不透明度滑塊3位置是1，不透明度數值為0.

我們再來對比一下，有問題的代碼和正常代碼之間的差別。

"g":{"p":2,"k":{"a":0,"k":[0,1,1,1,1,0,0,0],"ix":9}},
 "s":{"a":0,"k":[-75,-75],"ix":5},
 "e":{"a":0,"k":[75,75],"ix":6},

"g":{"p":3,"k":{"a":0,"k":[0,0.825,0.109,1,0.5,0.412,0.116,1,1,0,0.124,
 1,0.1,0.5,0.5,1,1,0],"ix":9}},
 "s":{"a":0,"k":[-75,-75],"ix":5},
 "e":{"a":0,"k":[75,75],"ix":6},

通過對比代碼和AE中的參數我們大致可以了解到以下信息

• “p”表示構成漸變色的數量
• “k”表示漸變色的屬性
• “s”表示漸變起始點
• “e”:表示漸變結束點

一般來說”s”，”e”屬性是不會出錯的，”p”表示顏色的數量，直接修改為正確的數值就行了。略顯複雜的就是漸變色屬性”k”了。當我們對照AE中的漸變色屬性一一比對就會了解在此案例中

“k”:[0,0.825,0.109,1,0.5,0.412,0.116,1,1,0,0.124,1]=「顏色1位置，R1/255,G1/255，B1/255,顏色2位置，R2/255,G2/255，B2/255，顏色3位置，R3/255,G3/255，B3/255，透明度1位置，透明度1數值，透明度2位置，透明度2數值，透明度3位置，透明度3數值，」

看似複雜，其實只是顏色和透明度屬性的不斷重複，首先描述完所有的顏色屬性，然後再描述完所有的透明度屬性就可以了。

最後我們就得到了一個通過修改json，修復漸變問題的通用做法。

• 在json中搜索代碼片段”k”:[0,1,1,1,1,0,0,0]來定位內容（推薦使用sublime text和notepad++修改json文件）
• 修改”p”後面的數值為正確的色彩數量
• 修改”k”後面的參數為正確的漸變參數，一般表示為「顏色1屬性，顏色2屬性，……顏色n屬性，透明度1屬性，透明度1屬性，……透明度n屬性」

備註：

• 顏色屬性：顏色位置，R/255,G/255，B/255
• 透明度屬性：透明度位置，透明度數值

歡迎關注作者微信公眾號：「動效研究社」

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五登陸地址_Lottie 動效設計完全指南：漸變修復