欢迎关注专栏:里面定期分享Android架构技术知识点及解析,还会不断更新的BATJ面试专题,欢迎大家前来探讨交流,如有好的文章也欢迎投稿。
转场动画在交互上非常有优势,本文从转场动画的使用场景和方法起,最后是实现掘金中用户头像的转场动画。
Activity transition APIs 只有在Android 5.0(API 21)或者更高的版本上能使用。所以在使用之前需要进行版本判断。当版本API 大于21时使用转场动画,否则不使用。
// Check if were running on Android 5.0 or higher if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { // Apply activity transition } else { // Swap without transition }
还需要配置允许window content transitions 。也就是栏位:android:windowActivityTransitions。可以在activity的style文件中进行如下配置。
<style name="BaseAppTheme" parent="android:Theme.Material"> <!-- enable window content transitions --> <item name="android:windowActivityTransitions">true</item> </style>
也可以在代码中动态的配置如下:
Android中的转场动画主要有三种场景:
两个activity切换时的,有两个动画,如下图,从activity A 切换到activity B时,会有A的退出动画和B的进入动画。
activity主要的进场和出场方法:
1、Explode:从屏幕的中间进入或退出。
2、Slide:从屏幕的一边向另一边进入或退出。
效果如下图所示:
Explode
Slide
Fade
上面的三种动画有两种实现方式:
1、通过xml声明。
在res目录下新建transition文件夹在transition文件夹下新建activity_fade.xml文件。 res/transition/activity_fade.xml
<?xml version="1.0" encoding="utf-8"?> <fade xmlns:android="http://schemas.android.com/apk/res/" android:duration="1000"/>
res/transition/activity_slide.xml
ActivityA的代码如下:因为从ActivityA切换到ActivityB,所以ActivityA是退出动画使用的方法是:getWindow().setExitTransition(slide);
getWindow().setExitTransition(slide);
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_transition); setupWindowAnimations(); }
private void setupWindowAnimations() { Slide slide = TransitionInflater.from(this).inflateTransition(R.transition.activity_slide); getWindow().setExitTransition(slide); }
ActivityB是进入动画使用方法:getWindow().setEnterTransition(fade);,ActivityB的代码如下
private void setupWindowAnimations() { Fade fade = TransitionInflater.from(this).inflateTransition(R.transition.activity_fade); getWindow().setEnterTransition(fade); }
2、代码方式实现。
ActivityA代码如下:实现一个Slide对象并且设置时间为1000毫秒。 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_transition); setupWindowAnimations(); }
private void setupWindowAnimations() { Slide slide = new Slide(); slide.setDuration(1000); getWindow().setExitTransition(slide); }
ActivityB中实现一个Fide对象并且设置时间为1000毫秒。
private void setupWindowAnimations() { Fade fade = new Fade(); fade.setDuration(1000); getWindow().setEnterTransition(fade); }
上面两种方式最终的实现效果如下:
上面的动画过程分析: 1、Activity A 启动Activity B 2、Transition FrameWork层得到Activity A的退出动画slide并且应用到全部可见的view中。 3、Transition FrameWork层得到Activity B的进入动画fade并且应用到全部可见的view中。 4、当从Activity B返回到Activity A的时候会分别执行Enter和Exit相反的动画(没有设置returnTransition,和reenterTransition时)。
ReturnTransition & ReenterTransition
Return 和Reenter Transition是enter 和exit相反的过程。当从Activity A进入到Activity B时会执行 exit和enter当从Activity B退回到Activity A时会执行Return Transition和Reenter Transition。
给Activity A增加了ReturnTransition的代码如下:
private void setupWindowAnimations() { Fade fade = new Fade(); fade.setDuration(1000); getWindow().setEnterTransition(fade);
Slide slide = new Slide(); slide.setDuration(1000); getWindow().setReturnTransition(slide); }
增加了返回动画和没有增加返回动画的对比效果如下:
没有Return Transition
Enter:Fade In
Exit:Fade out
有return Transition
Enter:Fade In
Exit:Slide out
Shared elements转换确定两个Activity之间共享的视图如何在这两个Activity之间转换。例如,如果两个Activity在不同的位置和大小中具有相同的图像,则通过Shared elements转换会在这两个Activity之间平滑地转换和缩放图像。 主要方法
如下图,当从Activity A跳转到Activity B时,ActivityA, ActivityB中的两个item有动画变化,但是要注意的时ActivityA ,ActivityB中的item是两个独立的item。
shared elements转换包括以下几种:
实现上面的效果需要三个步骤:
1、 Enable Window Content Transition
<style name="MaterialAnimations" parent="@style/Theme.AppCompat.Light.NoActionBar"> ... <item name="android:windowContentTransitions">true</item ... </style>
2、定义一个相同的transition名称
分别在Activity A 和Activity B的布局文件中定义item,这两个item的属性可以不一样,但是android:transitionName必须一样。如下: layout/activity_a.xml
<ImageView android:id="@+id/small_blue_icon" stylex="@style/MaterialAnimations.Icon.Small" android:src="@drawable/circle" android:transitionName="@string/blue_name" />
layout/activity_b.xml
<ImageView android:id="@+id/big_blue_icon" stylex="@style/MaterialAnimations.Icon.Big" android:src="@drawable/circle" android:transitionName="@string/blue_name" />
3、在activity中启动shared element
使用ActivityOptions.makeSceneTransitionAnimation()方法 ActivityA.java
blueIconImageView.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) { Intent i = new Intent(MainActivity.this, SharedElementActivity.class);
View sharedView = blueIconImageView; String transitionName = getString(R.string.blue_name);
ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, sharedView, transitionName); startActivity(i, transitionActivityOptions.toBundle()); } });
效果如下:
未完待续.......
好了,写到这里也结束了,在文章最后放上一个小小的福利,以下为小编自己在学习过程中整理出的一个学习思路及方向,从事互联网开发,最主要的是要学好技术,而学习技术是一条慢长而艰苦的道路,不能靠一时激情,也不是熬几天几夜就能学好的,必须养成平时努力学习的习惯,更加需要准确的学习方向达到有效的学习效果。
下面是部分资料截图,特别适合有3-5年开发经验的Android程序员们学习。
资料免费领取方式:点赞+点开石墨文档免费获取!
推荐阅读: