從UI設(shè)計(jì)到開(kāi)發(fā)雀彼，Lottie使用全流程
使用lottie
Lottie 是一個(gè) iOS纺阔、Android 和 React Native 庫(kù)瘸彤，可以實(shí)時(shí)渲染 After Effects 動(dòng)畫(huà)，讓?xiě)?yīng)用程序可以像使用靜態(tài)圖像一樣輕松地使用動(dòng)畫(huà)笛钝≈士觯可以輕松地將高質(zhì)量動(dòng)畫(huà)添加到任何本機(jī)應(yīng)用程序。本文將簡(jiǎn)單的從UI開(kāi)始婆翔，簡(jiǎn)單的記錄如何使用Lottie框架拯杠，快速打造酷炫的動(dòng)畫(huà)項(xiàng)目。
UI
安裝Bodymovin插件
Bodymovin 是 After Effects 的插件啃奴，可以將動(dòng)畫(huà)導(dǎo)出為 json 數(shù)據(jù)格式供 Lottie 使用潭陪。
1. 安裝插件安裝器 aescripts + aeplugins zxp installer 密碼： 2jbb
2. 下載插件 Bodymovin 插件，插件包在目錄https://github.com/airbnb/lottie-web/blob/master/build/extension/bodymovin.zxp 中
3. 打開(kāi)插件安裝器最蕾，選擇插件進(jìn)行安裝
4. 選擇安裝
錯(cuò)誤依溯，這里是因?yàn)槲疫€沒(méi)有安裝AE，所以先去安裝AE去瘟则。黎炉。。
這樣插件就安裝完成了醋拧，重啟AE打開(kāi)看看插件列表
<table> <tr> <td bgcolor=#FCE8E6><font color=#E35251 size =4 face ="黑體" >注意： 安裝插件完成后慷嗜，還有一項(xiàng)設(shè)置必須設(shè)置</font></td></tr></table>
編輯-首選項(xiàng)-常規(guī)-允許腳本寫(xiě)入文件和訪問(wèn)網(wǎng)絡(luò)，這項(xiàng)必須勾選
至于原因丹壕，后面會(huì)說(shuō)明庆械。
使用Bodymovin轉(zhuǎn)換動(dòng)畫(huà)
1. 先將制作好的動(dòng)畫(huà)文件導(dǎo)入AE
我這里隨便找了一測(cè)試的動(dòng)畫(huà)
2. 打開(kāi)插件
在下面的列表會(huì)顯示你已導(dǎo)入的動(dòng)畫(huà)
這時(shí)可以先點(diǎn)擊設(shè)置按鈕，設(shè)置你需要的屬性菌赖，不過(guò)一般默認(rèn)就可以了
3. 選擇輸出文件路徑
選擇文件保存到本地的路徑
4. 最后就可以點(diǎn)擊Render按鈕缭乘，輸出Json文件了
出錯(cuò)了２哂住！奴紧！
這里就是上面提到的特姐，由于第一次安裝好插件后沒(méi)有設(shè)置允許寫(xiě)入文件和訪問(wèn)網(wǎng)絡(luò)，導(dǎo)致輸出失敗绰寞，回去設(shè)置一下就好了到逊。
這樣就輸出完成了
在你本地的目錄就出現(xiàn)剛才輸出的json文件
5. 驗(yàn)證json文件
如果想檢驗(yàn)最后輸出的json動(dòng)畫(huà)文件是否正常，有以下兩種方法：
1. 在Bodymovin 插件中預(yù)覽
在預(yù)覽界面選擇本地文件
點(diǎn)開(kāi)始播放就可以預(yù)覽了
2. 在 https://lottiefiles.com/preview 中預(yù)覽
上傳完成就自動(dòng)播放預(yù)覽了
最后滤钱，UI就可以將json文件發(fā)給開(kāi)發(fā)，剩下的工作就由開(kāi)發(fā)完成了
開(kāi)發(fā)
集成Lottie
在app的 build.gradle
//lottie
implementation 'com.airbnb.android:lottie:4.2.0'
在project 的 build.gradle
allprojects {
repositories {
...
maven { url "https://oss.sonatype.org/content/repositories/snapshots/" }
}
}
導(dǎo)入動(dòng)畫(huà)文件
導(dǎo)入動(dòng)畫(huà)文件有多重方式：
存放json文件在 <td bgcolor=#FCE8E6><font color=#E35251 size =3 face ="黑體" >src/main/res/raw</font></td> 中
存放json文件在 <td bgcolor=#FCE8E6><font color=#E35251 size =3 face ="黑體" >src/main/assets</font></td> 中
最常用的是這兩種脑题。
還有是將 zip文件放在 <td bgcolor=#FCE8E6><font color=#E35251 size =3 face ="黑體" >src/main/assets</font></td> 中等件缸，不過(guò)本次測(cè)試未使用該方法
簡(jiǎn)單使用
在activity 的layout.xml中設(shè)置好布局：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.airbnb.lottie.LottieAnimationView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
//控制動(dòng)畫(huà)是否自動(dòng)播放
app:lottie_autoPlay="true"
//設(shè)置動(dòng)畫(huà)是否循環(huán)
app:lottie_loop="true"
//設(shè)置動(dòng)畫(huà)文件資源 ，來(lái)自src/main/res/raw
app:lottie_rawRes="@raw/data"
//設(shè)置動(dòng)畫(huà)文件資源 叔遂，來(lái)自src/main/assets
app:lottie_fileName="hello_world.json"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
這樣他炊，就完成了簡(jiǎn)單的lottie動(dòng)畫(huà)顯示了
補(bǔ)充
ImageView scaleType
從源碼我們可以看到，LottieAnimationView其實(shí)本質(zhì)也是一個(gè)ImageView已艰，所以痊末，是可以和正常的ImageView設(shè)置scaleType 為 centerCrop, centerInside, 或者fitXY的
@SuppressWarnings({"WeakerAccess"}) public class LottieAnimationView extends AppCompatImageView {
