Android应用开发那些事Android动画篇Android开发知识小集

安卓Activity切换炫酷动画之Transition

2019-04-25  本文已影响102人  Richile

参考安卓官方指南示例

一、实现从一个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>

参考官方文章

上一篇下一篇

猜你喜欢

热点阅读