前言
動(dòng)畫是我們?nèi)粘ｉ_發(fā)中必不可少的一個(gè)要點(diǎn)，比如某個(gè)場(chǎng)景要實(shí)現(xiàn)打勾的效果，一開始你的設(shè)想可能是這樣子的：
?
用代碼實(shí)現(xiàn)起來可能還好，繪制圓圈，一段圓弧圓周運(yùn)動(dòng)，繪制一個(gè)打勾路徑，結(jié)合動(dòng)畫實(shí)現(xiàn)，美滋滋。但是等到設(shè)計(jì)師出圖的那一天，是這樣的：
看了效果圖，內(nèi)心有一句話不知道當(dāng)不當(dāng)講
?
但是不要慌，你能不能想到竟然有這么一個(gè)庫，可以讓設(shè)計(jì)師"幫你實(shí)現(xiàn)動(dòng)畫效果"！沒錯(cuò)，它就是今天的主角——Lottie。Lottie 是Airbnb開源的一個(gè)面向 iOS、Android、React Native 的動(dòng)畫庫，能解析 Adobe After Effects 視頻制作軟件導(dǎo)出的動(dòng)畫，并且在代碼中能通過api直接調(diào)用這些生成的動(dòng)畫文件，完美實(shí)現(xiàn)動(dòng)畫效果，Lottie在這種時(shí)候就是救世主級(jí)別的存在了。
Lottie官網(wǎng)：https://lottiefiles.com/
?
如何使用
看了效果，我們看下如何在Android中快速使用這個(gè)庫實(shí)現(xiàn)各種炫酷動(dòng)畫。
1.導(dǎo)入Lottie庫
在app的gradle中導(dǎo)入如下依賴：
dependencies {
compile 'com.airbnb.android:lottie:2.2.0'
}
- 最新版本可查看GitHub地址：https://github.com/airbnb/lottie-android
注意：Lottie只支持Api16以上，如果項(xiàng)目中minSdkVersion小于16會(huì)報(bào)錯(cuò)。
?
2.導(dǎo)入動(dòng)畫文件
Lottie加載動(dòng)畫是靠解析Json文件來實(shí)現(xiàn)的，所以需要設(shè)計(jì)師從After Effect等軟件中制作好動(dòng)畫并生成一個(gè)Json文件，文件的內(nèi)容大概是下面這個(gè)樣子：
盡管看起來很復(fù)雜，但這都是通過軟件生成的，我們只需要將其導(dǎo)入到項(xiàng)目中即可。由于Lottie默認(rèn)是讀取工程的Assets目錄，所以我們將Json文件放到src/main/assets目錄下。
?
3.使用姿勢(shì)
1）靜態(tài)方式
Lottie庫提供了一個(gè)LottieAnimationView控件，它本質(zhì)是一個(gè)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"/>
這里列舉了有幾個(gè)lottie的基本屬性
- lottie_fileName 調(diào)用的Json文件名
- lottie_loop 是否開啟循環(huán)動(dòng)畫
- lottie_autoPlay 是否開啟自動(dòng)播放
當(dāng)然lottie還有很多其他的屬性，例如：
- lottie_repeatCount 動(dòng)畫重復(fù)次數(shù)
- lottie_repeatMode 動(dòng)畫重復(fù)模式
- lottie_scale 放大倍數(shù)
這里就不一一列舉了，運(yùn)行后效果如下：
?
2）動(dòng)態(tài)方式
Lottie也支持在代碼中動(dòng)態(tài)調(diào)用接口：
LottieAnimationView lottieAnimationView = findViewById(R.id.anim_view);
lottieAnimationView.setAnimation("anim.json");
lottieAnimationView.loop(true);
lottieAnimationView.playAnimation();
?
3）監(jiān)聽動(dòng)畫進(jìn)度
Lottie同樣提供了監(jiān)聽動(dòng)畫的接口，而且還是我們熟悉的ValueAnimator
lottieAnimationView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
// 判斷動(dòng)畫加載結(jié)束
Log.d("Lottie", "" + valueAnimator.getAnimatedFraction());
}
});
?
4）加載動(dòng)畫優(yōu)化
Lottie的性能比屬性動(dòng)畫略遜一籌，不過支持開啟硬件加速：
lottieAnimationView.useHardwareAcceleration(true);
Lottie支持對(duì)動(dòng)畫的緩存，會(huì)在動(dòng)畫加載完成后將其緩存為強(qiáng)緩存和弱緩存
lottieAnimationView.setAnimation("anim.json", LottieAnimationView.CacheStrategy.Strong); //強(qiáng)緩存
lottieAnimationView.setAnimation("anim.json", LottieAnimationView.CacheStrategy.Weak); //弱緩存
其內(nèi)部是維護(hù)了兩個(gè)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()這個(gè)方法看下Lottie的動(dòng)畫流程：
public void playAnimation() {
lottieDrawable.playAnimation();
enableOrDisableHardwareLayer();
}
這里調(diào)用了一個(gè)lottieDrawable的playAnimation()，而lottieDrawable是一個(gè)LottieDrawable：
LottieDrawable繼承于Drawable，Lottie的動(dòng)畫都是在這個(gè)LottieDrawable里繪制的，它里面維護(hù)了一個(gè)LottieValueAnimator(繼承于ValueAnimator)，我們調(diào)用的loop或者playAnimation之類的方法其實(shí)本質(zhì)上都是調(diào)用了它里面這個(gè)屬性動(dòng)畫的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);
}
}
那么它是怎么通過這個(gè)屬性動(dòng)畫去實(shí)現(xiàn)繪制的呢？在LottieDrawable的構(gòu)造方法里，設(shè)置了屬性動(dòng)畫的監(jiān)聽器，然后將進(jì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);
}
}
可以看到動(dòng)畫過程中會(huì)不斷觸發(fā)setProgress，setProgress中調(diào)用了CompositionLayer的setProgress，然后再通過CompositionLayer把進(jìn)度傳遞到各個(gè)圖層：
@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);
}
}
各個(gè)圖層收到通知之后，再處理后回調(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收到這些圖層的通知就會(huì)調(diào)用invalidateDrawable來不斷刷新自己：
@Override
public void invalidateSelf() {
final Callback callback = getCallback();
if (callback != null) {
callback.invalidateDrawable(this);
}
}
以上是Lottie動(dòng)畫繪制的邏輯，時(shí)序圖如下：
那么Lottie是怎么將這些Json數(shù)據(jù)跟動(dòng)畫關(guān)聯(lián)起來的呢？After Effect制作動(dòng)畫的原理是將動(dòng)畫分為很多個(gè)圖層，且每個(gè)圖層有各自的細(xì)節(jié)動(dòng)畫，這樣疊加合成最終的效果。那么Lottie也是同理，分為很多個(gè)圖層(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, //動(dòng)畫寬度
"h": 100, //動(dòng)畫高度
"ddd": 0,
"assets": [...] //資源信息
"layers": [...] //圖層信息
}
Lottie會(huì)通過Json里的數(shù)據(jù)，解析出動(dòng)畫需要的關(guān)鍵幀信息，并且還有各個(gè)圖層的動(dòng)畫數(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)換為L(zhǎng)ottieComposition對(duì)象，那么看下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其實(shí)就相當(dāng)于Json和我們動(dòng)畫屬性的一個(gè)轉(zhuǎn)換器，將我們的Json數(shù)據(jù)解析成我們需要的內(nèi)存數(shù)據(jù)，然后根據(jù)數(shù)據(jù)創(chuàng)建出一個(gè)或多個(gè)圖層，再結(jié)合我們剛才分析的屬性動(dòng)畫，實(shí)現(xiàn)最終各種酷炫的效果。
?
總結(jié)
Lottie是一個(gè)強(qiáng)大的動(dòng)畫庫，許多代碼實(shí)現(xiàn)比較復(fù)雜或者難以實(shí)現(xiàn)的動(dòng)畫，通過Lottie都能輕易實(shí)現(xiàn)，開發(fā)效率大大提高，并且后期萬一要更換動(dòng)畫，同樣十分方便。又或者可以將動(dòng)畫Json通過網(wǎng)絡(luò)下發(fā)，實(shí)現(xiàn)動(dòng)態(tài)更換客戶端的動(dòng)畫效果。
參考
?
GitHub：GitHub-ZJYWidget
CSDN博客：IT_ZJYANG
簡(jiǎn) 書：Android小Y
在 GitHub 上建了一個(gè)集合炫酷自定義View的項(xiàng)目，里面有很多實(shí)用的自定義View源碼及demo，會(huì)長(zhǎng)期維護(hù)，歡迎Star~ 如有不足之處或建議還望指正，相互學(xué)習(xí)，相互進(jìn)步，如果覺得不錯(cuò)動(dòng)動(dòng)小手給個(gè)Star， 謝謝~
