前言
转场动画在交互上非常有优势,本文从转场动画的使用场景和方法起,最后是实现掘金中用户头像的转场动画。
转场动画的使用场景
Android中的转场动画主要有三种场景:
1、在两个activity之间切换时界面的过渡效果。
2、两个activity之间或者两个Fragment之间切换时两个界面中某个对应的view的切换效果。
3、同一个activity中的view的动画效果。 下面分别详细的介绍这三种方式。
1、两个activity之间切换时界面的过渡效果
两个activity切换时的,有两个动画,如下图,从activity A 切换到activity B时,会有A的退出动画和B的进入动画。
在Google提供的android.transition.Transition包中从activity A切换到activity B有三种方式: Explode, Slide 和 Fade。效果如下图所示: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
<?xml version="1.0" encoding="utf-8"?>
<slide xmlns:android="http://schemas.android.com/apk/res/"
android:duration="1000"/>
复制代码
ActivityA的代码如下:因为从ActivityA切换到ActivityB,所以ActivityA是退出动画使用的方法是: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的代码如下
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_transition);
setupWindowAnimations();
}
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毫秒。
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_transition);
setupWindowAnimations();
}
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。
-
EnterTransition <--> ReturnTransition
-
ExitTransition <--> ReenterTransition 如果没有定义Return 或者 Reenter,那么Android会反向执行Enter和Exit变换。如下图从Activity B退回到Activity A:
给Activity A增加了ReturnTransition的代码如下:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_transition);
setupWindowAnimations();
}
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 | 有return Transition |
---|---|
Enter:Fade In | Enter:Fade In |
Exit:Fade out | Exit:Slide out |
2、两个activity之间或者两个Fragment之间切换时两个界面中某个对应的item的切换效果。( Shared elements between Activities)
有时候要实现两个不同布局中的item通过动画联系在一起如下图:
如上图,当从Activity A跳转到Activity B时,ActivityA, ActivityB中的两个item有动画变化,但是要注意的时ActivityA ,ActivityB中的item是两个独立的item。 实现上面的效果需要三个步骤: 1、 Enable Window Content Transition 设置styles.xml文件,允许windowContentTransitions如下: value/style.xml<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"
style="@style/MaterialAnimations.Icon.Small"
android:src="@drawable/circle"
android:transitionName="@string/blue_name" />
复制代码
layout/activity_b.xml
<ImageView
android:id="@+id/big_blue_icon"
style="@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());
}
});
复制代码
效果如下:
未完待续.......