Android转场动画深度解析

2023-03-01

item view 动画

 前言所谓转场动画，通俗的讲就是一个Activity跳转到另一个Activity是的动画;Activity的转场动画很早就有了，5.0之前用的是overridePendingTransition()这个方法。在5.0之后，Google使用MaterialDesign设计风格，进而有了的新的

前言

所谓转场动画，通俗的讲就是一个Activity跳转到另一个Activity是的动画;Activity的转场动画很早就有了，5.0之前用的是overridePendingTransition()这个方法。在5.0之后，Google使用Material Design设计风格，进而有了的新的转场转场动画的诞生，效果还是挺炫酷的;今天我们就来讲解下。

一、转场动画兼容性

1、API21之前Activity过渡动画使用

API21之前Activity过渡动画通过两种方式来实现:style主题里面统一设置、使用代码overridePendingTransition函数单独设置;

style文件主题里面统一定义，全局为所有Activity设置过渡动画效果;

<item name="android:windowAnimationStyle">@style/Animation.Activity.Customer</item> 
    <style name="Animation.Activity.Customer" parent="@android:style/Animation.Activity"> 
        <!-- 进入一个新的Activity的时候，A->B B进入动画 --> 
        <item name="android:activityOpenEnterAnimation">@anim/right_in</item> 
        <!-- 进入一个新的Activity的时候，A->B A退出动画 --> 
        <item name="android:activityOpenExitAnimation">@anim/left_out</item> 
        <!-- 退出一个Activity的时候，B返回到A A进入动画 --> 
        <item name="android:activityCloseEnterAnimation">@anim/left_in</item> 
        <!-- 退出一个Activity的时候，B返回到A B退出动画 --> 
        <item name="android:activityCloseExitAnimation">@anim/right_out</item> 
</style> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

代码overridePendingTransition(enterAnim, exitAnim);

关于overridePendingTransition函数，有一个需要注意的地方就是：它必需紧挨着startActivity()或者finish()或者onBackPressed()函数调用，否则不一定有效果;

2、API 21 之后Activity过渡动画使用

在API 21之后google又推出了一种比之前效果更加赞的过渡动画;

通过ActivityOptions + Transition来实现Activity过渡动画;

所以在使用之前需要进行版本判断。当版本API 大于21时使用转场动画，否则不使用;

// Check if we're running on Android 5.0 or higher 
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
    // Apply activity transition 
} else { 
    // Swap without transition 
} 
1.
2.
3.
4.
5.
6.

ActivityOptions + Transition来实现Activity过渡动画之前先来了看下ActivityOptions里面几个函数代表啥意思;

/** 
 * 和overridePendingTransition类似,设置跳转时候的进入动画和退出动画 
 */ 
public static ActivityOptions makeCustomAnimation(Context context, int enterResId, int exitResId); 
/** 
 * 通过把要进入的Activity通过放大的效果过渡进去 
 * 举一个简单的例子来理解source=view,startX=view.getWidth(),startY=view.getHeight(),startWidth=0,startHeight=0 
 * 表明新的Activity从view的中心从无到有慢慢放大的过程 
 */ 
public static ActivityOptions makeScaleUpAnimation(View source, int startX, int startY, int width, int height); 
/** 
 * 通过放大一个图片过渡到新的Activity 
 */ 
public static ActivityOptions makeThumbnailScaleUpAnimation(View source, Bitmap thumbnail, int startX, int startY); 
/** 
 * 场景动画，体现在两个Activity中的某些view协同去完成过渡动画效果，等下在例子中能更好的看到效果 
 */ 
public static ActivityOptions makeSceneTransitionAnimation(Activity activity, View sharedElement, String sharedElementName); 
/** 
 * 场景动画，同上是对多个View同时起作用 
 */ 
public static ActivityOptions makeSceneTransitionAnimation(Activity activity, android.util.Pair<View, String>... sharedElements); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

对于Transition Activity过渡动画的使用，我们简单的分为三个步骤：告诉系统以Transition的方式启动Activity、定义过渡动画、设置过渡动画。

3、转场动画的使用场景

Android中的转场动画主要有三种场景：

在两个activity之间切换时界面的过渡效果;
两个activity或者Fragment之间shared elements 切换效果;

下面分别详细的介绍。

二、转场动画的使用场景

1、两个activity之间切换时界面的过渡效果

两个activity切换时的，有两个动画，从activity A 切换到activity B时，会有A的退出动画和B的进入动画;

在Google提供的android.transition.Transition包中从activity A切换到activity B有三种方式：Explode, Slide 和Fade;

Explode：从屏幕的中间进入或退出;
Slide：从屏幕的一边向另一边进入或退出;
Fade：通过改变透明度来出现或消失;

上面的三种动画有两种实现方式：

①通过xml声明;

在res目录下新建transition文件夹在transition文件夹下新建activity_fade.xml文件;

activity_fade.xml

<?xml version="1.0" encoding="utf-8"?> 
<fade xmlns:android="http://schemas.android.com/apk/res/" 
    android:duration="1000"/> 
1.
2.
3.

activity_slide.xml

<?xml version="1.0" encoding="utf-8"?> 
<slide xmlns:android="http://schemas.android.com/apk/res/" 
    android:duration="1000"/> 
1.
2.
3.

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); 
    } 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

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); 
    } 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

②代码方式

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); 
    } 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

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.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

2、两个activity或者Fragment之间shared elements 切换效果

Shared elements转换确定两个Activity之间共享的视图如何在这两个Activity之间转换;

如果两个Activity在不同的位置和大小中具有相同的图像，则通过Shared elements转换会在这两个Activity之间平滑地转换和缩放图像;

当从Activity A跳转到Activity B时，ActivityA， ActivityB中的两个item有动画变化，但是要注意的时ActivityA ，ActivityB中的item是两个独立的item;

shared elements转换包括以下几种：

changeBounds 改变目标布局中view的边界
changeClipBounds 裁剪目标布局中view的边界
changeTransform 实现旋转或者缩放动画
changeImageTransform 实现目标布局中ImageView的旋转或者缩放动画

实现上面的效果需要三个步骤：

① 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> 
1.
2.
3.
4.
5.
6.

②定义一个相同的transition名称

分别在Activity A 和Activity B的布局文件中定义item，这两个item的属性可以不一样，但是android:transitionName必须一样。如下：

<ImageView 
        android:id="@+id/small_blue_icon" 
        style="@style/MaterialAnimations.Icon.Small" 
        android:src="@drawable/circle" 
        android:transitionName="@string/blue_name" /> 
1.
2.
3.
4.
5.

activity_b.xml

<ImageView 
        android:id="@+id/big_blue_icon" 
        style="@style/MaterialAnimations.Icon.Big" 
        android:src="@drawable/circle" 
        android:transitionName="@string/blue_name" /> 
1.
2.
3.
4.
5.

③在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()); 
    } 
}); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

Fragment之间Shared elements

Fragment之间的Shared elements的使用过程和Activity之间的类似，分为三个步骤：

①允许windowContentTransitions

<style name="MaterialAnimations" parent="@style/Theme.AppCompat.Light.NoActionBar"> 
    ... 
    <item name="android:windowContentTransitions">true</item> 
    ... 
</style> 
1.
2.
3.
4.
5.

②定义一个共同的变换名称

layout/fragment_a.xml

<ImageView 
        android:id="@+id/small_blue_icon" 
        style="@style/MaterialAnimations.Icon.Small" 
        android:src="@drawable/circle" 
        android:transitionName="@string/blue_name" /> 
1.
2.
3.
4.
5.

layout/fragment_b.xml

<ImageView 
        android:id="@+id/big_blue_icon" 
        style="@style/MaterialAnimations.Icon.Big" 
        android:src="@drawable/circle" 
        android:transitionName="@string/blue_name" /> 
1.
2.
3.
4.
5.

③使用FragmentTransaction

FragmentB fragmentB = FragmentB.newInstance(sample); 
// Defines enter transition for all fragment views 
Slide slideTransition = new Slide(Gravity.RIGHT); 
slideTransition.setDuration(1000); 
sharedElementFragment2.setEnterTransition(slideTransition); 
// Defines enter transition only for shared element 
ChangeBounds changeBoundsTransition = TransitionInflater.from(this).inflateTransition(R.transition.change_bounds); 
fragmentB.setSharedElementEnterTransition(changeBoundsTransition); 
getFragmentManager().beginTransaction() 
        .replace(R.id.content, fragmentB) 
        .addSharedElement(blueView, getString(R.string.blue_name)) 
        .commit(); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.