Android界面元素动画,安卓Activity切换炫酷动画之Transition

参考安卓官方指南及示例

一、实现从一个activity切换到另一个activity后，Activity中的view顺滑过渡

效果如下：

页面转换动画.gif

1. 开启transition动画：在AppTheme中设置true

或者者在Activity.onCreate()中的setContentView()之前设置getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)

2. 设置activity切换时动画是同时执行还是先后执行：在AppTheme中设置:falsefalse

3. 在res目录下新建transition目录，新建transition动画文件fade.xml:<?xml version="1.0" encoding="utf-8"?>slide.xml:<?xml version="1.0" encoding="utf-8"?>

4. 在第1个Activity.onCreate()中初始化transitionoverride fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) setupWindowTransition() } /** * 1. 需要在theme中设置允许transition动画： * true 或者者 * 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中设置 * @transition/explode@transition/explode@transition/explode */ 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上设置transitonNameandroid:transitionName="circle_image"

3. 设置元素进入动画fun setupWindowSharedElementTransition() { /** * changeBounds:改变目标视图的布局边界。 changeClipBounds:裁剪目标视图边界。 changeTransform:改变目标的缩放比例和旋转角度。 changeImageTransform:改变目标图片的大小和缩放比例。 overlay */ window.sharedElementEnterTransition = ChangeBounds() }

4. 或者者使用xml配置

4.1 在res->transition目录下新建xml文件：

4.2 在styles.xml中的Theme中使用xml： @transition/grid_detail_transition @transition/grid_detail_transition

参考官方文章