Lottie動畫庫使用方法詳解 教程 示例

Lottie是一個可以播放由AE打包的json動畫文件的開源庫,使用它,你可以簡單實現播放利用AE製作的動畫。

Lottie項目地址:https://github.com/airbnb/lottie-android
這裏寫圖片描述
這裏寫圖片描述

使用方法:
如上所述,該庫需要配合AE來使用,AE方面的具體方法可以參考這篇博客:http://www.jianshu.com/p/9a2136ecbc7b
下面我主要說的是在android studio 上的使用方法(eclipse需要自行提取aar的文件搭建項目)。

1、導入Lottie庫。
在app build.gradle–>dependencies{}增加compile ‘com.airbnb.android:lottie:2.0.0’
這裏使用2.0.0的庫,這個庫要求minSdkVersion爲16,compileSdkVersion爲25,需要修改。建議使用最高版本的庫,對動畫的支持好一點。

2、在佈局中添加Lottie組件。

<com.airbnb.lottie.LottieAnimationView
         android:id="@+id/animation_view"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         app:lottie_imageAssetsFolder="anim/images"//圖片文件位置**(如果有圖片資源,這個一定要有)**
         app:lottie_autoPlay="true"//自動播放
         app:lottie_fileName="anim/done.json"//文件名
         app:lottie_scale="0.3"//縮放比例
         />

(這裏注意,android:layout_width與android:layout_height需要設置match_parent(好像是wrap_content反正如果出問題了改來看看,我忘記了是什麼問題了))

還有很多屬性,可以自行看源碼,例如改變播放速度什麼的。
這些屬性可以在佈局文件中直接設置,也可以在代碼中使用。

animation_view.setImageAssetsFolder(“anim/images”);(如果有圖片資源,這個一定要有)
animation_view.setAnimation(“anim/chest.json”);//設置json動畫文件路徑
animation_view.playAnimation();//開始播放動畫

到此,已經配置完成了。

此外,需要注意一下路徑的問題:
1、資源是要放在assets中的,至於本地路徑行不行,請自行探索。
我這裏的目錄結構爲:
assets/anim/chest.json
assets/anim/images/img_0.png

2、(assets區分大小寫,哪怕是後綴名)

3、圖片資源文件名必須要和json文件裏面的相應圖片資源文件名相同。
我們來看一下json動畫文件的基本格式。

{"v":"4.7.1","fr":25,"ip":0,"op":31,"w":100,"h":100,"nm":"打勾","ddd":0,"assets":[{"id":"image_0","w":100,"h":100,"u":"images/","p":"done.png"}]

這是前面一段代碼,其中“p”=”done.png”的done.png就是圖片資源文件。
這個文件是經過修改的,默認是img_0.png的。也就是說,剛用AE生成的json文件裏面的資源文件名默認是img_0.png,img_1.png。。。。的,而如果我們要用到幾個不同的json動畫的話,這樣肯定會出現衝突,所以就需要我們自行改變名字。

如果需要對動畫進行定位和縮放,這裏還有一篇文章做了介紹。

http://blog.csdn.net/u013640004/article/details/75667228

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章