安卓过渡动画入门介绍

英文原文 https://github.com/lgvalle/Material-Animations 

一直以来,我都是将Transition animation译作动画变换,觉得不好,从本篇文章开始,以过渡动画来取代之。这篇文章就是关于过渡动画的一个管中窥豹似的资料。

在开始翻译原文之前,我还是对过渡动画的一些概念做必要的解释,因为安卓中其实动画早就有了,先后出现了视图动画,属性动画(还有其他的如帧动画等,不过我将他们看作是另类的动画),记得刚刚开始的时候,对于属性动画和视图动画同时存在的必要性就很是怀疑。然后现在4.4之后又出现了transition框架(即过渡动画**)**,对于初学者而言,这实在是太难了,因为你根本搞不清为什么会出现那么多的动画,这些动画到底是不同的动画,还是先后传承的动画?下面就做一些解释。

我认为视图动画是一种过时的动画,属性动画可以做到任何视图动画可以做的事情,而且做的更好,因此在2.3渐渐远去的时代,我觉得可以抛弃视图动画这种概念 了。即便要兼容2.3,属性动画也有兼容项目nineoldandroids可以做到。而且transition框架是基于属性 动画实现的,transition框架是对属性动画的一种封装,transition框架提供的api可以简单的实现很复杂的属性动画效果,但是 transition框架并不会完全替代属性动画的基本用法。

好了下面是译文:

安卓的Transition框架主要运用在以下三种情况:

1.activity之间或者Fragment之间的过渡动画。

2.activity之间或者Fragment之间的共享元素(又叫hero view)的过渡动画。

3.activity中布局元素的过渡动画。

其实1和2都是用于activity(或者)切换的时候。而且1和2是可以同时使用的。ps :虽然overridePendingTransition也可以实现activity的切换,但是overridePendingTransition 没有共享元素的切换效果。而第三种其实是最简单的,主要调用几个已经定义好的动画类就可以了。

1. activity之间的过度动画

A Start B

你可以在xml中定义这种动画

res/transition/activity_explode.xml

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <explode android:duration="2000"/>
</transitionSet>

res/values/style.xml

<item name="android:windowEnterTransition">@transition/activity_explode.xml</item>

也可以通过代码的方式:

MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    setupWindowAnimations();
}
private void setupWindowAnimations() {
    Explode explode = new Explode();
    explode.setDuration(2000);
    getWindow().setExitTransition(explode);
}

DetailActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    setupWindowAnimations();
}
private void setupWindowAnimations() {
    Explode explode = new Explode();
    explode.setDuration(2000);
    getWindow().setEnterTransition(explode);
}

不管是代码还是xml的方式都会得到如下结果:

A start B exmaple

一步步解释上面的过程:

1.Activity A调用Activity B

2.Transition框架发现A的Exit Transition(这里是explode效果的过渡动画)将其应用到所有的可见view。

3.Transition框架发现B的Enter Transition (explode),将其应用到所有的可见view。

4.点击返回的时候Transition 框架分别执行各自Enter与Exit的反向动画(因为它没有找到returnTransition和`reenterTransition`)。

ReturnTransition & ReenterTransition

这两个方法定义A的exit动画和B的enter动画的相反方向的动画,即A的进入与B的离开。我们就成为返回动画吧。

b back a

在本例中,我们这样:

MainActivity.java

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setupWindowAnimations();
    }
    private void setupWindowAnimations() {
        Explode explode = new Explode();
        explode.setDuration(2000);
        getWindow().setExitTransition(explode);
        Fade fade = new Fade();
        fade.setDuration(2000);
        getWindow().setReenterTransition(fade);
    }

DetailActivity.java

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setupWindowAnimations();
    }
    private void setupWindowAnimations() {
        Explode explode = new Explode();
        expl.setDuration(2000);
        getWindow().setEnterTransition(explode);
        Fade fade = new Fade();
        fade.setDuration(2000);
        getWindow().setReturnTransition(fade);        
    }

设置了ReenterTransition和ReturnTransition之后,返回的两个动画就不是默认的了,而是设置的渐变动画。

b back a screenshot

2.Activity间的共享元素

共 享元素过度动画的背后是通过过度动画将两个不同布局中的不同view关联起来。Transition框架知道用适当的动画向用户展示从一个view向另外 一个view过度。请记住:共享元素过度的过程中,view并没有真正从一个布局跑到另外一个布局,整个过程基本都是在后一个布局中完成的。

A Start B with shared

可以看到,这里有两个id分别为smallSquare和bigSquare的view,但是他们有相同的transitionName。这样Transition就知道此时需要创建一个从一个view到另外一个view的动画。

MainActivity.java

squareBlue.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent i = new Intent(MainActivity.this, DetailActivity2.class);
        View sharedView = squareBlue;
        String transitionName = getString(R.string.square_blue_name);
        ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, sharedView, transitionName);
        startActivity(i, transitionActivityOptions.toBundle());
    }
});

layout/main_activity.xml

<View
        android:layout_margin="10dp"
        android:id="@+id/square_blue"
        android:layout_width="50dp"
        android:background="@android:color/holo_blue_light"
        android:transitionName="@string/square_blue_name"
        android:layout_height="50dp"/>

layou/details_activity2.xml

<View
        android:layout_width="150dp"
        android:id="@+id/big_square_blue"
        android:layout_margin="10dp"
        android:transitionName="@string/square_blue_name"
        android:layout_centerInParent="true"
        android:background="@android:color/holo_blue_light"
        android:layout_height="150dp" />

这段代码将产生如下的动画效果:

a to b with shared element

可以看到Transition框架创建了一个让你感觉view在移动与变大的动画效果。

为了证明blue square这个view并没有真正移动,我们可以做一个这样的实现:将transitioName赋予Big Blue Square上面的TextView。

<TextView
        android:layout_width="wrap_content"
        android:text="Activity Detail 2"
        style="@style/Base.TextAppearance.AppCompat.Large"
        android:layout_centerHorizontal="true"
        android:transitionName="@string/square_blue_name"
        android:layout_above="@+id/big_square_blue"
        android:layout_height="wrap_content" />

运行之后你可以看到这次有相同的行为,但是作用在了一个不同的view上:

a to b with shared element - 2

3. 布局元素的过渡动画


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

如果你想知道关于过渡动画的更多知识,请观看这个视频this video by Chet Hasse

本文尽量采用简单的例子

TransitionManager.beginDelayedTransition(sceneRoot);

这行代码告诉framework,我们将要做一些UI上的变化,这些变化需要相应的动画效果。

对UI元素进行变更:

setViewWidth(squareRed, 500);
setViewWidth(squareBlue, 500);
setViewWidth(squareGreen, 500);
setViewWidth(squareYellow, 500);

这会改变相应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);
    }

a to b with shared element - 2

相关资料

lex Lockwood发表了几篇关于Lollipop的transition的几篇文章,非常深入的讨论了这个话题http://www.androiddesignpatterns.com/2014/12/activity-fragment-transitions-in-android-lollipop-part1.html 中文地址 http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0113/2310.html   

Saul Molinero关于transition的比较完善的示例项目:https://github.com/saulmm/Android-Material-Examples

Chet Hasse解释Transition framework的视频: https://www.youtube.com/watch?v=S3H7nJ4QaD8