高仿京東到家APP引導頁炫酷動畫效果

南極冰川雪發表於2021-03-29
APP動畫

前言

京東到家APP的引導頁做的可圈可點，插畫+動效，簡明生動地說明了APP最吸引使用者的幾個亮點(商品多，價格低，配送快...)。本文主要分析拆解這些動畫效果，並完成一個高仿Demo，完整的Demo程式碼可在文章結尾獲取。

先看一下京東到家APP引導頁動畫效果，如下：

京東到家APP引導頁

功能分析

分析結果基於對APP進行反編譯和我個人的理解（不然還能怎麼辦呢？我太難了，哈哈哈）

  • 淺淺的背景圖+四個引導頁面，每一個頁面動畫播放完成後自動滑動到下一個頁面。實現：用ViewPager+4個View實現，每一個頁面對應一個View，一個View包含一個LottieAnimationView，在頁面中監聽Lottie動畫的播放，播放完成後自動切換到下一個頁面，ViewPager使用的是Alibaba開源的UltraViewPager
背景圖片 引導圖1 引導圖2 引導圖3 引導圖4
background.png 1.png 2.png 3.png 4.png
  • 頁面滑動切換時有一個旋轉動畫效果，可自定義ViewPager中的PageTransformer介面實現此效果，Title有透明度漸變效果，用屬性動畫ObjectAnimator實現

switch.gif

  • 當滑動到最後一個頁面時，出現一個帶有“立即體驗”文字的按鈕，出現時從底部向上彈出並且透明度從0到1變化，當從最後一個頁面向前滑動時，按鈕從底部消失並且透明度從1到0變化，即位移+透明度變化動畫，使用屬性動畫ObjectAnimator可以實現此效果

last.webp

佈局分析

使用uiautomatorviewer檢視layout佈局檔案，如下所示：

layout.webp

  • 根佈局為ConstraintLayout，子節點為ViewPager，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>
  • 引導頁總共有四個頁面，每一個頁面中LottieAnimationView對應一個Lottie檔案，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時會用到，用於確定最大旋轉角度
  • totalPageNum --引導頁的數量
  • lottieBgName --背景圖片對應的Lottie檔名
  • pageAnimTime --ViewPager各個頁面之間切換的滑動時間
  • buttonAnimTime --最後一個頁面"立即體驗"按鈕做位移和透明度動畫的時長
  • lottieTitle --每個引導頁標題對應的Lottie檔名
  • lottieMain -- 每個引導頁內容對應的Lottie檔名

程式碼實現

基於以上分析，用程式碼實現就比較簡單了，此處貼出部分實現程式碼

  • 載入本地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對應的程式碼為：

    /**
     * Drawable轉換成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 時，旋轉到最大角度，旋轉中心為右下角；
    • -1 < position < 0 時，position 越靠近 0 ，旋轉角度越小，旋轉中心向下邊緣中心靠攏；
    • 0 <= position <= 1 時，position 越靠近 0 ，旋轉角度越小，旋轉中心向下邊緣中心靠攏；
    • position > 1 時，旋轉到最大角度，旋轉中心為左下角。

程式碼如下所示：

import android.content.Context
import android.view.View
import androidx.viewpager.widget.ViewPager
import com.kongpf.commonhelper.ScreenHelper
import kotlin.math.atan2

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
        }

        when {
            position < -1.0f -> {
                page.rotation = -1.0f * mMaxRotate
                page.pivotX = page.width.toFloat()
                page.pivotY = page.height.toFloat()
            }
            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
                } else {
                    page.pivotX = 0.5f * page.width * (1.0f - position)
                    page.pivotY = page.height.toFloat()
                    page.rotation = position * mMaxRotate
                }
            }
            else -> {
                page.rotation = mMaxRotate
                page.pivotX = 0f
                page.pivotY = page.height.toFloat()
            }
        }
    }
}

完整程式碼地址

https://github.com/kongpf8848/Animation

相關文章