Android基础UI之5.0——过渡动画

##1 概述
在Android5.x中，Google对动画效果进行了更深一步的诠释，为Activity的转场效果设计了更加丰富的动画效果。

Android5.x提供了三种Transition类型。
1、进入：一个进入的过渡(动画)决定activity中的所有的视图怎么进入屏幕。
2、退出：一个退出的过渡(动画)决定一个activity中的所有视图怎么退出屏幕。
3、共享元素：一个共享元素过渡(动画)决定两个activities之间的过渡，怎么共享(它们)的视图。

进入和退出的效果包括：
explode(分解) –进或出地移动视图，从屏幕中间
slide(滑动) -进或出地移动视图，从屏幕边缘
fade(淡出) –通过改变屏幕上视图的不透明度达到添加或者移除视图(的效果)

##2 使用步骤
###2.1 xml设置

当你定义继承了material主题样式时，使用Android:windowContentTransitions属性启用窗口的内容转换(效果)。你还可以指定进入、退出、和共享元素的转换：

<style name="myTheme" parent="android:Theme.Material">  
        <!-- 允许使用transitions -->  
        <item name="android:windowContentTransitions">true</item>  

        <!-- 指定进入和退出transitions -->  
        <item name="android:windowEnterTransition">@transition/explode</item>  
        <item name="android:windowExitTransition">@transition/explode</item>  
        <!-- 指定shared element transitions -->  
        <item name="android:windowSharedElementEnterTransition">  
            @transition/change_image_transform</item>  
        <item name="android:windowSharedElementExitTransition">  
            @transition/change_image_transform</item>  
</style>  

定义transition动画：

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">  
    <explode/>  
    <changeBounds/>  
    <changeTransform/>  
    <changeClipBounds/>  
    <changeImageTransform/>  
    
changeBound 这个是最长使用的 改变View 大小和位置
changeClipBounds 改变 Clip 边界的大小
changeImageTransform 改变ImageView 的大小 和 martix
ChangeTransform 改变普通的 View 一些Scalex 值
ChangeScroll 改变滑动位置
</transitionSet> 

###2.2 代码设置
####2.2.1 基本设置
ActivityA:

// 基本的startActivity(intent)方法
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());
1

ActivityB:

// 在onCreate()允许使用transitions  
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// 设置一个enter transition  
getWindow().setEnterTransition(new Explode());
getWindow().setEnterTransition(new Slide());
getWindow().setEnterTransition(new Fade());

####2.2.2 样式使用
设置一个进入动画，默认退出时同样的动画类型

setExitTransition() - 当A start B时，使A中的View退出场景的transition 
setEnterTransition() - 当A start B时，使B中的View进入场景的transition 
setReturnTransition() - 当B 返回 A时，使B中的View退出场景的transition 
setReenterTransition() - 当B 返回 A时，使A中的View进入场景的transition

####2.2.3 共享元素的动画
首先需要在他的ActivityA布局、ActivityB布局中共同设置共享元素

android:transitionName="XXX"

如果只要一个共享元素，那么在ActivityB中可以这样写

startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,view,"share").toBundle());

由多个共享元素，那么我们可以通过Pair.create()来创建多个共享元素

startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, Pair.create(view,"share"),Pair.create(fab,"fab")).toBundle());

##3 布局元素的过渡动画

Transition框架还可以用于activity布局中view从一种状态到另一种状态的过渡动画。

//简单实现
TransitionManager.beginDelayedTransition(sceneRoot);

这会改变相应view的属性，让其变大。Transition框架将记录开始和结束的的值，然后创建一个过渡动画。

squareGreen.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                TransitionManager.beginDelayedTransition(sceneRoot);
                setViewWidth(squareRed, 500);
                setViewWidth(squareBlue, 500);
                setViewWidth(squareGreen, 500);
                setViewWidth(squareYellow, 500);
            }
        });
    }
 
    private void setViewWidth(View view, int x) {
        ViewGroup.LayoutParams params = view.getLayoutParams();
        params.width = x;
        view.setLayoutParams(params);
    }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S25WVqMo-1609479139649)(http://www.jcodecraeer.com/uploads/20150323/1427098831115944.gif)]

##4 实现例子

MainActivity

package com.example.transition;

public class MainActivity extends AppCompatActivity {

    private Intent intent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        intent = new Intent(MainActivity.this, ActivityTwo.class);
    }

    public void explode(View view) {
        intent.putExtra("transition", "explode");
        //将原先的跳转改成如下方式
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());

        /**
         * 修改ActivityTwo返回到MainActivity动画设置
         */
        Fade fade = new Fade();
        fade.setDuration(2000);
        getWindow().setReenterTransition(fade);
    }

    public void slide(View view) {
        intent.putExtra("transition", "slide");
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());
    }

    public void fade(View view) {
        intent.putExtra("transition", "fade");
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());
    }

    public void share(View view) {
        //共享元素
        ImageView share = (ImageView) findViewById(R.id.share);
        intent.putExtra("transition", "share");

        //将原先的跳转改成如下方式，注意这里面的第三个参数决定了ActivityTwo 布局中的android:transitionName的值，它们要保持一致
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, share, "shareTransition").toBundle());
        //创建多个共享单元
        //startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, Pair.create(share, "shareTransition"), Pair.create(fab, "fab")).toBundle());

    }

}

MainActivity的布局xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:onClick="explode"
        android:text="explode" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:onClick="slide"
        android:text="slide" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:onClick="fade"
        android:text="fade" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:onClick="share"
        android:text="share" />

    <ImageView
        android:id="@+id/share"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_horizontal"
        android:src="@mipmap/ic_guide_view_1"/>
</LinearLayout>

ActivityTwo

package com.example.transition;

public class ActivityTwo extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // 允许使用transitions
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

        String transition = getIntent().getStringExtra("transition");

        switch (transition) {
            case "explode":
                // 设置进入时进入动画
                Explode explode = new Explode();
                explode.setDuration(2000);
                getWindow().setEnterTransition(explode);
				
				// 设置退出时退出动画
                Fade fade1 = new Fade();
                fade1.setDuration(2000);
                getWindow().setReturnTransition(fade1);
                break;

            case "slide":
                Slide slide = new Slide();
                slide.setDuration(2000);
                getWindow().setEnterTransition(slide);
                break;

            case "fade":
                Fade fade = new Fade();
                fade.setDuration(3000);
                getWindow().setEnterTransition(fade);
                break;

            case "share":
                break;
        }

        // 所有操作在设置内容视图之前
        setContentView(R.layout.activity_two);
    }
}

ActivityTwo的布局xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/share"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:layout_gravity="center_horizontal"
        android:src="@mipmap/ic_guide_view_1"
        android:onClick="share"
        android:transitionName="shareTransition" />
</RelativeLayout>