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