使用系统默认效果实现activity页面跳转,有时候往往不能满足公司伟大设计师的审美要求,因此我们有必要了解一下怎么给activity页面跳转时增加一些动画,以提升我们app的逼格,增加用户体验。
我们知道,activity切换时,无非就是调用startActivity跳转到新的页面和关闭当前界面返回上一界面这两种场景,我们增加的动画也是围绕这两种情况展开的。下面是我总结的一些套路。
第一种,通过在startActivity或Finish时使用overridePendingTransition实现跳转动画。
首先,我们需要在res下新建一个anim文件夹,用于存放我们自定义的动画文件(这里的动画是属于补间动画)。
slide_bottom_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:shareInterpolator="true">
<translate
android:duration="1000"
android:fromXDelta="0"
android:fromYDelta="150%p"
android:toXDelta="0"
android:toYDelta="0">
</translate>
<alpha
android:duration="1000"
android:fromAlpha="0"
android:toAlpha="1"/>
</set>
slide_top_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:shareInterpolator="true">
<translate
android:duration="1000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="0"
android:toYDelta="-100%p"/>
<alpha
android:duration="1000"
android:fromAlpha="1"
android:toAlpha="0"/>
</set>
从名字我们就知道,slide_bottom_in.xml是代表从底部滑入,slide_top_out.xml是代表从顶部划出。
下面是startActivty处的代码
startActivity(new Intent(this, FirstActivity.class));
overridePendingTransition(R.anim.slide_bottom_in, R.anim.slide_top_out);
点击运行,效果如下:
第二种方式,通过给Application的style添加跳转动画实现(这是设置是全局的--对整个app的activty跳转都会起作用)
首先我们自定义一个style
ActivityInOutAnim
<style name="ActivityInOutAnim">
<item name="android:activityOpenEnterAnimation">@anim/fade_right_top_in</item>
<item name="android:activityCloseExitAnimation">@anim/slide_top_out</item>
<item name="android:activityCloseEnterAnimation">@anim/slide_bottom_in</item>
<item name="android:activityOpenExitAnimation">@anim/fade_left_bottom_out</item>
</style>
activityOpenEnterAnimation:startActivty跳转到新activty时,新activty执行的动画
activityCloseExitAnimation:finish activty时,被finish的activty执行的动画
activityCloseEnterAnimation:finish activty时,新进入的activty执行的动画
activityOpenExitAnimation:startActivty跳转到新activty时,旧activty执行的动画
然后在Application的style通过windowAnimationStyle属性引用上面定义ActivityInOutAnim
<!--全局设置activity进入和退出动画-->
<item name="android:windowAnimationStyle">@style/ActivityInOutAnim</item>
最后就是startActivty处的代码,正常调用startActivity即可,不需要增加额外代码
//<item name="android:windowAnimationStyle">@style/ActivityInOutAnim</item>
startActivity(new Intent(this, SecondActivity.class));
点击运行,效果如下:
第三种,我们可以在startActivity时结合Fade/Slide/Explode实现Activty跳转动画
startActivty处代码如下:
Fade fade = new Fade();
fade.setDuration(400);
getWindow().setExitTransition(fade);//出来的动画
getWindow().setEnterTransition(fade);//进去的动画
Intent intent = new Intent(this, ThirdActivity.class);
ActivityOptions activityOptions1 = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this);
startActivity(intent, activityOptions1.toBundle());
同时在ThirdActivty的onCreate方法中添加如下代码
Explode fade = new Explode();
fade.setDuration(1000);
getWindow().setExitTransition(fade);//出去的动画
getWindow().setEnterTransition(fade);//进来的动画
此外,使用转场动画,我们还需要在setContentView方法之前给activty增加如下属性
//设置允许使用转场动画 api>=21
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
或者在style中设置
<item name="android:windowContentTransitions">true</item>
点击运行,效果如下:
注意:Fade/Slide/Explode这几种动画是谷歌在5.0中新加进来的,虽然更加契合MaterialDesign风格,但使用的时候需要对低于21的版本做兼容,如果你的minSdkVersion<21的话。
第四种,在Application的style中通过windowEnterTransition等属性设置全局的转场动画
<!--使用系统自带的几种动画实现activity跳转,包括explode,fade,Slide ,使用该种动画需要api>=21-->
<item name="android:windowEnterTransition">@transition/activity_slide</item>
<item name="android:windowExitTransition">@transition/activity_slide</item>
<item name="android:windowContentTransitions">true</item>
activty_slide.xml
<?xml version="1.0" encoding="utf-8"?>
<slide xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000">
</slide>
下面是startActivty处的代码:
//ActivityOptions需要API>=21
Intent intent2 = new Intent(this, FourthActivity.class);
ActivityOptions activityOptions = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this);
startActivity(intent2, activityOptions.toBundle());
点击运行,效果如下:
第五种,设置某一控件为共享元素实现转场动画。
首先我们需要在xml中为相关控件设置transitionName属性
<TextView
android:id="@+id/way_five"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/bg_btn"
android:padding="10dp"
android:text="方式五(ActivityOptions--共享元素)"
android:textColor="#FFFFFF"
android:transitionName="btn"/>
然后在和其对应的控件也需要设置transitionName属性,且它们transitionName的值必须是一样的
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="20dp"
android:background="@drawable/bg_btn"
android:padding="10dp"
android:text="我是FifthActivity"
android:textColor="#FFFFFF"
android:transitionName="btn"/>
下面是startActivty处的代码
Intent intent1 = new Intent(this, FifthActivity.class);
ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, mWayFive, "btn");
ActivityCompat.startActivity(this, intent1, optionsCompat.toBundle());
注意这里makeSceneTransitionAnimation的第三个参数也需要和前面transitionName的值一样
点击运行,效果如下:
第六种,拥有多个共享元素的转场动画来实现
这里我选择了两组元素来实现
这里是旧的activty中需要共享的元素
<TextView
android:id="@+id/way_six"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/bg_btn"
android:padding="10dp"
android:text="方式六(ActivityOptions--多个共享元素)"
android:textColor="#FFFFFF"
android:transitionName="btn_six"/>
<ImageView
android:id="@+id/main_img"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="@drawable/timg"
android:transitionName="beauty_img"/>
这里是新的activty中需要共享的元素
<ImageView
android:id="@+id/iv1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/toolbar"
android:scaleType="centerCrop"
android:src="@drawable/timg"
android:transitionName="beauty_img"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="20dp"
android:background="@drawable/bg_btn"
android:padding="10dp"
android:text="我是FifthActivity"
android:textColor="#FFFFFF"
android:transitionName="btn_six"/>
然后就是startActivity处的代码
Intent intent4 = new Intent(this, SixActivity.class);
ActivityOptionsCompat optionsCompat3 = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this, Pair.create((View) mImg, "beauty_img"), Pair.create((View) mWaySix, "btn_six"));
ActivityCompat.startActivity(this, intent4, optionsCompat3.toBundle());
点击运行,效果如下
以上就是我对actvity跳转动画的总结,主要用到传统的overridePendingTransition方式以及谷歌在5.0新增的转场动画方式实现activty的动画跳转,有疑问可以在评论去提出哦,当然如果感觉有用,给个赞。(这里吐槽一下csdn博客,我都全部写完了,然后点击发布且提示成功,然后我到个人主页去查看文章,发现除了第一种方式的相关内容被保留外,其余的内容莫名不见了,现在的内容是第二次重新写进来的)
最后把源码贴上
github地址:SceneTransitionAnimation