javascript
Lottie 动画AE+Bodymovin导出的JSON文件解读
鏈接：https://www.jianshu.com/p/e41c7d826324
?
lottie動畫的json配置object
| v | 使用bodymovin的版本 |
| assetes | 圖片集合 |
| layers | 圖層集合 |
| w | 視圖的寬度 |
| h | 視圖的高度 |
| ip | 起始關(guān)鍵幀 |
| op | 結(jié)束關(guān)鍵幀 |
| fr | 幀率 |
動畫時間 = (op - ip)/fr
在AE制作視頻是的開始和結(jié)束時通過設置兩個關(guān)鍵幀關(guān)鍵幀來完成。幀率就是單位為每秒顯示幀數(shù)。
object -> assetes
assetes是一個數(shù)組，描述包含的所有資源
| id | 圖片唯一識別的id，圖層獲取圖片的標識 |
| w | 圖片的寬度 |
| h | 圖片的高度 |
| u | 圖片的路徑，實際并未使用 例：images/ |
| p | 圖片的名稱 例：img_0.png/ |
| layers | 預合成層 |
預合成層是對已存在的某些圖層進行分組，把它們放置到新的合成中。layers用來實現(xiàn)預合成層，它和assetes同級的layers屬于同一種數(shù)據(jù)類型。
object -> layers
layers是一個數(shù)組，描述包含的所有圖層
| nm | layer的名稱，在ae中生成唯一 |
| ind | layer的Id，唯一 |
| ty | layer的類型，為數(shù)字 |
| refId | 引用的資源，圖片/預合成層 |
| parent | 父圖層的id，默認都添加到跟圖層上，如果指定了id不為0會尋找父圖層并添加到上面 |
| ip | 該圖層的起始關(guān)鍵幀 |
| op | 該圖層的結(jié)束關(guān)鍵幀 |
| w | 預合成層：寬度 |
| h | 預合成層：圖層高度 |
| sw | 固態(tài)層：寬度 |
| sh | 固態(tài)層：圖層高度 |
| sc | 固態(tài)層：顏色 |
| ks | 外觀信息，下面有進一步分析 |
| tt | 遮罩類型 |
| masksProperties | 蒙版的數(shù)組 |
| shapes | 矢量圖形圖層的數(shù)組 |
-
type：layer的類型
- 0 預合成層
- 1 固態(tài)層
- 2 圖片曾
- 3 空層
- 4 形狀層
- 5 位置層
-
當前為圖片層時候，寬高通過asset來讀取。預合成層和固態(tài)層，從屬性讀取，其他情況直接讀取根圖層的寬高。
-
ip，op：當前圖層的開始和結(jié)束關(guān)鍵幀，決定該圖層動畫開始和結(jié)束的時間，使動畫可以只在整個過程的某一部分產(chǎn)生。幀率和根圖層共享。
object -> layers -> ks
| o | opacity不透明度 |
| r/rz | rotation旋轉(zhuǎn) |
| p | position位置 |
| a | anchor錨點 |
| s | scale縮放 |
opacity、rotation、position
不透明度和旋轉(zhuǎn)通過讀取字典內(nèi)k值來獲取。位置下有s屬性時會從x和y讀取，沒有s時也從k讀取。k對應的值有如下幾種情況：
- t表示開始/結(jié)束幀
- s和e表示開始/結(jié)束屬性值
- i和o決定動畫的時間函數(shù)
anchor
同樣有兩種表示，帶動畫和不帶動畫。不帶動畫會用2個數(shù)字生成位置。當時數(shù)組帶t值時表示有動畫。參數(shù)和上面類似，區(qū)別是在s和e會生成移動的軌跡數(shù)組和關(guān)鍵幀的位置數(shù)組。
scale
同樣有兩種表示，帶動畫和不帶動畫。不帶動畫會用2個數(shù)字生成3D的縮放變換，單位比例是100.f。帶動畫參數(shù)同樣和上面類似，區(qū)別是s和e生成關(guān)鍵幀比例變換值的數(shù)組。
object -> layers -> shapes
shape是一個形狀圖層的數(shù)組，他可以通過path(UIBezierPath)屬性做出很多神奇的效果。圖層的類型描述了繪制的各種特性。如果你對UIBezierPath了解，你會發(fā)現(xiàn)以下的功能剛好都是它支持的全部~
| ty | 圖層類型 |
目前ty支持的功能：
下面用st和sh距離來說明配置內(nèi)容，其他類似。
1. gr混合圖層（ShapeGroup）
| it | 每個圖層的json |
2. st圖形描邊（ShapeStroke）
| c | 線的顏色 |
| w | 線的寬度 |
| o | 線的不透明度 |
| lc | 線段的頭尾樣式：默認不添加任何形狀、一半的半圓、一半的矩形 |
| lg | 線的鏈接類型：折線、平滑、棱角 |
| d | 線段的分割模式，數(shù)據(jù)內(nèi)容為線段寬度+空白寬度 |
顏色參考下面顏色值的數(shù)據(jù)內(nèi)容，寬度和不透明度都是數(shù)字，參考下面數(shù)字值的數(shù)據(jù)內(nèi)容
顏色值color value
通過屬性k取到內(nèi)容，根據(jù)數(shù)據(jù)類型區(qū)分，有幀動畫和無動畫兩種情況。數(shù)組&數(shù)組第一項有t屬性表示有幀動畫。
-
幀動畫
名稱定義 t 關(guān)鍵幀 s 開始顏色，數(shù)據(jù)類型同無動畫一致 e 結(jié)束顏色，數(shù)據(jù)類型同無動畫一致 i 時間函數(shù)的參數(shù)，貝塞爾曲線內(nèi)切點值 o 時間函數(shù)的參數(shù)，貝塞爾曲線外切點值 h 凍結(jié)關(guān)鍵幀，在結(jié)束時添加同樣的值 -
無動畫
4個數(shù)字分別代表rgba，生成顏色
數(shù)字值number value
通過屬性k取到內(nèi)容，根據(jù)數(shù)據(jù)類型區(qū)分，有幀動畫和無動畫兩種情況。數(shù)組&數(shù)組第一項有t屬性表示有幀動畫。
-
幀動畫
同顏色的參數(shù)類型，s/e分別表示開始和結(jié)束數(shù)字，i/o代表時間函數(shù)的參數(shù)，h代表關(guān)鍵幀。
-
無動畫
數(shù)字即代表取值
3. fl形狀填充（ShapeFill）
數(shù)據(jù)格式同st類似，沒有width參數(shù)，只有顏色和不透明度
4. tr圖形變換（ShapeTransform）
數(shù)據(jù)格式同st類似，但是參數(shù)多了
| p | 位置 |
| a | 錨點 |
| s | 縮放 |
| r | 旋轉(zhuǎn) |
| o | 不透明度 |
這里新增了兩種數(shù)據(jù)類型，位置和錨點使用的坐標值，縮放使用的比例值，旋轉(zhuǎn)和不透明度使用之前說到的數(shù)字值。
坐標值point value
老規(guī)矩數(shù)組有t參數(shù)表示幀動畫，無動畫直接用2個值生成坐標的x和y。有動畫時參數(shù)同顏色類型類似，除關(guān)鍵幀、時間函數(shù)、開始結(jié)束值新增兩個點來生成移動路徑。
比例值scale value
老規(guī)矩數(shù)組有t參數(shù)表示幀動畫，無動畫直接用2個值作為參數(shù)生成變換矩陣。有動畫時參數(shù)同顏色類型。
5. sh圖形路徑（ShapePath）
| ks | 外觀信息，矢量路徑描述對象 |
ks數(shù)據(jù)從其屬性k取值。根據(jù)數(shù)據(jù)類型區(qū)分，有幀動畫和無動畫兩種情況。數(shù)組&數(shù)組第一項有t屬性表示有幀動畫。這里僅說明圖形無動畫，但其所在的圖層本身可能存在不透明或縮放等動畫。
形狀值shape value
-
幀動畫
名稱定義 t 矢量圖顯示的關(guān)鍵幀 s 動畫開始的矢量圖，數(shù)據(jù)類型同無動畫一致 e 動畫結(jié)束的矢量圖，數(shù)據(jù)類型同無動畫一致 i 時間函數(shù)的參數(shù)，貝塞爾曲線內(nèi)切點值 o 時間函數(shù)的參數(shù)，貝塞爾曲線外切點值 h 凍結(jié)關(guān)鍵幀，在結(jié)束時添加同樣的矢量圖 通過上述的參數(shù)，可以計算出關(guān)鍵幀，關(guān)鍵幀的矢量圖，時間函數(shù)等，這些信息就組成了矢量圖的動畫。
-
無動畫
名稱定義 c 結(jié)束subpath，用直線鏈接最后一個點和第一個點 v 頂點坐標集合 i 內(nèi)切線點集合 o 外切線點集合 c 貝塞爾路徑閉合 通過v，i，o三個屬性可以創(chuàng)建一個基于矢量的路徑。通過計算出4個點可以確定一條三次貝塞爾曲線或直線的路徑，所有點合成在一起組成一個矢量圖。具體實現(xiàn)方式可以參考三次貝塞爾曲線。
其他路徑
數(shù)據(jù)結(jié)構(gòu)基本類似，都是以上提到的類型組合
?
總結(jié)
以上是生活随笔為你收集整理的Lottie 动画AE+Bodymovin导出的JSON文件解读的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Scratch（四十八）：植物大战僵尸
- 下一篇： gradle idea java ssm