仿照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)
}
