QQ羣交流:425219113(計算機語言交流)
Lottie是一個可以播放由AE打包的json動畫文件的開源庫,使用它,你可以簡單實現播放利用AE製作的動畫。
Lottie項目地址:https://github.com/airbnb/lottie-android
使用方法:
如上所述,該庫需要配合AE製作json動畫來使用,AE方面的具體方法可以參考這篇博客:http://www.jianshu.com/p/9a2136ecbc7b
下面我主要說的是在android studio 上的使用方法(eclipse需要自行提取aar的文件搭建項目)。
一、導入Lottie庫。
dependencies {
//目前最新版是2.8.0
implementation 'com.airbnb.android:lottie:2.5.5'
}
二、添加Lottie組件。
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:lottie_autoPlay="true"
app:lottie_fileName="anim/done.json"
app:lottie_imageAssetsFolder="anim/images"
app:lottie_scale="0.3"
/>
字段 | 作用 |
---|---|
lottie_autoPlay | 是否自動播放 |
lottie_fileName json | 文件路徑(assets) |
lottie_imageAssetsFolder | 圖片資源路徑(如果有圖片資源,則必須要填,否則會崩潰) |
lottie_scale | 動畫居中縮放 |
lottie_progress | 播放進度 |
lottie_repeatCount | 循環次數 -1無限循環 0不循環 |
lottie_repeatMode | 循環模式 |
這些屬性也是可以在代碼裏面設置的
animationView.setImageAssetsFolder(“anim/images”);
animationView.setAnimation(“anim/chest.json”);
animationView.playAnimation();
三、高級用法
我在使用的過程中發現了這個組件的一些bug,那就是,當你的應用中用到了大量的AsyncTask,會導致動畫播放不出來,因爲我也不敢想象,它會用AsyncTask來作爲異步線程,而總所周知,AsyncTask是會無腦阻塞的。看他源碼。
public void setAnimation(final String animationName, final CacheStrategy cacheStrategy) {
...
compositionLoader = LottieComposition.Factory.fromAssetFileName(getContext(), animationName,
new OnCompositionLoadedListener() {
@Override public void onCompositionLoaded(LottieComposition composition) {
if (cacheStrategy == CacheStrategy.Strong) {
ASSET_STRONG_REF_CACHE.put(animationName, composition);
} else if (cacheStrategy == CacheStrategy.Weak) {
ASSET_WEAK_REF_CACHE.put(animationName, new WeakReference<>(composition));
}
setComposition(composition);
}
});
}
public static Cancellable fromAssetFileName(
Context context, String fileName, OnCompositionLoadedListener listener) {
InputStream stream;
try {
stream = context.getAssets().open(fileName);
} catch (IOException e) {
throw new IllegalArgumentException("Unable to find file " + fileName, e);
}
return fromInputStream(stream, listener);
}
public static Cancellable fromInputStream(
InputStream stream, OnCompositionLoadedListener listener) {
return fromJsonReader(new JsonReader(new InputStreamReader(stream)), listener);
}
public static Cancellable fromJsonReader(
JsonReader reader, OnCompositionLoadedListener listener) {
AsyncCompositionLoader loader = new AsyncCompositionLoader(listener);
loader.executeOnExecutor(AsyncTask.THREAD_POOL_EXECUTOR, reader);
return loader;
}
public final class AsyncCompositionLoader
extends AsyncTask<JsonReader, Void, LottieComposition> implements Cancellable {}
看,這裏的AsyncCompositionLoader其實就是繼承AsyncTask的,而 loader.executeOnExecutor(AsyncTask.THREAD_POOL_EXECUTOR, reader);是有線程數量限制的,好像是5個。而同樣的,現在很多廣告SDK都是無腦地使用了AsyncTask,導致很容易形成大塞車的情景。
解決方法
使用以下代碼代替setAnimation,同時,fromFileSync可以放到自己的線程裏面,但setComposition和playAnimation需要放到UI線程裏面。當然,如果是小json文件,直接全部放在UI線程裏面也行。
LottieComposition lottieComposition = LottieComposition.Factory.fromFileSync(context,"anim/done.json");
if(lottieComposition!=null)
{
lottieAnimationView.setComposition(lottieComposition);
lottieAnimationView.playAnimation();
}
四、需要注意
1、資源是要放在assets中的
我這裏的目錄結構爲:
json文件: assets/anim/done.json
圖片資源: assets/anim/images/image_0.png
2、assets區分大小寫,哪怕是後綴名
3、圖片資源文件名必須要和json文件裏面的相應圖片資源文件名相同。
我們來看一下json動畫文件的基本格式。
{"v":"4.7.1","fr":25,...,"assets":[{"id":"image_0","w":100,"h":100,"u":"images/","p":"image_0.png"}]
重點,“p”:“image_0.png”。圖片資源的文件名必須要和這裏面的名稱相同。因爲AE生成的json動畫會將圖片資源默認命名爲img_0.png,img_1.png等等。而美工可能給你的圖片是經過她改名稱的,這時就需要自己改變其中的名稱了。
如果需要對動畫進行定位和縮放,這裏還有一篇文章做了介紹。