京東到家APP的引導(dǎo)頁(yè)做的可圈可點(diǎn)，插畫(huà)+動(dòng)效，簡(jiǎn)明生動(dòng)地說(shuō)明了APP最吸引用戶的幾個(gè)亮點(diǎn)(商品多，價(jià)格低，配送快...)。本文主要分析拆解這些動(dòng)畫(huà)效果，并完成一個(gè)高仿Demo，完整的代碼可在文章結(jié)尾獲取。

功能分析

分析結(jié)果基于對(duì)APP進(jìn)行反編譯和我個(gè)人的理解

1、淺淺的背景圖+四個(gè)引導(dǎo)頁(yè)面，每一個(gè)頁(yè)面動(dòng)畫(huà)播放完成后自動(dòng)滑動(dòng)到下一個(gè)頁(yè)面。

實(shí)現(xiàn)：用ViewPager+4個(gè)View實(shí)現(xiàn)，每一個(gè)頁(yè)面對(duì)應(yīng)一個(gè)View，一個(gè)View包含一個(gè)LottieAnimationView，在頁(yè)面中監(jiān)聽(tīng)Lottie動(dòng)畫(huà)的播放，播放完成后自動(dòng)切換到下一個(gè)頁(yè)面，ViewPager使用的是Alibaba開(kāi)源的UltraViewPager：

(https://github.com/alibaba/UltraViewPager)

2、頁(yè)面滑動(dòng)切換時(shí)有一個(gè)動(dòng)畫(huà)效果，自定義ViewPager中的PageTransformer接口實(shí)現(xiàn)頁(yè)面切換旋轉(zhuǎn)動(dòng)畫(huà)效果，Title有透明度漸變效果，用屬性動(dòng)畫(huà)ObjectAnimator實(shí)現(xiàn)

3、當(dāng)滑動(dòng)到最后一個(gè)頁(yè)面時(shí)，出現(xiàn)一個(gè)帶有“立即體驗(yàn)”文本的按鈕，出現(xiàn)時(shí)從底部向上彈出并且透明度從0到1變化，當(dāng)從最后一個(gè)頁(yè)面向前滑動(dòng)時(shí)，按鈕從底部消失并且透明度從1到0變化，使用屬性動(dòng)畫(huà)ObjectAnimator實(shí)現(xiàn)位移+透明度變化動(dòng)畫(huà)

布局分析

使用uiautomatorviewer查看layout布局文件，如下：

根布局為ConstraintLayout，子節(jié)點(diǎn)為ViewPager，對(duì)應(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è)總共有四個(gè)頁(yè)面，每一個(gè)頁(yè)面對(duì)應(yīng)一個(gè)lottie文件，對(duì)應(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目錄下，配置文件為L(zhǎng)ottieConfig.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時(shí)會(huì)用到，用于確定最大旋轉(zhuǎn)角度
totalPageNum --引導(dǎo)頁(yè)的數(shù)量
lottieBgName --背景圖片對(duì)應(yīng)的Lottie文件名
pageAnimTime --ViewPager各個(gè)頁(yè)面之間切換的滑動(dòng)時(shí)間
buttonAnimTime --最后一個(gè)頁(yè)面"立即體驗(yàn)"按鈕做位移和透明度動(dòng)畫(huà)的時(shí)長(zhǎng)
lottieTitle --每個(gè)引導(dǎo)頁(yè)標(biāo)題對(duì)應(yīng)的Lottie文件名
lottieMain -- 每個(gè)引導(dǎo)頁(yè)內(nèi)容對(duì)應(yīng)的Lottie文件名

代碼實(shí)現(xiàn)

基于以上分析，用代碼實(shí)現(xiàn)就比較簡(jiǎn)單了，此處貼出部分實(shí)現(xiàn)代碼

加載本地lottie zip文件,lottie支持加載本地和遠(yuǎn)程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()        }    }

添加圓點(diǎn)指示符

        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對(duì)應(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 時(shí)，旋轉(zhuǎn)到最大角度，旋轉(zhuǎn)中心為右下角；
-1 < position < 0 時(shí)，position 越靠近 0 ，旋轉(zhuǎn)角度越小，旋轉(zhuǎn)中心向下邊緣中心靠攏；
0 <= position <= 1 時(shí)，position 越靠近 0 ，旋轉(zhuǎn)角度越小，旋轉(zhuǎn)中心向下邊緣中心靠攏；
position > 1 時(shí)，旋轉(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()    }
}

源碼地址：

https://github.com/kongpf8848/Animation

到這里就結(jié)束啦.

Android仿京東到家引導(dǎo)頁(yè)炫酷動(dòng)畫(huà)效果

功能分析

布局分析

資源分析

代碼實(shí)現(xiàn)