qq群：614530228

Android动画机制

在Android 3.0之前的版本，我们能使用的动画类型有两种，分别是逐帧动画和补间动画；在Android 3.0发布时，Android SDK又为开发者带来了更加强大灵活的属性动画，使得实现复杂的动画效果更加容易；随着时间的推进，在Android 4.4中，Android SDK又为开发者带来了android.transition框架，这使得开发者可以通过一种更直观的方式定义动画效果。

1.1 逐帧动画(Frame Animation)

       逐帧动画也叫Drawable Animation，是最简单最直观的动画类型，它利用人眼的视觉暂留效应----也就是光对视网膜所产生的视觉在光停止作用后，仍会保留一段时间的现象。

       在Android中实现逐帧动画，就是由设计师给出一系列状态不断变化的图片，开发者可以指定动画中每一帧对应的图片和持续的时间，然后就可以开始播放动画了。具体而言，有两种方法可以定义逐帧动画，分别是采用XML资源文件和代码实现。

1.1.1 XML资源文件方式

       这是最常使用的方式，首先我们将每一帧的图片放到res/drawable目录中，然后在res/anim目录中新建一个动画XML文件，在这个文件中使用<animation-list>标签来定义动画帧序列，使用<item>标签来定义动画的每一帧，并在其中指定帧的持续时间等属性，格式如下。

<?xml version="1.0" encoding="utf-8" ?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
    <item android:drawable="@drawable/common_loading_01" android:duration="120" />
    <item android:drawable="@drawable/common_loading_02" android:duration="120" />
    <item android:drawable="@drawable/common_loading_03" android:duration="120" />
    <!-- 省略其他类似的帧定义 -->
</animation-list>

其中android.oneshot用来控制动画是否循环播放，如果取值为true，表示动画不会循环播放，否则动画将会循环播放；android:duration用来指定每一帧的播放持续时间。

1.1.2 代码方式

在代码中定义逐帧动画也很简单，但不常用，语句如下。

AnimationDrawable animDrawable = new AnimationDrawable();
for (int i = 1; i < 5; i++) {
    int id = getResources().getIdentifier("common_loading_" + i, "drawable", getPackageName());
    Drawable drawable = getResources().getDrawable(id);
    animDrawable.addFrame(drawable, 120);
}
imageView.setBackgroundDrawable(animaDrawable);
animDrawable.setOneShot(false);

定义好逐帧动画之后，可以在符合某个条件时除非或者停止动画的播放，伪代码如下。

// 获取AnimationDrawable对象实例，用来控制动画的播放和停止
AnimationDrawable animDrawable = (AnimationDrawable) imageView.getBackground();
//动画的播放
animDrawable.start();
//动画的停止
animDrawable.stop();

1.2 补间动画（Tween Animation）

       补间动画是值开发者无须定义动画过程中的每一帧，只需要定义动画的开始和结束这两个关键帧，并指定动画变化的时间和方式等，然后交由Android系统进行计算，通过在两个关键帧之间插入渐变值来实现平滑过渡，从而对View的内容完成一系列的图形交换来实现的动画效果，主要包括四种基本的效果：透明度变化Alpha、大小变化Scale、位移变化Translate及旋转变化Rotate，这四种效果可以动态组合，从而实现复杂灵活的动画。同样，定义补间动画也可以分为XML资源文件和代码实现两种方式。不过在这之前，我们首先来认识一下插值器Interpolator。

1.2.1 插值器Interpolator

       前面说到的Android系统会在补间动画的开始和结束关键帧之间插入渐变值，它依据的便是Interpolator。具体来说，Interpolator会根据类型的不同，选择不同的算法计算出在补间动画期间所需要动态插入帧的密度和位置，Interpolator负责控制动画的变化速度，使得前面所说的四种基本动画效果能够以匀速、加速、抛物线等多种速度进行变化。

       具体到Android代码中，Interpolator类其实是一个空接口，它继承自TimeInterpolator，TimeInterpolator时间插值器允许动画进行非线性运动变换，如加速和减速等，该接口中只有float getInterpolation(float input)这个方法。入参是一个0.0~1.0的值，返回值可以小于0.0也可以大于1.0，代码如下。

public interface Interpolator extends TimeInterpolator {
    
}

public interface TimeInterpolator {
    float getInterpolation(float input);
}

Android SDK默认提供了几个Interpolator的实现类，如下表所示。

当然，如果上述默认的插值器不符合我们的实际需求，开发者也可以通过实现Interpolator接口来编写自己的插值器。

Android SDK使用Animation类来表示动画类，上面介绍的补间动画四种基本类型分别对应所示的几个类。

1.2.2 AlphaAnimation

XML方式就是在res/anim目录中新建xml文件，其中的内容如下。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="200"
        android:fromYDelta="850%p"
        android:toYDelta="0"/>
    <!--toAlpha 1.0 表示完全不透明 0.0 表示完全透明-->
    <alpha
        android:duration="200"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
    <translate
        android:duration="2000"
        android:fromXDelta="0"
        android:toXDelta="85%p"/>
</set>

AlphaAnimation的构造函数只有两个参数，分别是初始的透明度和结束的透明度，语句如下。

public AlphaAnimation(float fromAlpha, float toAlpha) {
    mFromAlpha = fromAlpha;
    mToAlpha = toAlpha;
}

在代码中实现透明度动画很简单，只需创建一个AlphaAnimation实例，然后设置动画持续时间即可，语句如下。

public void alpha() {
    AlphaAnimation anim = new AlphaAnimation(0, 1);//透明度从0变化到1
    anim.setDuration(500);//持续时间500毫秒
    anim.setFillAfter(true);//动画结束后保留结束状态
    mImageView.setAnimation(anim);
}

1.2.3 ScaleAnimation

XML实现示例如下。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="3000"
        android:fromXScale="0.2"
        android:fromYScale="0.2"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.5"
        android:toYScale="1.5"/>
</set>

  在代码中实现，ScaleAnimation可用的构造函数有三个，代码如下。

public ScaleAnimation(float fromX, float fromY, float toX, float toY) {
    
}

public ScaleAnimation(float fromX, float fromY, float toX, float toY, float pivotX, float pivotY) {
    
}

public ScaleAnimation(float fromX, float fromY, float toX, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) {
    
}

public void scale() {
    ScaleAnimation anim = new ScaleAnimation(1.0f, 4.0f, 1.0f, 4.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f);
    anim.setDuration(2000);
    anim.setFillAfter(true);
    mImageView.setAnimation(anim);
}

可以看到，涉及到的入参比较多，具体函数如表所示。

1.2.4 TranslateAnimation

XML实现示例如下

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

    <translate
        android:duration="200"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="0"
        android:toYDelta="1000"/>
</set>

在代码实现中，TranslateAnimation可用的构造函数有两个，代码如下。

public TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) {
    
}

public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toYValue, int fromYType, float fromYValue, int toYType, float toYValue) {
    
}

其中，入参的含义如图所示

TranslateAnimation的使用如下。

public void translate() {
    TranslateAnimation anim = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 2f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 2f);
    anim.setDuration(3000);
    anim.setFillAfter(true);
    mImageView.startAnimation(anim);
}

1.2.5 RotateAnimation

XML实现示例如下。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:repeatMode="restart"
        android:startOffset="0"
        android:toDegrees="360"/>
</set>

在代码实现中，RotateAnimation可用的构造函数有三个，代码如下。

public RotateAnimation(float fromDegrees, float toDegrees) {
    
}

public RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY) {
    
}

public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) {
    
}

其中，入参的含义如图所示

RotateAnimation的使用如下。

public void rotate() {
   RotateAnimation anim = new RotateAnimation(0, -720, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
   anim.setDuration(1000);
   anim.setFillAfter(true);
   mImageView.startAnimation(anim);
}

1.2.6 自定义补间动画

  在实际的项目中，往往会遇到使用上述四种基本动画无法实现的动画需求，这时可以考虑自定义补间动画，只需要继承Animation，并重写这个抽象基类中的applyTransfromation方法，在其中实现具体的动画变换逻辑，语句代码如下。

public class MyAnimation extends Animation {
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation transformation) {
        super.applyTransformation(interpolatedTime, transformation);
    }
}

其中，interpolatedTime表示动画的时间进行比，无论动画的实际持续时间是多少，这个参数总是会从0变化到1。transformation表示补间动画在不同时刻对View的变形程度。

1.3 属性动画（Property Animation）

属性动画是在Android 3.0 中引入的，在补间动画中，我们只能改变View的绘制效果，View的真实属性是没有变化的，而属性动画则可以直接改变View对象的属性值，同时属性动画几乎可以对任何对象执行动画，而不是局限在View对象上，从某种意义上讲，属性动画可以说是增强版的补间动画。与补间动画类似，属性动画也涉及如下基本属性。

属性动画的基类是Animator，它是一个抽象类，所以不会直接使用这个类，通常都是继承它并重写其中的相关方法，Android SDK为开发者默认提供了几个子类，大多数情况下使用这些子类就足够完成开发任务了。

1.3.1 Evaluator

在介绍Animator的子类之前，我们首先来了解一个名为Evaluator的概念，它是用来控制属性动画如何计算属性值的。它的接口定义是TypeEvaluator，其中定义了evaluate方法，供不同类型的子类实现。

public interface TypeEvaluator<T> {
    public T evaluate(float fraction, T startValue, T endValue);
}

常见的实现类有IntEvaluator、FloatEvaluator、ArgbEvaluator等。下面我们来看一下ArgbEvaluator的具体实现，可以看到实现逻辑很简单，就是根据输入的初始值和结束值及一个进度比，计算出每一个进度对应的ARGB值。

public class ArgbEvaluator implements TypeEvaluator {
    private static final ArgbEvaluator sInstance = new ArgbEvaluator();
    
    public static ArgbEvaluator getInstance() {
        return sInstance;
    }
    
    public Object evaluate(float fraction, Object startValue, Object endValue) {
        int startInt = (Integer) startValue;
        int startA = (startInt >> 24) & 0xff;
        int startR = (startInt >> 16) & 0xff;
        int startG = (startInt >> 8) & 0xff;
        int startB = startInt & 0xff;
        
        int endInt = (Integer) startValue;
        int endA = (endInt >> 24) & 0xff;
        int endR = (endInt >> 16) & 0xff;
        int endG = (endInt >> 8) & 0xff;
        int endB = endInt & 0xff;
        
        return (int) ((startA + (int)(fraction * (endA - startA))) << 24) |
        (int) ((startR + (int)(fraction * (endR - startR))) << 16) |
        (int) ((startG + (int)(fraction * (endG - startG))) << 8) |
        (int) ((startB + (int)(fraction * (endB - startB))));
    }
}

1.3.2 AnimatorSet

AnimatorSet也是Animator的子类，用来组合多个Animator，并指定这些Animator是顺序播放还是同时播放。

1.3.3 ValueAnimator

ValueAnimator是属性动画最重要的一个类，继承自Animator。它定义了属性动画大部分的核心功能，包括计算各个帧的属性值、处理更新事件、按照属性值的类型控制计算规则等。

一个完整的属性动画由以下两部分组成。

• 计算动画各个帧的相关属性值。
• 将这些属性值设置给指定的对象。

ValueAnimator为开发者实现了第一部分的功能，第二部分功能由开发者自行设置。ValueAnimator的构造函数是空实现，一般都是使用如下的静态工厂方法来进行实例化。

public static ValueAnimator ofInt(int... values) {
        ValueAnimator anim = new ValueAnimator();
        anim.setIntValues(values);
        return anim;
}

public static ValueAnimator ofArgb(int... values) {
        ValueAnimator anim = new ValueAnimator();
        anim.setIntValues(values);
        anim.setEvaluator(ArgbEvaluator.getInstance());
        return anim;
}

public static ValueAnimator ofFloat(float... values) {
        ValueAnimator anim = new ValueAnimator();
        anim.setFloatValues(values);
        return anim;
}

public static ValueAnimator ofPropertyValuesHolder(PropertyValuesHolder... values) {
        ValueAnimator anim = new ValueAnimator();
        anim.setValues(values);
        return anim;
}

public static ValueAnimator ofObject(TypeEvaluator evaluator, Object... values) {
        ValueAnimator anim = new ValueAnimator();
        anim.setObjectValues(values);
        anim.setEvaluator(evaluator);
        return anim;
}

获取到实例后，接着需要设置动画持续时间、插值方式、重复次数等属性值，然后启动动画，最后还需要为ValueAnimator注册AnimatorUpdateListener监听器，并在这个监听器的onAnimationUpdate方法中将计算出来的属性值设置给指定对象。我们从React Native这个开源框架中可以看到用法如下。

int curColor = activity.getWindow().getStatusBarColor();
ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), curColor, color);

colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animator) {
              activity.getWindow().setStatusBarColor((Integer) animator.getAnimatedValue());
      }
});
colorAnimation.setDuration(300).setStartDelay(0);
colorAnimation.start();

1.3.4 ObjectAnimator

ObjectAnimator 是 ValueAnimator 的子类，封装实现了上面所说的第二部分的功能。因此，在实际开发中用得最多的就是ObjectAnimator，只有在ObjectAnimator实现不了的场景下，才考虑使用ValueAnimator。ObjectAnimator和ValueAnimator在构造实例时最大的不同是需要指定动画作用的具体对象和对象属性名，而且一般不需要注册AnimatorUpdateListener监听器，示例如下。

public class CustomCircleProgressBar extends CircularProgressBar {
    public CustomCircleProgressBar (Context context, AttributeSet attrs) {
         super(context, attrs);
    }

    @Override
    public void setProgressWithAnimation (float progress, int duration) {
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(this, "progress", progress);
        objectAnimator.setDuration(duration);
        objectAnimator.start();
    }
}

使用ObjectAnimator有以下几点需要注意。

• 需要为对象对应的属性提供setter方法。例如，上面的progress属性在父类CircularProgressBar提供了如下设置方法。

public void setProgress (float progress) {
    this.progress = (progress <= 100) ? progress : 100;
    invalidate();
}

• 如果动画的对象是View，那么为了能显示动画效果，在某些情况下，可能还需要注册AnimatorUpdateListener监听器，并在其回调方法onAnimationUpdate中调用View的invalidate方法来刷新View的显示。

上面所说的都是在代码中定义属性动画。事实上，与补间动画类似，属性动画也可以在XML文件中定义，在工程的res/animator目录中存放的就是属性动画XML文件，例子scale.xml如下。

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="together">
    <objectAnimator
        android:duration="2000"
        android:propertyName="scaleX"
        android:valueFrom="1"
        android:valueTo="0.4"
        android:valueType="floatType"/>
<objectAnimator
        android:duration="2000"
        android:propertyName="scaleY"
        android:valueFrom="1"
        android:valueTo="0.4"
        android:valueType="floatType"/>
</set>

使用代码加载如下。

public void scaleY(View view) {
    Animator anim = AnimatorInflater.loadAnimator(this, R.animator.scale);
    anim.setTarget(mImageView);
    anim.start();
}

1.4 过渡动画（Transition Animation）

过渡动画是在Android 4.4引入的新的动画框架，它本质上还是属性动画，只不过是对属性动画做了一层封装，方便开发者实现Activity或者View的过渡动画效果。和属性动画相比，过渡动画最大的不同是需要为动画前后准备不同的布局，并通过对应的API实现两个布局的过渡动画，而属性动画只需要一个布局文件。

在使用Transition Animation框架实现动画效果之前，我们先来了解这个框架的几个基本概念。

• Scene：定义了页面的当前状态信息，Scene的实例化一般通过静态工厂方法实现。

public static Scene getSceneForLayout (ViewGroup sceneRoot, int layoutId, Context context) {
    
}

• Transition: 定义了界面之间切换的动画信息，在使用TransitionManager时没有指定使用哪个Transition，那么会使用默认的AutoTransition，源码如下。可以看出AutoTransition的动画效果就是先隐藏对象变透明，然后移动指定的对象，最后显示出来。

public class AutoTransition extends TransitionSet {
    public AutoTransition() {
        init();
    }

    public AutoTransition(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        setOrdering(ORDERING_SEQUENTIAL);
        addTransition(new Fade(Fade.OUT)).addTransition(new ChangeBounds()).addTransition(new Fade(Fade.IN));
    }
}

• TransitionManager:控制Scene之间切换的控制器，切换常用的方法有一下两个，其中sDefaultTransition就是前面说的AutoTransition的实例。

public static void go(Scene scene) {
    changeScene(scene, sDefaultTransition);
}

public static void go(Scene scene, Transition transition) {
    changeScene(scene, transition);
}

过渡动画的使用很简单，首先定义同一个页面的两个布局，分别是动画前的布局和动画后的布局，我们将其命名为fragment_transition_scene_before.xml和fragment_transition_scene_after.xml，这两个布局文件的根布局具有相同的android:id值，动画前的布局文件内容如下。

<!--fragment_transition_scene_before.xml-->
<RelativeLayout 
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/scene"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      <TextView
        android:id="@+id/textView"  
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

      <Button
          android:id="@+id/goButton"
          android:text="@string/button_go"
          android:layout_below="@id/textView"
          android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</RelativeLayout>

<!--fragment_transition_scene_after.xml-->
<RelativeLayout 
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/scene"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      <TextView
        android:id="@+id/textView"  
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

      <Button
          android:id="@+id/goButton"
          android:text="@string/button_go"
          android:layout_below="@id/textView"
          android:layout_alignParentBottom="true"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"/>
</RelativeLayout>

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_transition);

    if(savedInstanceState == null) {
        getFragmentManager().beginTransaction().add(R.id.container, new TransitionFragment()).commit();
    }

    //XML文件方式
    ViewGroup container = (ViewGroup)findViewById(R.id.container);
    TransitionManager transitionInflater = TransitionInflater.from(this);
    mTransitionManager = transitionInflater.inflateTransitionManager(R.id.transition.transition_manager, this);
    mScene1 = Scene.getSceneForLayout(container, R.layout.fragment_transition_scene_before, this);
mScene2 = Scene.getSceneForLayout(container, R.layout.fragment_transition_scene_after, this);
}

private void goToScene(Scene scene) {
    ChangeBounds changeBounds = new ChangeBounds();
    changeBounds.setDuration(2000);
    Fade fadeOut = new Fade(Fade.OUT);
    fadeOut.setDuration(2000);
    Fade fadeIn = new Fade(Fade.IN);
    fadeIn.setDuration(2000);
    TransitionSet transition = new TransitionSet();
    transition.setOrdering(TransitionSet.ORDERING_SEQUENTIAL); 
    transition.addTransition(fadeOut).addTransition(changeBounds).addTransition(fadeIn);
    TransitionManager.go(scene, transition);
}

上面的代码分别演示了XML布局和代码实现两种方式，过渡动画的XML文件需要放在res/transition目录中，其中transition_manager.xml定义如下。

<?xml version="1.0" encoding="utf-8"?>
<transitionManager 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <transition 
        android:fromScene="@layout/fragment_transition_scene_1"
        android:toScene="fragment_transition_scene_2"
        android:transition="@transition/slow_auto_transition"/>
    <transition 
        android:fromScene="@layout/fragment_transition_scene_1"
        android:toScene="fragment_transition_scene_2"
        android:transition="@transition/slow_auto_transition"/>
</transitionManager>

其中的slow_auto_transition也是定义在res/transition目录中的自定义Transition动画文件。

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

   <fade
        android:fadingMode="fade_out"
        android:duration="1000" />
   <changeBounds 
        android:duration="2000"
        android:interpolator="@android:interpolator/anticipate_overshoot" />
   <fade
        android:fadingMode="fade_in"
        android:duration="1000" />
</transitionSet>