先上效果圖，這個(gè)是做的一個(gè)仿抖音的點(diǎn)贊動(dòng)畫：
眾所周知，屬性動(dòng)畫付鹿、補(bǔ)間動(dòng)畫通常只能做一些效果簡單的缓呛，而做復(fù)雜的動(dòng)畫可采用gif圖，幀動(dòng)畫傅寡，但是這樣資源空間增大導(dǎo)致apk增大不小。而加載json文件實(shí)現(xiàn)動(dòng)畫就完美解決以上問題。
設(shè)計(jì)師AE導(dǎo)出Json文件荐操，Lotti 解析Json文件后調(diào)Core Animation的API繪制渲染大猛。所以讓你們公司的UI去學(xué)一學(xué)AE吧，多們技能好防身淀零。
Lottie開源庫地址：一個(gè)集Android挽绩、Ios、React Native與Web平臺(tái)于一身的女子驾中。
https://github.com/airbnb/lottie-android
使用方式：
- 引入庫
compile 'com.airbnb.android:lottie:1.0.1'
-
創(chuàng)建assets文件夾唉堪，將json文件放入其中。
image.png
- 引用LottieAnimationView控件
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_likeanim"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:lottie_fileName="likeanim.json"
app:lottie_loop="true"
android:layout_centerInParent="true"/>
常用屬性：
app:lottie_fileName="likeanim.json" 加載json的文件名
app:lottie_loop="true" 是否循環(huán)播放
app:lottie_autoPlay="true" 是否自動(dòng)播放
常用操作：
lottieLike.playAnimation(); //播放
lottieLike.pauseAnimation(); //暫停
lottieLike.cancelAnimation(); //取消
lottieLike.getDuration(); //獲取動(dòng)畫時(shí)長
lottieLike.addAnimatorListener(new Animator.AnimatorListener() { //添加動(dòng)畫監(jiān)聽
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
lottie動(dòng)畫原理
上圖是Lottie動(dòng)畫庫從AE導(dǎo)出動(dòng)畫到繪制到客戶端屏幕的過程肩民，第一階段是JSON到Model(OC數(shù)據(jù)模型)的轉(zhuǎn)換過程唠亚，主要是將JSON轉(zhuǎn)成OC語言可以識(shí)別的數(shù)據(jù)模型Model, Model實(shí)際上是一個(gè)Object類型的對象，我們可以通過屬性key快速查找數(shù)據(jù)內(nèi)容持痰，第二階段是Model(數(shù)據(jù)模型)依附到CALayer(圖層)上灶搜，就像寫一個(gè)CALayer一樣，把Model數(shù)據(jù)一一賦值給CALayer的屬性上工窍，必要時(shí)再做特殊處理割卖，最后在圖層CALayer上添加Animation(動(dòng)畫)。
JSON字段解讀
JSON最外一層的數(shù)據(jù)患雏，包括一個(gè)動(dòng)畫的基礎(chǔ)數(shù)據(jù)：動(dòng)畫幀率鹏溯、起始/結(jié)束關(guān)鍵幀，動(dòng)畫的寬高等淹仑，還有子圖層的信息和關(guān)聯(lián)的資源信息丙挽，如圖片，矢量圖等匀借。
{
"v": "5.6.10", // bodymovin插件版本
"fr": 25, // 幀率
"ip": 0, // 起始關(guān)鍵幀
"op": 277, // 結(jié)束關(guān)鍵幀
"w": 110, // 視圖寬度
"h": 110, // 視圖高度
"nm": "cloud", // 動(dòng)畫名稱
"ddd": 0, // 是否是3D
"assets": [...] // 資源集合
"layers": [...] // 圖層集合
}
assets 資源集合
assets是一個(gè)數(shù)組颜阐，資源信息包含的是矢量圖信息，如形狀吓肋，大小等等凳怨，也包含位圖；還可能是預(yù)合成層蓬坡，即對已存在的某些圖層進(jìn)行分組猿棉，把它們放置到新的合成中，作為新的一個(gè)資源對象屑咳，這里layers的對象結(jié)構(gòu)是跟上面一級(jí)屬性中的layers圖層集合是一樣的圖層結(jié)構(gòu)萨赁。
"assets": [
{
"id": "image_0", // 圖片唯一識(shí)別的id，圖層獲取圖片的標(biāo)識(shí)
"w": 167, // 圖片的寬度
"h": 165, // 圖片的高度
"u": "images/", // 圖片的路徑
"p": "img_0.png", // 圖片的名稱
"layers": [] // 預(yù)合成層
}
]
layers 圖層集合
layers對象也是一個(gè)數(shù)組兆龙，數(shù)組中的每個(gè)元素對應(yīng)一個(gè)圖層杖爽，圖層信息包括的圖層的位置敲董，大小，形狀慰安，起始關(guān)鍵幀腋寨，結(jié)束關(guān)鍵幀等，一個(gè)個(gè)圖層動(dòng)畫疊加起來構(gòu)成最終的動(dòng)畫效果化焕。
"layers": [
{
"ddd": 0, // 是否是3D圖層
"ind": 1, // 在AE里的圖層標(biāo)序號(hào)
"ty": 4, // 圖層類型
"nm": "形狀圖層 1", // 在AE下的命名
"ks": {}, // 動(dòng)畫屬性值萄窜，下面有進(jìn)一步拆解
"shapes": {}, // 矢量圖形圖層信息，下面有進(jìn)一步拆解
"ip": 0, // 起始關(guān)鍵幀
"op": 750, // 結(jié)束關(guān)鍵幀
"refId: 0, // 引用資源ID
"parent": 0, // 父圖層的id撒桨，默認(rèn)都添加到根圖層上查刻，如果指定了id不為0會(huì)尋找父圖層并添加到上面
"masksProperties":[], // 蒙版的數(shù)組
"w": 100, // 預(yù)合成層：寬度
"h": 100, // 預(yù)合成層：圖層高度
"sw": 0, // 固態(tài)層：寬度
"sh": 0, // 固態(tài)層：圖層高度
"sc": 0 , // 固態(tài)層：顏色
}
]
