仿照Appstore 效果寫的 主要涉及到圓角到直角的變化碳却。

先看效果
視頻Demo

1532329987813_video.gif

實(shí)現(xiàn)步驟

1.將詳情頁設(shè)為透明的

這個(gè)相信大家都知道 在主題里設(shè)置 android:windowIsTranslucent
下面是我的設(shè)置還需要將動(dòng)畫關(guān)閉

    <item name="android:windowBackground">@color/transparent</item>
    <item name="android:windowAnimationStyle">@null</item>
    <item name="android:windowIsTranslucent">true</item>

2.使用CSLayout

首先是item

<com.eericxu.cslibrary.CSLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="350dp"

    app:cs_clip="10dp"
    app:cs_corner="10dp"
    app:cs_shadow_color="#440000ff"
    app:cs_shadow_size="10dp">

    <ImageView
        android:id="@+id/iv_cover"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/img_4" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="30dp"
        android:text="CSLayout 共享動(dòng)畫"
        android:textColor="@color/colorWhite"
        android:textSize="20sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</com.eericxu.cslibrary.CSLayout>

其次是詳情頁

<com.eericxu.cslibrary.CSLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/csLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorWhite">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/tv_content"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:lineSpacingExtra="3sp"
                android:padding="20dp"
                android:text=""
                android:textColor="@color/colorBlack"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/iv_cover" />

            <ImageView
                android:id="@+id/iv_cover"
                android:layout_width="0dp"
                android:layout_height="240dp"
                android:scaleType="centerCrop"
                app:layout_optimizationLevel="barrier"
                android:src="@mipmap/img_2"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="30dp"
                android:text="CSLayout 共享動(dòng)畫"
                android:textColor="@color/colorWhite"
                android:textSize="26sp"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />


        </android.support.constraint.ConstraintLayout>

    </android.support.v4.widget.NestedScrollView>

</com.eericxu.cslibrary.CSLayout>

3.啟動(dòng)詳情頁時(shí)傳入?yún)?shù)

        clickView = csLayout
        val intent = Intent(ctx, CSAty::class.java).putExtra("img", res)
        ctx.startActivity(createIntentDef(intent, csLayout,
                "imgView" to ivCover as View,
                "tvTit" to tvTit as View
        ))

4.詳情頁執(zhí)行動(dòng)畫

var anim: Animator? = null
//父類中重寫onWindowFocusChanged 當(dāng)window第一次獲取焦點(diǎn)時(shí)執(zhí)行
override fun onFirstFocus() {
    val animator = createAnimator(true, intent, "imgView", iv_cover)
    (animator as ValueAnimator).addUpdateListener {
        tv_content.translationY = iv_cover.translationY * 0.6f
        tv_content.translationX = iv_cover.translationX
    }

    anim = startShareAnim(
            csLayout,
            createAnimator(true, intent, "tvTit", tv_title),
            animator
    )
}


override fun finish() {
    if (anim != null && anim?.isRunning == true)
        return
    val animator = createAnimator(false, intent, "imgView", iv_cover)
    (animator as ValueAnimator).addUpdateListener {
        tv_content.translationY = iv_cover.translationY * 0.6f
        tv_content.translationX = iv_cover.translationX
    }
    finishShareAnim(
            csLayout,
            createAnimator(false, intent, "tvTit", tv_title),
            animator,
            onAnimEnd = {
                superFinish()
            })
}

private fun superFinish() {
    super.finish()
    overridePendingTransition(0, R.anim.exit_fade)
}

項(xiàng)目Demo地址 Coding
項(xiàng)目Demo地址 Github