最近閑來(lái)無(wú)事埃疫，看到別的App有不少炫酷的動(dòng)畫(huà)伏恐，特地逆向研究了一番，大致看到兩類栓霜，一種是lottie開(kāi)發(fā)的翠桦，一種是SVGA實(shí)現(xiàn)的。
大致效果如下：
這兩種動(dòng)畫(huà)實(shí)現(xiàn)極大的簡(jiǎn)化開(kāi)發(fā)人員的工作量胳蛮，但是需要有一個(gè)好的設(shè)計(jì)師销凑，至少會(huì)入門(mén)AE AI AN 。
在使用場(chǎng)景方面lottie主要是一些加載動(dòng)畫(huà)仅炊，引導(dǎo)頁(yè)動(dòng)畫(huà)底部icon切換動(dòng)畫(huà)等一些輕量級(jí)動(dòng)畫(huà)斗幼，而svga主要是一些主播中的打賞動(dòng)畫(huà)，就像官方放出的送一個(gè)飛機(jī)火箭等執(zhí)行的一些動(dòng)畫(huà)抚垄。
功能性方面?zhèn)€人比較推薦lottie蜕窿，一方面是他的設(shè)計(jì)種類多，他的lottie動(dòng)畫(huà)網(wǎng)站有大量的開(kāi)放性設(shè)計(jì)提供使用呆馁，就算沒(méi)有設(shè)計(jì)師桐经，開(kāi)發(fā)者也可以下載一些上面提供的素材做一部分炫酷的動(dòng)畫(huà)，另一方面是他官方app可以對(duì)做出來(lái)的動(dòng)畫(huà)進(jìn)行調(diào)試浙滤，能對(duì)播放速度阴挣，動(dòng)畫(huà)大小，背景色及播放長(zhǎng)度進(jìn)行自定義纺腊，可擴(kuò)展性更高一級(jí)屯吊。
1、lottie的動(dòng)畫(huà)使用：
implementation 'com.airbnb.android:lottie:3.0.6'
新版lottie已經(jīng)適配了androidx摹菠，如果不想適配androidx的同學(xué)可以使用早一些的版本。
布局文件使用：
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottieAnimationView"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/appCompatImageView"
app:lottie_fileName="data.json"
app:lottie_loop="true"
app:lottie_autoPlay="true"
app:lottie_colorFilter="@color/colorAccent"
app:lottie_renderMode="automatic"
/>
| 屬性 | 作用 |
|---|---|
| app:lottie_fileName | 參數(shù)為動(dòng)畫(huà)資源骗爆，放在assets目錄下次氨，格式為json文件，導(dǎo)出json的AE格式后續(xù)會(huì)提到 |
| app:lottie_loop | 是否循環(huán)播放 |
| app:lottie_autoPlay | 是否自動(dòng)播放 |
| app:lottie_colorFilter | 設(shè)置顏色 |
| app:lottie_renderMode | 渲染模式 |
| app:lottie_speed | 設(shè)置播放速度 |
| app:lottie_url | 設(shè)置url |
渲染模式 主要分為以下三種
AUTOMATIC自動(dòng)模式
HARDWARE硬件加速模式
SOFTWARE軟件加速加速模式
也可以使用lottieAnimationView.setMinFrame與lottieAnimationView.setMaxFrame來(lái)設(shè)置動(dòng)畫(huà)執(zhí)行的最小與最大幀摘投，這樣可以實(shí)現(xiàn)引導(dǎo)頁(yè)的動(dòng)畫(huà)執(zhí)行順序與暫停等煮寡。
如果動(dòng)畫(huà)所在頁(yè)面滑動(dòng)不流暢，可以設(shè)置這三種模式中的一種來(lái)調(diào)試動(dòng)畫(huà)犀呼。我使用的SOFTWARE模式在絕大部分機(jī)型上都沒(méi)有卡頓現(xiàn)象幸撕，但使用HARDWARE模式，有一些復(fù)雜動(dòng)畫(huà)在執(zhí)行的時(shí)候會(huì)出現(xiàn)滑動(dòng)列表不流暢等性能問(wèn)題外臂。調(diào)試動(dòng)畫(huà)的幀率可以使用官方app查看坐儿。
代碼中可以設(shè)置動(dòng)畫(huà)監(jiān)聽(tīng)，在不同的動(dòng)畫(huà)狀態(tài)搞事：
lottieAnimationView.addAnimatorListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
如果想使用常駐動(dòng)畫(huà)，可以設(shè)置緩存強(qiáng)引用 animationView.setAnimation("data.json", LottieAnimationView.CacheStrategy.Strong);
其中CacheStrategy的值可以是Strong,Weak或者None,它們用來(lái)決定LottieAnimationView對(duì)已經(jīng)加載并轉(zhuǎn)換好的動(dòng)畫(huà)持有怎樣形式的引用(強(qiáng)引用/弱引用)貌矿。
有的同學(xué)也會(huì)看到別的app為何有json文件和圖片文件2種呢炭菌？json中還使用到了那種圖片，單獨(dú)設(shè)置lottie_fileName肯定是不行的逛漫，運(yùn)行會(huì)出問(wèn)題黑低，結(jié)構(gòu)目錄如下：
你需要添加app:lottie_imageAssetsFolder="images/"來(lái)給lottie設(shè)置文件夾，這樣動(dòng)畫(huà)就會(huì)找到資源圖片酌毡。
2克握、SVGA的動(dòng)畫(huà)使用：
工程gradle中添加
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
app的gradle中添加
compile 'com.github.yyued:SVGAPlayer-Android:2.4.4'
SVGAPlayer也可以從本地 assets 目錄，或者遠(yuǎn)端服務(wù)器上加載動(dòng)畫(huà)文件枷踏。
<com.opensource.svgaplayer.SVGAImageView
android:layout_height="match_parent"
android:layout_width="match_parent"
app:source="posche.svga"
app:autoPlay="true"
android:background="#000" />
| 屬性 | 作用 |
|---|---|
| source: String | 用于表示 svga 文件的路徑菩暗，提供一個(gè)在 assets 目錄下的文件名，或者提供一個(gè) http url 地址 |
| autoPlay: Boolean | 默認(rèn)為 true呕寝，當(dāng)動(dòng)畫(huà)加載完成后勋眯，自動(dòng)播放 |
| loopCount: Int | 默認(rèn)為 0，設(shè)置動(dòng)畫(huà)的循環(huán)次數(shù)下梢，0 表示無(wú)限循環(huán) |
| clearsAfterStop: Boolean | 默認(rèn)為 true客蹋，當(dāng)動(dòng)畫(huà)播放完成后，是否清空畫(huà)布 |
| fillMode: String | 默認(rèn)為 Forward孽江，可以是 Forward讶坯、 Backward。Forward 表示動(dòng)畫(huà)結(jié)束后岗屏，將停留在最后一幀Backward 表示動(dòng)畫(huà)結(jié)束后辆琅，將停留在第一幀。 |
緩存
SVGAParser 不會(huì)管理緩存这刷，你需要自行實(shí)現(xiàn)緩存器婉烟。
設(shè)置 HttpResponseCache
SVGAParser 依賴 URLConnection, URLConnection 使用 HttpResponseCache 處理緩存。
添加代碼至 Application.java:onCreate 以設(shè)置緩存暇屋。
val cacheDir = File(context.applicationContext.cacheDir, "http")
HttpResponseCache.install(cacheDir, 1024 * 1024 * 128)
想了解詳細(xì)的Api可查看官方的提供的https://github.com/yyued/SVGAPlayer-Android/wiki/APIs
最后附上我做的一個(gè)動(dòng)畫(huà)gif似袁，自然里面的資源都是來(lái)自網(wǎng)上或其他app的僅供學(xué)習(xí)研究：
以上開(kāi)發(fā)人員可以實(shí)現(xiàn)自己的炫酷動(dòng)畫(huà)了，自然如果需要一些引導(dǎo)頁(yè)的炫酷動(dòng)畫(huà)咐刨，只能求設(shè)計(jì)師做了昙衅，畢竟程序員本職工作還是寫(xiě)代碼。
