Android共享元素动画效果（非官方实现）

仿照Appstore 效果写的 主要涉及到圆角到直角的变化。

先看效果
视频Demo

1532329987813_video.gif

实现步骤

1.将详情页设为透明的

这个相信大家都知道 在主题里设置 android:windowIsTranslucent
下面是我的设置还需要将动画关闭

    <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 共享动画"
        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 共享动画"
                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.启动详情页时传入参数

        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.详情页执行动画

var anim: Animator? = null
//父类中重写onWindowFocusChanged 当window第一次获取焦点时执行
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)
}

项目Demo地址 Coding
项目Demo地址 Github