鏈接：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é)束時通過設(shè)置兩個關(guān)鍵幀關(guān)鍵幀來完成。幀率就是單位為每秒顯示幀數(shù)。

object -> assetes

assetes是一個數(shù)組，描述包含的所有資源

名稱定義

id	圖片唯一識別的id，圖層獲取圖片的標(biāo)識
w	圖片的寬度
h	圖片的高度
u	圖片的路徑，實(shí)際并未使用 例：images/
p	圖片的名稱 例：img_0.png/
layers	預(yù)合成層

預(yù)合成層是對已存在的某些圖層進(jìn)行分組，把它們放置到新的合成中。layers用來實(shí)現(xiàn)預(yù)合成層，它和assetes同級的layers屬于同一種數(shù)據(jù)類型。

object -> layers

layers是一個數(shù)組，描述包含的所有圖層

名稱定義

nm	layer的名稱，在ae中生成唯一
ind	layer的Id，唯一
ty	layer的類型，為數(shù)字
refId	引用的資源，圖片/預(yù)合成層
parent	父圖層的id，默認(rèn)都添加到跟圖層上，如果指定了id不為0會尋找父圖層并添加到上面
ip	該圖層的起始關(guān)鍵幀
op	該圖層的結(jié)束關(guān)鍵幀
w	預(yù)合成層：寬度
h	預(yù)合成層：圖層高度
sw	固態(tài)層：寬度
sh	固態(tài)層：圖層高度
sc	固態(tài)層：顏色
ks	外觀信息，下面有進(jìn)一步分析
tt	遮罩類型
masksProperties	蒙版的數(shù)組
shapes	矢量圖形圖層的數(shù)組

• type：layer的類型

  • 0 預(yù)合成層
  • 1 固態(tài)層
  • 2 圖片曾
  • 3 空層
  • 4 形狀層
  • 5 位置層

• 當(dāng)前為圖片層時候，寬高通過asset來讀取。預(yù)合成層和固態(tài)層，從屬性讀取，其他情況直接讀取根圖層的寬高。

• ip，op：當(dāng)前圖層的開始和結(jié)束關(guān)鍵幀，決定該圖層動畫開始和結(jié)束的時間，使動畫可以只在整個過程的某一部分產(chǎn)生。幀率和根圖層共享。

object -> layers -> ks

名稱定義

o	opacity不透明度
r/rz	rotation旋轉(zhuǎn)
p	position位置
a	anchor錨點(diǎn)
s	scale縮放

opacity、rotation、position
不透明度和旋轉(zhuǎn)通過讀取字典內(nèi)k值來獲取。位置下有s屬性時會從x和y讀取，沒有s時也從k讀取。k對應(yīng)的值有如下幾種情況：

數(shù)字或3個數(shù)字組成的數(shù)組，表示對應(yīng)屬性的值，沒有動畫。比如錨點(diǎn)[62.5,46.5,0]，縮放[-100,100,100]，不透明度0等。

數(shù)組類型并且數(shù)字第一個對象的t有值時，表示幀動畫。第一個對象表示動畫開始的屬性，第二個對象表示動畫結(jié)束的屬性。通過以下參數(shù)可以拼裝出關(guān)鍵幀的屬性值，關(guān)鍵幀時間點(diǎn)，關(guān)鍵幀之間的時間函數(shù)，

• t表示開始/結(jié)束幀
• s和e表示開始/結(jié)束屬性值
• i和o決定動畫的時間函數(shù)

anchor
同樣有兩種表示，帶動畫和不帶動畫。不帶動畫會用2個數(shù)字生成位置。當(dāng)時數(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支持的功能：

gr圖形合并

st圖形描邊

fl圖形填充

tr圖形變換

sh圖形路徑

el橢圓路徑

rc矩形路徑

tm剪裁路徑

下面用st和sh距離來說明配置內(nèi)容，其他類似。

1. gr混合圖層（ShapeGroup）

名稱定義

it	每個圖層的json

2. st圖形描邊（ShapeStroke）

名稱定義

c	線的顏色
w	線的寬度
o	線的不透明度
lc	線段的頭尾樣式：默認(rèn)不添加任何形狀、一半的半圓、一半的矩形
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ù)組第一項(xiàng)有t屬性表示有幀動畫。

• 幀動畫

  名稱定義

  t	關(guān)鍵幀
  s	開始顏色，數(shù)據(jù)類型同無動畫一致
  e	結(jié)束顏色，數(shù)據(jù)類型同無動畫一致
  i	時間函數(shù)的參數(shù)，貝塞爾曲線內(nèi)切點(diǎn)值
  o	時間函數(shù)的參數(shù)，貝塞爾曲線外切點(diǎn)值
  h	凍結(jié)關(guān)鍵幀，在結(jié)束時添加同樣的值

• 無動畫

  4個數(shù)字分別代表rgba，生成顏色

數(shù)字值number value
通過屬性k取到內(nèi)容，根據(jù)數(shù)據(jù)類型區(qū)分，有幀動畫和無動畫兩種情況。數(shù)組&數(shù)組第一項(xiàng)有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	錨點(diǎn)
s	縮放
r	旋轉(zhuǎn)
o	不透明度

這里新增了兩種數(shù)據(jù)類型，位置和錨點(diǎn)使用的坐標(biāo)值，縮放使用的比例值，旋轉(zhuǎn)和不透明度使用之前說到的數(shù)字值。

坐標(biāo)值point value
老規(guī)矩?cái)?shù)組有t參數(shù)表示幀動畫，無動畫直接用2個值生成坐標(biāo)的x和y。有動畫時參數(shù)同顏色類型類似，除關(guān)鍵幀、時間函數(shù)、開始結(jié)束值新增兩個點(diǎn)來生成移動路徑。

比例值scale value
老規(guī)矩?cái)?shù)組有t參數(shù)表示幀動畫，無動畫直接用2個值作為參數(shù)生成變換矩陣。有動畫時參數(shù)同顏色類型。

5. sh圖形路徑（ShapePath）

名稱定義

ks	外觀信息，矢量路徑描述對象

ks數(shù)據(jù)從其屬性k取值。根據(jù)數(shù)據(jù)類型區(qū)分，有幀動畫和無動畫兩種情況。數(shù)組&數(shù)組第一項(xiàng)有t屬性表示有幀動畫。這里僅說明圖形無動畫，但其所在的圖層本身可能存在不透明或縮放等動畫。

形狀值shape value

• 幀動畫

  名稱定義

  t	矢量圖顯示的關(guān)鍵幀
  s	動畫開始的矢量圖，數(shù)據(jù)類型同無動畫一致
  e	動畫結(jié)束的矢量圖，數(shù)據(jù)類型同無動畫一致
  i	時間函數(shù)的參數(shù)，貝塞爾曲線內(nèi)切點(diǎn)值
  o	時間函數(shù)的參數(shù)，貝塞爾曲線外切點(diǎn)值
  h	凍結(jié)關(guān)鍵幀，在結(jié)束時添加同樣的矢量圖

  通過上述的參數(shù)，可以計(jì)算出關(guān)鍵幀，關(guān)鍵幀的矢量圖，時間函數(shù)等，這些信息就組成了矢量圖的動畫。

• 無動畫

  名稱定義

  c	結(jié)束subpath，用直線鏈接最后一個點(diǎn)和第一個點(diǎn)
  v	頂點(diǎn)坐標(biāo)集合
  i	內(nèi)切線點(diǎn)集合
  o	外切線點(diǎn)集合
  c	貝塞爾路徑閉合

  通過v，i，o三個屬性可以創(chuàng)建一個基于矢量的路徑。通過計(jì)算出4個點(diǎn)可以確定一條三次貝塞爾曲線或直線的路徑，所有點(diǎn)合成在一起組成一個矢量圖。具體實(shí)現(xiàn)方式可以參考三次貝塞爾曲線。

其他路徑

數(shù)據(jù)結(jié)構(gòu)基本類似，都是以上提到的類型組合

?

總結(jié)

以上是生活随笔為你收集整理的Lottie 动画AE+Bodymovin导出的JSON文件解读的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。