前言
京東到家APP的引導(dǎo)頁做的可圈可點源譬，插畫+動效千贯，簡明生動地說明了APP最吸引用戶的幾個亮點(商品多，價格低晌坤，配送快...)逢艘。本文主要分析拆解這些動畫效果旦袋，并完成一個高仿Demo，完整的代碼可在文章結(jié)尾獲取它改。
京東到家APP引導(dǎo)頁
功能分析
分析結(jié)果基于對APP進行反編譯和我個人的理解（不然還能怎么辦呢疤孕？我太難了，哈哈哈）
- 淺淺的背景圖+四個引導(dǎo)頁面央拖，每一個頁面動畫播放完成后自動滑動到下一個頁面祭阀。
實現(xiàn)：用ViewPager+4個View實現(xiàn)，每一個頁面對應(yīng)一個View鲜戒，一個View包含一個LottieAnimationView专控，在頁面中監(jiān)聽Lottie動畫的播放，播放完成后自動切換到下一個頁面遏餐，ViewPager使用的是Alibaba開源的UltraViewPager
| 背景圖片 | 引導(dǎo)圖1 | 引導(dǎo)圖2 | 引導(dǎo)圖3 | 引導(dǎo)圖4 |
|---|---|---|---|---|
 bg.png
|
 1.png
|
 2.png
|
 3.png
|
 4.png
|
-
頁面滑動切換時有一個動畫效果伦腐，自定義ViewPager中的PageTransformer接口實現(xiàn)頁面切換旋轉(zhuǎn)動畫效果，Title有透明度漸變效果失都，用屬性動畫ObjectAnimator實現(xiàn)
頁面之間切換效果 - 當(dāng)滑動到最后一個頁面時柏蘑，出現(xiàn)一個帶有“立即體驗”文本的按鈕，出現(xiàn)時從底部向上彈出并且透明度從0到1變化粹庞，當(dāng)從最后一個頁面向前滑動時咳焚，按鈕從底部消失并且透明度從1到0變化，使用屬性動畫ObjectAnimator實現(xiàn)位移+透明度變化動畫
布局分析
使用uiautomatorviewer查看layout布局文件庞溜，如下：
layout文件分析
- 根布局為ConstraintLayout革半，子節(jié)點為ViewPager，對應(yīng)的xml文件如下：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/white">
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<com.tmall.ultraviewpager.UltraViewPager
android:id="@+id/viewpager"
android:layout_width="0.0dip"
android:layout_height="0.0dip"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/ivJump"
android:layout_width="46.0dip"
android:layout_height="0.0dip"
android:layout_marginRight="20.0dip"
android:background="@drawable/pdj_guide_jump"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="63:28.5"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.07" />
<ImageView
android:id="@+id/iv_start"
android:layout_width="104.29999dip"
android:layout_height="30.669983dip"
android:background="@drawable/pdj_guide_button"
android:focusable="true"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
- 引導(dǎo)頁總共有四個頁面流码，每一個頁面對應(yīng)一個lottie文件又官，對應(yīng)的xml文件如下：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/pdj_guide_lottie_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
資源分析
- 資源文件放在了src/main/assets目錄下，配置文件為LottieConfig.json漫试，定義了各種屬性信息赏胚，如下：
{
"radius": 2020,
"totalPageNum": 4,
"lottieBgName": "guide_lottie_bg",
"pageAnimTime": 350,
"buttonAnimTime": 350,
"lottieTitle": [
{
"lottieName": "title_lottie_0"
},
{
"lottieName": "title_lottie_1"
},
{
"lottieName": "title_lottie_2"
},
{
"lottieName": "title_lottie_3"
}
],
"lottieMain": [
{
"lottieName": "main_lottie_0"
},
{
"lottieName": "main_lottie_1"
},
{
"lottieName": "main_lottie_2"
},
{
"lottieName": "main_lottie_3",
"repeatInterval": {
"start": 0.288,
"end": 1
}
}
]
}
- radius --定義PageTransformer時會用到，用于確定最大旋轉(zhuǎn)角度
- totalPageNum --引導(dǎo)頁的數(shù)量
- lottieBgName --背景圖片對應(yīng)的Lottie文件名
- pageAnimTime --ViewPager各個頁面之間切換的滑動時間
- buttonAnimTime --最后一個頁面"立即體驗"按鈕做位移和透明度動畫的時長
- lottieTitle --每個引導(dǎo)頁標(biāo)題對應(yīng)的Lottie文件名
- lottieMain -- 每個引導(dǎo)頁內(nèi)容對應(yīng)的Lottie文件名
代碼實現(xiàn)
基于以上分析商虐，用代碼實現(xiàn)就比較簡單了觉阅，此處貼出部分實現(xiàn)代碼
- 加載本地lottie zip文件,lottie支持加載本地和遠程json，zip文件秘车，通常我們將lottie文件放在src/main/assets目錄下
fun loadAssetsLottieZipFile(context: Context, lottieImageView:LottieAnimationView, fileName:String,repeatCount:Int= LottieDrawable.INFINITE,autoPlay:Boolean=true){
val lottieCompose= if(fileName.endsWith(".zip")){
LottieCompositionFactory.fromAssetSync(context, fileName).value
}
else{
LottieCompositionFactory.fromAssetSync(context, fileName.plus(".zip")).value
}
lottieImageView.progress=0.0f
lottieImageView.repeatCount=repeatCount
lottieImageView.setComposition(lottieCompose!!)
if(autoPlay){
lottieImageView.playAnimation()
}
}
- 添加圓點指示符
viewpager.initIndicator()
viewpager.indicator.setOrientation(UltraViewPager.Orientation.HORIZONTAL)
.setNormalIcon(drawableToBitmap(ContextCompat.getDrawable(applicationContext, R.drawable.guide_white_dot)!!))
.setFocusIcon(drawableToBitmap(ContextCompat.getDrawable(applicationContext, R.drawable.guide_dark_dot)!!))
.setIndicatorPadding(ScreenHelper.dp2px(applicationContext, 5.0F))
.setMargin(0, 0, 0, ScreenHelper.dp2px(applicationContext, 20.0F))
viewpager.indicator.setGravity(Gravity.BOTTOM or Gravity.CENTER_HORIZONTAL)
viewpager.indicator.build()
其中drawableToBitmap對應(yīng)的代碼為：
/**
* Drawable轉(zhuǎn)換成Bitmap
*/
private fun drawableToBitmap(drawable: Drawable): Bitmap {
val bitmap = Bitmap.createBitmap(drawable.intrinsicWidth, drawable.intrinsicHeight, Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)
drawable.setBounds(0, 0, drawable.intrinsicWidth, drawable.intrinsicHeight)
drawable.draw(canvas)
return bitmap
}
-
自定義PageTransformer
- position < -1 時典勇，旋轉(zhuǎn)到最大角度，旋轉(zhuǎn)中心為右下角叮趴；
- -1 < position < 0 時割笙，position 越靠近 0 ，旋轉(zhuǎn)角度越小，旋轉(zhuǎn)中心向下邊緣中心靠攏伤溉；
- 0 <= position <= 1 時般码，position 越靠近 0 ，旋轉(zhuǎn)角度越小乱顾，旋轉(zhuǎn)中心向下邊緣中心靠攏板祝；
- position > 1 時，旋轉(zhuǎn)到最大角度走净，旋轉(zhuǎn)中心為左下角券时。
代碼如下所示：
class GuideTransformer(context: Context, private val mRadius: Int) : ViewPager.PageTransformer {
private var mMaxRotate = 0f
init {
if (mRadius > 0) {
mMaxRotate = (2.0 * Math.toDegrees(atan2((ScreenHelper.getScreenWidth(context) / 2).toDouble(), mRadius.toDouble()))).toFloat()
}
}
override fun transformPage(page: View, position: Float) {
if (mRadius == 0) return
if (position < -1.0f) {
page.rotation = -1.0f * mMaxRotate
page.pivotX = page.width.toFloat()
page.pivotY = page.height.toFloat()
return
}
if (position <= 1.0f) {
if (position < 0.0f) {
page.pivotX = page.width * (0.5f + 0.5f * -position)
page.pivotY = page.height.toFloat()
page.rotation = position * mMaxRotate
return
}
page.pivotX = 0.5f * page.width * (1.0f - position)
page.pivotY = page.height.toFloat()
page.rotation = position * mMaxRotate
return
}
page.rotation = mMaxRotate
page.pivotX = 0f
page.pivotY = page.height.toFloat()
}
}
