前言
動畫是我們?nèi)粘ｉ_發(fā)中必不可少的一個要點稻据，比如某個場景要實現(xiàn)打勾的效果欠雌，一開始你的設想可能是這樣子的：
?
用代碼實現(xiàn)起來可能還好，繪制圓圈，一段圓弧圓周運動搀菩，繪制一個打勾路徑，結(jié)合動畫實現(xiàn)破托，美滋滋肪跋。但是等到設計師出圖的那一天，是這樣的：
看了效果圖土砂，內(nèi)心有一句話不知道當不當講
?
但是不要慌州既，你能不能想到竟然有這么一個庫，可以讓設計師"幫你實現(xiàn)動畫效果"萝映！沒錯吴叶，它就是今天的主角——Lottie。Lottie 是Airbnb開源的一個面向 iOS序臂、Android蚌卤、React Native 的動畫庫，能解析 Adobe After Effects 視頻制作軟件導出的動畫奥秆，并且在代碼中能通過api直接調(diào)用這些生成的動畫文件逊彭，完美實現(xiàn)動畫效果，Lottie在這種時候就是救世主級別的存在了构订。
Lottie官網(wǎng)：https://lottiefiles.com/
?
如何使用
看了效果侮叮，我們看下如何在Android中快速使用這個庫實現(xiàn)各種炫酷動畫。
1.導入Lottie庫
在app的gradle中導入如下依賴：
dependencies {
compile 'com.airbnb.android:lottie:2.2.0'
}
- 最新版本可查看GitHub地址：https://github.com/airbnb/lottie-android
注意：Lottie只支持Api16以上悼瘾，如果項目中minSdkVersion小于16會報錯囊榜。
?
2.導入動畫文件
Lottie加載動畫是靠解析Json文件來實現(xiàn)的，所以需要設計師從After Effect等軟件中制作好動畫并生成一個Json文件亥宿，文件的內(nèi)容大概是下面這個樣子：
盡管看起來很復雜卸勺，但這都是通過軟件生成的，我們只需要將其導入到項目中即可箩绍。由于Lottie默認是讀取工程的Assets目錄孔庭，所以我們將Json文件放到src/main/assets目錄下尺上。
?
3.使用姿勢
1）靜態(tài)方式
Lottie庫提供了一個LottieAnimationView控件材蛛，它本質(zhì)是一個ImageView圆到，可直接在布局文件中聲明：
<com.airbnb.lottie.LottieAnimationView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_fileName="anim.json"
app:lottie_loop="true"
app:lottie_autoPlay="true"/>
這里列舉了有幾個lottie的基本屬性
- lottie_fileName 調(diào)用的Json文件名
- lottie_loop 是否開啟循環(huán)動畫
- lottie_autoPlay 是否開啟自動播放
當然lottie還有很多其他的屬性，例如：
- lottie_repeatCount 動畫重復次數(shù)
- lottie_repeatMode 動畫重復模式
- lottie_scale 放大倍數(shù)
這里就不一一列舉了卑吭，運行后效果如下：
?
2）動態(tài)方式
Lottie也支持在代碼中動態(tài)調(diào)用接口：
LottieAnimationView lottieAnimationView = findViewById(R.id.anim_view);
lottieAnimationView.setAnimation("anim.json");
lottieAnimationView.loop(true);
lottieAnimationView.playAnimation();
?
3）監(jiān)聽動畫進度
Lottie同樣提供了監(jiān)聽動畫的接口芽淡，而且還是我們熟悉的ValueAnimator
lottieAnimationView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
// 判斷動畫加載結(jié)束
Log.d("Lottie", "" + valueAnimator.getAnimatedFraction());
}
});
?
4）加載動畫優(yōu)化
Lottie的性能比屬性動畫略遜一籌，不過支持開啟硬件加速：
lottieAnimationView.useHardwareAcceleration(true);
Lottie支持對動畫的緩存豆赏，會在動畫加載完成后將其緩存為強緩存和弱緩存
lottieAnimationView.setAnimation("anim.json", LottieAnimationView.CacheStrategy.Strong); //強緩存
lottieAnimationView.setAnimation("anim.json", LottieAnimationView.CacheStrategy.Weak); //弱緩存
其內(nèi)部是維護了兩個HashMap：
private static final Map<String, LottieComposition> STRONG_REF_CACHE = new HashMap<>();
private static final Map<String, WeakReference<LottieComposition>> WEAK_REF_CACHE =
new HashMap<>();
public void setAnimation(final String animationName, final CacheStrategy cacheStrategy) {
//......
if (cacheStrategy == CacheStrategy.Strong) {
STRONG_REF_CACHE.put(animationName, composition);
} else if (cacheStrategy == CacheStrategy.Weak) {
WEAK_REF_CACHE.put(animationName, new WeakReference<>(composition));
}
//.....
}
?
原理解析
我們從LottieAnimationView的playAnimation()這個方法看下Lottie的動畫流程：
public void playAnimation() {
lottieDrawable.playAnimation();
enableOrDisableHardwareLayer();
}
這里調(diào)用了一個lottieDrawable的playAnimation()挣菲，而lottieDrawable是一個LottieDrawable：
LottieDrawable繼承于Drawable，Lottie的動畫都是在這個LottieDrawable里繪制的掷邦，它里面維護了一個LottieValueAnimator(繼承于ValueAnimator)白胀，我們調(diào)用的loop或者playAnimation之類的方法其實本質(zhì)上都是調(diào)用了它里面這個屬性動畫的Api：
public void loop(boolean loop) {
animator.setRepeatCount(loop ? ValueAnimator.INFINITE : 0);
}
private void playAnimation(boolean setStartTime) {
if (compositionLayer == null) {
lazyCompositionTasks.add(new LazyCompositionTask() {
@Override public void run(LottieComposition composition) {
playAnimation();
}
});
return;
}
long playTime = setStartTime ? (long) (progress * animator.getDuration()) : 0;
animator.start();
if (setStartTime) {
animator.setCurrentPlayTime(playTime);
}
}
那么它是怎么通過這個屬性動畫去實現(xiàn)繪制的呢？在LottieDrawable的構(gòu)造方法里抚岗，設置了屬性動畫的監(jiān)聽器或杠，然后將進度傳給setProgress：
public LottieDrawable() {
animator.setRepeatCount(0);
animator.setInterpolator(new LinearInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override public void onAnimationUpdate(ValueAnimator animation) {
if (systemAnimationsAreDisabled) {
animator.cancel();
setProgress(1f);
} else {
setProgress((float) animation.getAnimatedValue());
}
}
});
}
public void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
this.progress = progress;
if (compositionLayer != null) {
compositionLayer.setProgress(progress);
}
}
可以看到動畫過程中會不斷觸發(fā)setProgress，setProgress中調(diào)用了CompositionLayer的setProgress宣蔚，然后再通過CompositionLayer把進度傳遞到各個圖層：
@Override
public void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
super.setProgress(progress);
if (timeRemapping != null) {
long duration = lottieDrawable.getComposition().getDuration();
long remappedTime = (long) (timeRemapping.getValue() * 1000);
progress = remappedTime / (float) duration;
}
if (layerModel.getTimeStretch() != 0) {
progress /= layerModel.getTimeStretch();
}
progress -= layerModel.getStartProgress();
for (int i = layers.size() - 1; i >= 0; i--) {
layers.get(i).setProgress(progress);
}
}
各個圖層收到通知之后向抢，再處理后回調(diào)給LottieDrawable：
void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
if (progress < getStartDelayProgress()) {
progress = 0f;
} else if (progress > getEndProgress()) {
progress = 1f;
}
if (progress == this.progress) {
return;
}
this.progress = progress;
for (int i = 0; i < listeners.size(); i++) {
listeners.get(i).onValueChanged();
}
}
@Override
public void onValueChanged() {
invalidateSelf();
}
private void invalidateSelf() {
lottieDrawable.invalidateSelf();
}
LottieDrawable收到這些圖層的通知就會調(diào)用invalidateDrawable來不斷刷新自己：
@Override
public void invalidateSelf() {
final Callback callback = getCallback();
if (callback != null) {
callback.invalidateDrawable(this);
}
}
以上是Lottie動畫繪制的邏輯，時序圖如下：
那么Lottie是怎么將這些Json數(shù)據(jù)跟動畫關(guān)聯(lián)起來的呢胚委？After Effect制作動畫的原理是將動畫分為很多個圖層挟鸠，且每個圖層有各自的細節(jié)動畫，這樣疊加合成最終的效果亩冬。那么Lottie也是同理艘希，分為很多個圖層(Layer)，我們看下Json的外層結(jié)構(gòu)如下：
{
"v": "4.6.0", //bodymovin的版本
"fr": 24.291553280921, //幀率
"ip": 0, //起始關(guān)鍵幀
"op": 84.0029442951, //結(jié)束關(guān)鍵幀
"w": 100, //動畫寬度
"h": 100, //動畫高度
"ddd": 0,
"assets": [...] //資源信息
"layers": [...] //圖層信息
}
Lottie會通過Json里的數(shù)據(jù)鉴未，解析出動畫需要的關(guān)鍵幀信息枢冤，并且還有各個圖層的動畫數(shù)據(jù)，我們依舊是由表及里铜秆，從LottieAnimationView的setAnimation()開始看：
public void setAnimation(String animationName) {
setAnimation(animationName, defaultCacheStrategy);
}
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) {
STRONG_REF_CACHE.put(animationName, composition);
} else if (cacheStrategy == CacheStrategy.Weak) {
WEAK_REF_CACHE.put(animationName, new WeakReference<>(composition));
}
setComposition(composition);
}
});
}
通過工廠模式從LottieComposition的Factory里讀取我們Asset中的Json文件淹真，并且將其轉(zhuǎn)換為LottieComposition對象，那么看下LottieComposition:
static LottieComposition fromJsonSync(Resources res, JSONObject json) {
Rect bounds = null;
float scale = res.getDisplayMetrics().density;
int width = json.optInt("w", -1);
int height = json.optInt("h", -1);
if (width != -1 && height != -1) {
int scaledWidth = (int) (width * scale);
int scaledHeight = (int) (height * scale);
bounds = new Rect(0, 0, scaledWidth, scaledHeight);
}
long startFrame = json.optLong("ip", 0);
long endFrame = json.optLong("op", 0);
float frameRate = (float) json.optDouble("fr", 0);
String version = json.optString("v");
String[] versions = version.split("[.]");
int major = Integer.parseInt(versions[0]);
int minor = Integer.parseInt(versions[1]);
int patch = Integer.parseInt(versions[2]);
LottieComposition composition = new LottieComposition(
bounds, startFrame, endFrame, frameRate, scale, major, minor, patch);
JSONArray assetsJson = json.optJSONArray("assets");
parseImages(assetsJson, composition);
parsePrecomps(assetsJson, composition);
parseFonts(json.optJSONObject("fonts"), composition);
parseChars(json.optJSONArray("chars"), composition);
parseLayers(json, composition);
return composition;
}
LottieComposition其實就相當于Json和我們動畫屬性的一個轉(zhuǎn)換器连茧，將我們的Json數(shù)據(jù)解析成我們需要的內(nèi)存數(shù)據(jù)核蘸，然后根據(jù)數(shù)據(jù)創(chuàng)建出一個或多個圖層，再結(jié)合我們剛才分析的屬性動畫啸驯，實現(xiàn)最終各種酷炫的效果客扎。
?
總結(jié)
Lottie是一個強大的動畫庫，許多代碼實現(xiàn)比較復雜或者難以實現(xiàn)的動畫罚斗，通過Lottie都能輕易實現(xiàn)徙鱼，開發(fā)效率大大提高，并且后期萬一要更換動畫，同樣十分方便袱吆。又或者可以將動畫Json通過網(wǎng)絡下發(fā)厌衙，實現(xiàn)動態(tài)更換客戶端的動畫效果。
參考
?
GitHub：GitHub-ZJYWidget
CSDN博客：IT_ZJYANG
簡 書：Android小Y
在 GitHub 上建了一個集合炫酷自定義View的項目婶希，里面有很多實用的自定義View源碼及demo，會長期維護蓬衡，歡迎Star~ 如有不足之處或建議還望指正喻杈，相互學習，相互進步狰晚，如果覺得不錯動動小手給個Star筒饰， 謝謝~
