Android UI——Material Design——Activity转场动画

96
So_ProbuING
2.1 2019.03.22 13:00 字数 725

在Material Design中有很多很炫的动画,这些动画在提升了与用户交互体验的同时,也增加了Android App的界面效果。现在的Android在Android M上,个人觉得在交互方面已经不输给任何的iphone。甚至在ios中,也有很多的效果在借鉴android。现在的开发中 广大的产品经理们可以不用以iphone的效果为基准了。

MD中的Activity的转场动画

要实现MD中的Activity的转场动画效果。我们可以使用ActivityOptions类。但是这个类只支持API21以上的版本。但是对于要兼容低版本的app中,我们需要进行版本的判断,版本判断就比较麻烦,但是贴心的谷歌为我们设计了一个兼容类:ActivityOptionsCompat 位于android.support.v4包中,但是这个类在低版本上面并没有转场效果。只是解决了我们手动去判断版本的问题而已。也就是说这个类可以实现的是在高版本上会有Activity的转场效果。而在低版本上没有。

别废话,开撸

Activity转场动画的使用

Activity转场动画就是在两个Activity进行跳转的时候执行的动画。
转场动画分为两大类:共享元素转换和普通转换
使用转换动画的前提:需要设置Activity允许使用转场动画
由于转场动画是整个的界面的Window实现一个转场的效果。所以我们需要在onCreate之前拿到window对象并设置Feature

  • 方法一 代码设置
  //设置使用转场动画
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
  • 方法二 xml
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowContentTransitions">true</item>
    </style>

使用ActivityOptionsCompat 共享元素转换

我们使用共享元素跳转,就是在跳转的时候会共享一个元素,共享元素的观念就是可以把两个Activity当中相同的元素关联起来做连贯的动画。
前提,给两个Activity当中的共享元素view都设置一个相同的名字——android:transitionName

  • xml文件中
  <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:transitionName="iv_meinv3"
        android:src="@drawable/meinv3" />

按返回键的时候我们可以看到,过渡动画还是可以返回共享元素的转场动画,在源码中可以看到系统会判断是否支持了转场动画,来执行不同策略的回退

finishAfterTransition()
  • Activity文件中
 @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    public void jumpPage(View view) {
        ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(
                this,
                iv,
                "iv_meinv3"
        );
        Intent intent = new Intent(this, Scene2Activity.class);
        startActivity(intent, optionsCompat.toBundle());
    }

处理多个共享元素的情况

  • xml文件中要对每个控件的android:transitionName都指定一个名字
    • 第一个activity的布局文件xml
    <ImageView
        android:id="@+id/iv"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:scaleType="fitXY"
        android:src="@drawable/meinv3"
        android:transitionName="iv"
        />

    <Button
        android:id="@+id/bt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="jumpPage"
        android:transitionName="bt"
        android:text="跳转" />
  • 第二个activity的布局文件的xml
   <ImageView
        android:id="@+id/iv2"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:scaleType="fitXY"
        android:src="@drawable/meinv3"
        android:transitionName="iv"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我就是个按钮"
        android:transitionName="bt"
        app:layout_constraintTop_toBottomOf="@+id/iv2"
        />
  • activity中使用Pair
        ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, 
                Pair.create((View) iv, "iv"), Pair.create((View) bt, "bt"));
        Intent intent = new Intent(this, Scene2Activity.class);
        startActivity(intent, optionsCompat.toBundle());

使用ActivityOptionsCompat 普通元素转换

普通的转换效果可以使用系统自带
三种系统带的:滑动效果(Slide)、展开效果Explode、渐变显示隐藏效果Fade

        Slide slide = new Slide();
        slide.setDuration(300);
        getWindow().setExitTransition(slide);//出去的动画
        getWindow().setEnterTransition(slide);//进来的动画
        
        Explode explode = new Explode();
        explode.setDuration(1000);
        getWindow().setExitTransition(explode);//出去的动画
        getWindow().setEnterTransition(explode);//进来的动画
        
        Fade fade = new Fade();
        fade.setDuration(1000);
        getWindow().setExitTransition(fade);//出去的动画
        getWindow().setEnterTransition(fade);//进来的动画
        //如果有共享元素,可以设置共享元素,那么它就会按照共享元素动画执行,其他的子view就会按照Fade动画执行。
        ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this);
        Intent intent = new Intent(this, SecondActivity.class);
        startActivity(intent, optionsCompat.toBundle());
Android Developer