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

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

1532329987813_video.gif

实现步骤

1.将详情页设为透明的

这个相信大家都知道 在主题里设置 android:windowIsTranslucent

下面是我的设置还需要将动画关闭

@color/transparent

@null

true

2.使用CSLayout

首先是item

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">

android:id="@+id/iv_cover"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="centerCrop"

android:src="@mipmap/img_4" />

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" />

其次是详情页

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:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="wrap_content">

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" />

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" />

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" />

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)

}