Android UI——Material Design——Act
在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());