一、实现从一个activity切换到另一个activity后，Activity中的view顺滑过渡
效果如下：
页面转换动画.gif
1. 开启transition动画：在AppTheme中设置<item name="android:windowContentTransitions">true</item>
或者在Activity.onCreate()中的setContentView()之前设置getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
2. 设置activity切换时动画是同时执行还是先后执行：在AppTheme中设置:
<item name="android:windowAllowEnterTransitionOverlap">false</item>
<item name="android:windowAllowReturnTransitionOverlap">false</item>
3. 在res目录下新建transition目录，新建transition动画文件
fade.xml:
<?xml version="1.0" encoding="utf-8"?>
<fade xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000">
</fade>
slide.xml:
<?xml version="1.0" encoding="utf-8"?>
<slide xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000">
</slide>
4. 在第1个Activity.onCreate()中初始化transition
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setupWindowTransition()
}
/**
* 1. 需要在theme中设置允许transition动画：
* <item name="android:windowContentTransitions">true</item> 或者
* window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
* 2. 设置相应的transition
* 3. 跳转activity时使用startActivity(intent,ActivityOptionsCompat.makeSceneTransitionAnimation(this).toBundle())
*/
fun setupWindowTransition() {
// 通过xml配置
// 渐变
val fade = TransitionInflater.from(this).inflateTransition(R.transition.fade)
// 平移
val slide = TransitionInflater.from(this).inflateTransition(R.transition.slide) as Slide
slide.slideEdge = Gravity.BOTTOM // 设置平移方向
// 通过代码构造
val explode = Explode() // 爆炸
explode.duration = 1000
/**
* 也可以在Theme中设置
* <item name="android:windowExitTransition">@transition/explode</item>
<item name="android:windowEnterAnimation">@transition/explode</item>
<item name="android:windowReenterTransition">@transition/explode</item>
*/
window.enterTransition = explode
window.exitTransition = slide // 退出时的动画
window.reenterTransition = explode
window.returnTransition = slide
}
5. 在另一个activity.onCreate中设置动画
fun setupWindowTransition() {
// 通过xml配置
// 渐变
val fade = TransitionInflater.from(this).inflateTransition(R.transition.fade)
// 平移
val slide = TransitionInflater.from(this).inflateTransition(R.transition.slide) as Slide
slide.slideEdge = Gravity.LEFT // 设置平移方向
// 通过代码构造
val explode = Explode() // 爆炸
explode.duration = 500
window.enterTransition = explode
window.exitTransition = slide // 退出时的动画
window.reenterTransition = explode
window.returnTransition = slide
}
6. 启动另外一个activity
这时不能用startActivity(intent) 只有一个参数这个了，要传输Scene参数才会有效
val intent = Intent(this, Main2Activity::class.java)
val param = ActivityOptionsCompat.makeSceneTransitionAnimation(this)
startActivity(intent, param.toBundle())
6. 在另外一个activity.onBackPressed()中调用finishAfterTransition()
共享元素动画sharedElementTransition
效果如下：
共享元素动画.gif
1. 在切换Activity时使用ActivityOptionsCompat生成共享元素scene
/**
* 通过共享动画切换到下一个页面
* @param v 被点击的item
*/
public void transitionToActivity(View v) {
/** 设置需要共享的View和sharedElementName(transitionName)
* makeSceneTransitionAnimation传入的sharedElementName必须和下一个
* 页面的共享元素的transitionName一致
*/
View img = v.findViewById(R.id.iv_circle);
ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(mActivity, img, "circle_image");
mActivity.startActivity(new Intent(mActivity, Main3Activity.class), options.toBundle());
}
2. 在另外界面的需要共享动画的View上设置transitonName
android:transitionName="circle_image"
3. 设置元素进入动画
fun setupWindowSharedElementTransition() {
/**
* changeBounds:改变目标视图的布局边界。
changeClipBounds:裁剪目标视图边界。
changeTransform:改变目标的缩放比例和旋转角度。
changeImageTransform:改变目标图片的大小和缩放比例。
overlay
*/
window.sharedElementEnterTransition = ChangeBounds()
}
4. 或者使用xml配置
4.1 在res->transition目录下新建xml文件：
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<!-- changeBounds is used for the TextViews which are shared -->
<changeBounds />
<!-- changeImageTransform is used for the ImageViews which are shared -->
<changeImageTransform />
</transitionSet>
4.2 在styles.xml中的Theme中使用xml：
<item name="android:windowSharedElementEnterTransition">
@transition/grid_detail_transition
</item>
<item name="android:windowSharedElementExitTransition">
@transition/grid_detail_transition
</item>
