Lottie安卓開源動(dòng)畫庫使用

碉堡的Lottie

Airbnb最近開源了一個(gè)名叫Lottie的動(dòng)畫庫,它能夠同時(shí)支持iOS,Android與ReactNative的開發(fā).此消息一出,還在苦于探索自定義控件各種炫酷特效的我,興奮地就像發(fā)現(xiàn)的新大陸一般.可以說,Lottie的出現(xiàn),將極大地解放Android/iOS工程師于無盡的編寫原生自定義動(dòng)畫的工作中.當(dāng)我們的項(xiàng)目中用GIF實(shí)現(xiàn)一些復(fù)雜的視覺效果的時(shí)候,會(huì)遇到許多的問題.比如,GIF的文件過于龐大,并且對(duì)于不同分辨率設(shè)備的適配存在不便,并且Gif格式的色深問題是一個(gè)死穴.

比如下面這個(gè)動(dòng)畫效果

原始工程導(dǎo)出的json文件:http://cdn.trojx.me/blog_raw/lottie_data_origin.json

如下圖所示,通過安裝在AE上的一款名叫bodymovin的插件,能夠?qū)E中的動(dòng)畫工程文件轉(zhuǎn)換成通用的json格式描述文件,bodymovin插件本身是用于在網(wǎng)頁上呈現(xiàn)各種AE效果的一個(gè)開源庫,lottie做的事情就是實(shí)現(xiàn)了一個(gè)能夠在不同移動(dòng)端平臺(tái)上呈現(xiàn)AE動(dòng)畫的方式.從而達(dá)到動(dòng)畫文件的一次繪制、一次轉(zhuǎn)換、隨處可用的效果.當(dāng)然,就如java一次編譯,隨處運(yùn)行一樣,lottie本身這個(gè)動(dòng)畫播放庫并不是跨平臺(tái)的.

使用Lottie庫播放動(dòng)畫

終于說到主角了,然而關(guān)于它的使用方式卻是相對(duì)簡(jiǎn)單的.Lottie的引入與使用就如其他庫一樣,這里以Android平臺(tái)的使用為例.

把導(dǎo)出的json動(dòng)畫文件添加到assets目錄下：

在項(xiàng)目的build.gradle文件中加入:

dependencies {    compile 'com.airbnb.android:lottie:1.0.1'}Lottie支持Jellybean (API 16)及以上的系統(tǒng),最簡(jiǎn)單的使用方式是直接在布局文件中添加:
 
<com.airbnb.lottie.LottieAnimationView        android:id="@+id/animation_view"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        app:lottie_fileName="hello-world.json"        app:lottie_loop="true"        app:lottie_autoPlay="true" />
或者,你也可以通過代碼的方式添加.比如從位于app/src/main/assets路徑下的json文件中導(dǎo)入動(dòng)畫數(shù)據(jù):
123
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);animationView.setAnimation("hello-world.json");animationView.loop(true);
你還可以通過API控制動(dòng)畫,并且設(shè)置一些監(jiān)聽:
public class MainActivity extends AppCompatActivity {    @Override    PRotected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);        animationView.setAnimation("EmptyState.json");        animationView.loop(false);        Animator.AnimatorListener animatorListener = new Animator.AnimatorListener() {            @Override            public void onAnimationStart(Animator animator) {            }            @Override            public void onAnimationEnd(Animator animator) {                startActivity(new Intent(MainActivity.this,LoginActivity.class));            }            @Override            public void onAnimationCancel(Animator animator) {                startActivity(new Intent(MainActivity.this,LoginActivity.class));            }            @Override            public void onAnimationRepeat(Animator animator) {            }        };        animationView.addAnimatorListener(animatorListener);        animationView.playAnimation();    }}
補(bǔ)充：
想看生成json文件的看這里：http://www.trojx.me/2017/02/06/android-lottie-library/
后續(xù)補(bǔ)上demo