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