Android进阶——属性动画Property Animation详解与应用(二)

引言

前一篇Android进阶——属性动画Property Animation详解(一)总结了属性动画的绝大部分核心知识点，这篇主要是补充下欠缺的知识点——Layout布局动画和View的动画相关知识、自定义TypeEvaluator属性动画的应用。

一、布局Layout改变时应用动画

首先我们必须先把对应的ViewGrop的android:animateLayoutchanges属性设置为true。

1、使用Java代码应用Layout change 动画步骤

ViewGroup中的子元素可以通过setVisibility使其Visible、Invisible或Gone；当有子元素可见性改变时(VISIBLE、GONE)，可以向其应用动画，通过LayoutTransition类（该类是Android 提供的用于动画显示ViewGroup中的Layout的帮助类，我们可以使用该类设置动画并绑定目标Layout）应用，当ViewGroup的视图层次发生变化时产生过渡的动画效果。

方法	用法释义
LayoutTransition()	构造方法
void addTransitionListener(LayoutTransition.TransitionListener listener)	添加监听
void setAnimator(int transitionType, Animator animator)	设置指定的Animator
void setInterpolator(int transitionType, TimeInterpolator interpolator)	设置Interpolator
void setStagger(int transitionType, long duration)	设置延迟时间

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

LayoutTransition Type	用法释义
APPEARING	当一个元素在其父元素中变为Visible时对这个元素应用动画
CHANGE_APPEARING	当一个元素在其父元素中变为Visible时，因系统要重新布局有一些元素需要移动，对这些要移动的元素应用动画
CHANGE_DISAPPEARING	当一个元素在其父元素中变为GONE时，因系统要重新布局有一些元素需要移动，对这些要移动的元素应用动画
CHANGING	不是因为View被添加或消失而造成对其他View位置造成影响，对其他View应用动画
DISAPPEARING	当一个元素在其父元素中变为GONE时对其应用动画

1.1、首先通过构造方法得到LayoutTransition对象

LayoutTransition transition = new LayoutTransition();

1.2、setAnimator设置Animator和监听（如果业务需求的话）

需要注意的是传递的Animator应用的对象的属性必须具有完整的getter和setter。

transition.setAnimator(LayoutTransition.DISAPPEARING, customDisappearingAnim);//其中animator为null则表示没有任何动画效果

transition.addTransitionListener(new LayoutTransition.TransitionListener() {
@Override
public void startTransition(LayoutTransition transition, ViewGroup container, View view, int transitionType) {

}
@Override
public void endTransition(LayoutTransition transition, ViewGroup container, View view, int transitionType) {

}
});

1.3、ViewGroup对象调用setLayoutTransition即可。

mLayout.setLayoutTransition(transition);

2、使用xml形式应用Layout change 动画步骤

Layout change动画的xml文件的根节点是layout-animation。

android:delay表示动画播放的延时，既可以是百分比，也可以是float小数。

android:animationOrder表示动画的播放顺序，有三个取值normal(顺序)、reverse(反序)、random(随机)，当然也可以自定义。

android:animation指向了子控件所要播放的动画。

<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:delay="30%"
android:animationOrder="reverse"
android:animation="@anim/slide_right"/>

就可以将layout-animation应用到ViewGroup中，xml布局添加下面一行就

android:layoutAnimation="@animator/animator_main_layout"

也可以代码配置，如果在xml中文件已经写好LayoutAnimation，可以使用AnimationUtils直接加载：

AnimationUtils.loadLayoutAnimation(context, id)

LayoutAnimationController控制动画的显示顺序

//通过加载XML动画设置文件来创建一个Animation对象；
Animation animation=AnimationUtils.loadAnimation(this, R.anim.slide_right);   //得到一个LayoutAnimationController对象；
LayoutAnimationController controller = new LayoutAnimationController(animation);   //设置控件显示的顺序；
controller.setOrder(LayoutAnimationController.ORDER_REVERSE);   //设置控件显示间隔时间；
controller.setDelay(0.3);   //为ListView设置LayoutAnimationController属性；
listView.setLayoutAnimation(controller);
listView.startLayoutAnimation();

3、Keyframes

keyFrame是一个 时间/值 对，通过它可以定义一个在特定时间的特定状态，即关键帧，而且在两个keyFrame之间可以定义不同的Interpolator，就好像多个动画的拼接，第一个动画的结束点是第二个动画的开始点。KeyFrame是抽象类，要通过ofInt(),ofFloat(),ofObject()获得适当的KeyFrame，然后通过PropertyValuesHolder.ofKeyframe获得PropertyValuesHolder对象。

例：设置btn2对象的width属性值使其：

/*第一个参数为时间百分比，第二个参数是在第一个参数的时间时的属性值。*/
Keyframe kf0 = Keyframe.ofInt(0, 400);//开始时 Width=400
Keyframe kf1 = Keyframe.ofInt(0.25f, 200);//动画开始1/4时 Width=200
Keyframe kf2 = Keyframe.ofInt(0.5f, 400);//动画开始1/2时 Width=400
Keyframe kf4 = Keyframe.ofInt(0.75f, 100);//动画开始3/4时 Width=100
Keyframe kf3 = Keyframe.ofInt(1f, 500);//动画结束时 Width=500
PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe("width", kf0, kf1, kf2, kf4, kf3);
ObjectAnimator rotationAnim = ObjectAnimator.ofPropertyValuesHolder(btn2, pvhRotation);
rotationAnim.setDuration(2000);

定义了一些Keyframe后，通过PropertyValuesHolder类的方法ofKeyframe一个PropertyValuesHolder对象，然后通过ObjectAnimator.ofPropertyValuesHolder获得一个Animator对象。

/*等效于*/
ObjectAnimator oa=ObjectAnimator.ofInt(btn2, "width", 400,200,400,100,500);
oa.setDuration(2000);
oa.start();

4、ViewPropertyAnimator

当需要对一个View的多个属性进行动画可以用ViewPropertyAnimator类，该类对多属性动画进行了优化，会合并一些invalidate()来减少刷新视图。

PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("x", 260f);
PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("y", 260f);
ObjectAnimator.ofPropertyValuesHolder(mImg, pvhX, pvyY).start();
mImg.animate().x(50f).y(100f);

5、Layout改变动画的实例

例1，首先看一个简单一点的添加按钮的时候产生宽度逐渐变大的动画

<!--主界面布局文件activity_layoutchange.xml-->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rootLinearLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:animateLayoutChanges="true"
>
<TextView
android:id="@+id/id_addbtn_txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="点击添加按钮并伴随动画效果" />
</LinearLayout>

<!--应用的动画效果属性动画文件-->
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000"
android:propertyName="alpha"
android:valueFrom="0"
android:valueTo="1"> >
</objectAnimator>

package com.crazymo.anim;

public class LayoutChangeActivity extends Activity {

private LinearLayout mRootLinearLayout;
private Context mContext;
private TextView mTextView;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_layoutchange);
init();
}

private void init() {
mContext = this;
mRootLinearLayout = (LinearLayout) findViewById(R.id.rootLinearLayout);
mTextView = (TextView) findViewById(R.id.id_addbtn_txt);
mTextView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Button addedButton = new Button(mContext);
addedButton.setText("LayoutChange");
//属性动画ObjectAnimator
ObjectAnimator objectAnimator = (ObjectAnimator) AnimatorInflater.loadAnimator(mContext, R.animator.animator_scale);
objectAnimator.setTarget(addedButton);
LayoutTransition layoutTransition = new LayoutTransition();
//指定为新加View出现时展示动画
layoutTransition.setAnimator(LayoutTransition.APPEARING, objectAnimator);
//为布局添加LayoutTransition
mRootLinearLayout.setLayoutTransition(layoutTransition);
mRootLinearLayout.addView(addedButton);
}
});
}
}

例2，上例中，当Layout改变时应用的只是一种动画效果，如果直接把动画文件改为set节点的动画集，运行是报错的（java.lang.ClassCastException: android.animation.AnimatorSet cannot be cast to android.animation.ObjectAnimator），接下来我们应用多种效果，包含添加和删除View时的动画。

<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:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Add Button"
android:id="@+id/layout_animator_addbutton"
/>
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Reset Button"
android:id="@+id/layout_animator_resetbutton"
/>
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="4"
android:animateLayoutChanges="true"
android:id="@+id/layout_animator_gridview"
/>
</ScrollView>
</LinearLayout>

package com.crazymo.anim;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.Keyframe;
import android.animation.LayoutTransition;
import android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.GridLayout;
import android.widget.LinearLayout;

public class ComplexLayoutAnimActivity extends Activity implements View.OnClickListener {

private Button mButtonAdd;
private Button mButtonReset;
private GridLayout mGridLayout;
private int buttonNumbers = 1;

private LayoutTransition mLayoutTransition;

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

private void getViews() {
mButtonAdd = (Button) findViewById(R.id.layout_animator_addbutton);
mButtonAdd.setOnClickListener(this);
mButtonReset = (Button) findViewById(R.id.layout_animator_resetbutton);
mButtonReset.setOnClickListener(this);
mGridLayout = (GridLayout) findViewById(R.id.layout_animator_gridview);
}

public void initViews() {

getViews();
mLayoutTransition = new LayoutTransition();
//为GridLayout设置mLayoutTransition对象
mGridLayout.setLayoutTransition(mLayoutTransition);
mLayoutTransition.setStagger(LayoutTransition.CHANGE_APPEARING, 30);
mLayoutTransition.setStagger(LayoutTransition.CHANGE_DISAPPEARING, 30);
//设置每个动画持续的时间
mLayoutTransition.setDuration(300);
//初始化自定义的动画效果
customLayoutTransition();
}

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.layout_animator_addbutton:
Log.d("TAG", "add btn");
addButton();
break;
case R.id.layout_animator_resetbutton:
Log.d("TAG", "reset btn");
resetButton();
break;
default:
break;
}
}

/**
* 增加Button
*/
public void addButton() {
Button mButton = new Button(this);
LinearLayout.LayoutParams mLayoutParams = new LinearLayout.LayoutParams(270, 150);
mButton.setLayoutParams(mLayoutParams);
mButton.setText("Button" + String.valueOf(buttonNumbers++));
mButton.setTextColor(Color.rgb(0, 0, 0));
if (buttonNumbers % 2 == 1) {
mButton.setBackgroundColor(Color.GREEN);
} else {
mButton.setBackgroundColor(Color.RED);
}
mButton.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
mGridLayout.removeView(v);
}
});

mGridLayout.addView(mButton, Math.min(1, mGridLayout.getChildCount()));
}

/**
* 删除所有的Button,重置GridLayout
*/
public void resetButton() {
mGridLayout.removeAllViews();
buttonNumbers = 1;
}

public void customLayoutTransition() {

/**
* Add Button
* LayoutTransition.APPEARING
* 增加一个Button时，设置该Button的动画效果
*/
ObjectAnimator mAnimatorAppearing = ObjectAnimator.ofFloat(null, "rotationY", 90.0f, 0.0f)
.setDuration(mLayoutTransition.getDuration(LayoutTransition.APPEARING));
//为LayoutTransition设置动画及动画类型
mLayoutTransition.setAnimator(LayoutTransition.APPEARING, mAnimatorAppearing);
mAnimatorAppearing.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
View view = (View) ((ObjectAnimator) animation).getTarget();
view.setRotationY(0.0f);
}
});

/**
* Add Button
* LayoutTransition.CHANGE_APPEARING
* 当增加一个Button时，设置其他Button的动画效果
*/

PropertyValuesHolder pvhLeft =
PropertyValuesHolder.ofInt("left", 0, 1);
PropertyValuesHolder pvhTop =
PropertyValuesHolder.ofInt("top", 0, 1);
PropertyValuesHolder pvhRight =
PropertyValuesHolder.ofInt("right", 0, 1);
PropertyValuesHolder pvhBottom =
PropertyValuesHolder.ofInt("bottom", 0, 1);

PropertyValuesHolder mHolderScaleX = PropertyValuesHolder.ofFloat("scaleX", 1.0f, 0.0f, 1.0f);
PropertyValuesHolder mHolderScaleY = PropertyValuesHolder.ofFloat("scaleY", 1.0f, 0.0f, 1.0f);
ObjectAnimator mObjectAnimatorChangeAppearing = ObjectAnimator.ofPropertyValuesHolder(this, pvhLeft,
pvhTop, pvhRight, pvhBottom, mHolderScaleX, mHolderScaleY).setDuration(mLayoutTransition
.getDuration(LayoutTransition.CHANGE_APPEARING));
mLayoutTransition.setAnimator(LayoutTransition.CHANGE_APPEARING, mObjectAnimatorChangeAppearing);
mObjectAnimatorChangeAppearing.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
View view = (View) ((ObjectAnimator) animation).getTarget();
view.setScaleX(1f);
view.setScaleY(1f);
}
});

/**
* Delete Button
* LayoutTransition.DISAPPEARING
* 当删除一个Button时，设置该Button的动画效果
*/
ObjectAnimator mObjectAnimatorDisAppearing = ObjectAnimator.ofFloat(null, "rotationX", 0.0f, 90.0f)
.setDuration(mLayoutTransition.getDuration(LayoutTransition.DISAPPEARING));
mLayoutTransition.setAnimator(LayoutTransition.DISAPPEARING, mObjectAnimatorDisAppearing);
mObjectAnimatorDisAppearing.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
View view = (View) ((ObjectAnimator) animation).getTarget();
view.setRotationX(0.0f);
}
});

/**
* Delete Button
* LayoutTransition.CHANGE_DISAPPEARING
* 当删除一个Button时，设置其它Button的动画效果
*/
//Keyframe 对象中包含了一个时间/属性值的键值对，用于定义某个时刻的动画状态。
Keyframe mKeyframeStart = Keyframe.ofFloat(0.0f, 0.0f);
Keyframe mKeyframeMiddle = Keyframe.ofFloat(0.5f, 180.0f);
Keyframe mKeyframeEndBefore = Keyframe.ofFloat(0.999f, 360.0f);
Keyframe mKeyframeEnd = Keyframe.ofFloat(1.0f, 0.0f);

PropertyValuesHolder mPropertyValuesHolder = PropertyValuesHolder.ofKeyframe("rotation",
mKeyframeStart, mKeyframeMiddle, mKeyframeEndBefore, mKeyframeEnd);
ObjectAnimator mObjectAnimatorChangeDisAppearing = ObjectAnimator.ofPropertyValuesHolder(this, pvhLeft, pvhTop, pvhRight, pvhBottom, mPropertyValuesHolder)
.setDuration(mLayoutTransition.getDuration(LayoutTransition.CHANGE_DISAPPEARING));
mLayoutTransition.setAnimator(LayoutTransition.CHANGE_DISAPPEARING, mObjectAnimatorChangeDisAppearing);
mObjectAnimatorChangeDisAppearing.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
View view = (View) ((ObjectAnimator) animation).getTarget();
view.setRotation(0.0f);
}
});
}
}

二、View 的animate系方法

使用其实很简单通过View的animate()方法构造一个ViewPropertyAnimator对象,然后设置动画效果。

package com.crazymo.anim;

public class ViewAnimActivity extends Activity
{
private final String TAG="ViewAnimActivity";
private ImageView mBall;
private float mScreenHeight;
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.layout);
DisplayMetrics outMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
mScreenHeight = outMetrics.heightPixels;
mBall = (ImageView) findViewById(R.id.id_ball);

}

public void viewAnim(View view){
//API12时，animate()返回的是一个ViewPropertyAnimator
mBall.animate()
.alpha(0)//在2s内透明度逐渐变为0
.scaleX(0.1f)//缩小为原来的0.1倍
.scaleY(0.1f)
.setInterpolator(new AccelerateDecelerateInterpolator())//设置Interpolator
.y(mScreenHeight / 2).setDuration(2000)
//API12时，添加的动画开始时触发
.withStartAction(new Runnable(){
@Override
public void run(){
Log.e(TAG, "START");
}
})
//API 16之后添加的动画结束后触发
.withEndAction(new Runnable(){
@Override
public void run(){
Log.e(TAG, "END");
runOnUiThread(new Runnable() {
@Override
public void run(){
mBall.setY(0);
mBall.setAlpha(1.0f);
}
});
}
}).start();
}                                                                                                                                                  }

三、属性动画的应用例子

1、采用ValueAnimator，监听动画过程，自己实现属性的改变

private void performAnimate(final View target, final int start, final int end) {
ValueAnimator valueAnimator = ValueAnimator.ofInt(1, 100);

valueAnimator.addUpdateListener(new AnimatorUpdateListener() {

//新建IntEvaluator对象，方便下面估值的时候使用
private IntEvaluator mEvaluator = new IntEvaluator();

@Override
public void onAnimationUpdate(ValueAnimator animator) {
//获得当前动画的进度值，整型，1-100之间
int currentValue = (Integer)animator.getAnimatedValue();
Log.d(TAG, current value:  + currentValue);

//计算当前进度占整个动画过程的比例，浮点型，0-1之间
float fraction = currentValue / 100f;
//直接调用整型估值器通过比例计算出宽度，然后再设给Button
target.getLayoutParams().width = mEvaluator.evaluate(fraction, start, end);
target.requestLayout();
}
});
valueAnimator.setDuration(5000).start();
}

@Override
public void onClick(View v) {
if (v == mButton) {
performAnimate(mButton, mButton.getWidth(), 500);
}
}

ValueAnimator我要再说一下，拿上例来说，它会在5000ms内将一个数从1变到100，然后动画的每一帧会回调onAnimationUpdate方法，在这个方法里，我们可以获取当前的值（1-100），根据当前值所占的比例（当前值/100），我们可以计算出Button现在的宽度应该是多少，比如时间过了一半，当前值是50，比例为0.5，假设Button的起始宽度是100px，最终宽度是500px，那么Button增加的宽度也应该占总增加宽度的一半，总增加宽度是500-100=400，所以这个时候Button应该增加宽度400*0.5=200，那么当前Button的宽度应该为初始宽度+ 增加宽度（100+200=300）。上述计算过程很简单，其实它就是整型估值器IntEvaluator的内部实现。

2、使用ObjectAnimator对View的任意属性使用属性动画

例：对Button的宽度实现从当前宽度增加到屏幕的一半宽度。

/**
如果只是使用这个方法你会发现，为什么我们对Button的width属性做了动画却没有效果？上一篇讲过使用属性动画必须满足几个前提，Button内部虽然提供了getWidth和setWidth方法，但是这个setWidth方法并不是改变视图的大小，它继承自TextView新添加的方法，View是没有这个setWidth方法的。阅读了下源码，追踪发现总之，TextView和Button的setWidth和getWidth对应的对象不同，getWidth是可以获取到View 的宽度，然而setWidth设置的确不是View的宽度，而是设置TextView及其子类的宽度。
*/
private void buttonAnimate() {
WindowManager wm = (WindowManager)getApplicationContext()
.getSystemService(Context.WINDOW_SERVICE);
int mScreenWidth= wm.getDefaultDisplay().getWidth()/2;
ObjectAnimator.ofInt(mButton, width, mScreenWidth).setDuration(4000).start();
}

网上查到，对任何属性做动画有三种方案：

修改SDK，给对应的对象加上get和set方法

二次封装，用一个类来包装原始对象，间接为其提供get和set方法

package com.crazymo.anim;

/**
* Created by cmo on 16-4-7.
*/
public class BtnPropertyAnimActivity extends Activity {
private Button mBtn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_button);
mBtn= (Button) findViewById(R.id.id_anim_btn);
mBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ViewWrapper viewWrapper=new ViewWrapper(mBtn);
WindowManager wm = (WindowManager)getApplicationContext()
.getSystemService(Context.WINDOW_SERVICE);
int mScreenWidth= wm.getDefaultDisplay().getWidth();
int width=mBtn.getMeasuredWidth();
ObjectAnimator.ofInt(viewWrapper, "width",width, mScreenWidth).setDuration(4000).start();
}
});
}

private static class ViewWrapper {
private View mTarget;

public ViewWrapper(View target) {
mTarget = target;
}

public int getWidth() {
return mTarget.getLayoutParams().width;
}

public void setWidth(int width) {
mTarget.getLayoutParams().width = width;
mTarget.requestLayout();
}
}
}

采用ValueAnimator，监听动画过程，自己实现属性的改变

/**
它会在4000ms内将一个数从1变到100，然后动画的每一帧会回调onAnimationUpdate方法，在这个方法里，我们可以获取当前的值（1-100），根据当前值所占的比例（当前值/100），我们可以计算出Button现在的宽度应该是多少，比如时间过了一半，当前值是50，比例为0.5，假设Button的起始宽度是100px，最终屏幕宽度是500px，那么Button增加的宽度也应该占总增加宽度的一半，总增加宽度是500-100=400，所以这个时候Button应该增加宽度400*0.5=200，那么当前Button的宽度应该为初始宽度+ 增加宽度（100+200=300）。
*/
private void buttonAnimate(final View target, final int start, final int end) {
ValueAnimator valueAnimator = ValueAnimator.ofInt(1, 100);
valueAnimator.addUpdateListener(new AnimatorUpdateListener() {

//new 一个IntEvaluator对象，方便下面估值的时候使用
private IntEvaluator mEvaluator = new IntEvaluator();
@Override
public void onAnimationUpdate(ValueAnimator animator) {
//获得当前动画的进度值，整型，1-100之间
int currentValue = (Integer)animator.getAnimatedValue();
//计算当前进度占整个动画过程的比例，浮点型，0-1之间
float fraction = currentValue / 100f;
//直接调用整型估值器通过比例计算出宽度，然后再设给Button
target.getLayoutParams().width = mEvaluator.evaluate(fraction, start, end);
target.requestLayout();
}
});
valueAnimator.setDuration(4000).start();
}

3、自定义动画展示顺序

我们都知道LayoutAnimation默认只有三种顺序，即顺序、逆序和随机，有时候并不能满足需求。比如说将动画顺序改为左上到右下角展开，例如Material Design中这个样子。（虽然一个个按顺序播放页可以实现）但是。去翻翻源码看它是怎么实现的，有没有提供方法自定义顺序？结果翻到了一个LayoutAnimationController#getTransformedIndex(AnimationParameters params)方法，返回值就是播放动画的顺序。并且这个方法是protected的，明显就是可由子类来扩展。

/**
* custom LayoutAnimationController for playing child animation in any order.
*/
public class CustomLayoutAnimationController extends LayoutAnimationController {

public static final int ORDER_CUSTOM  = 7;
private Callback onIndexListener;
public void setOnIndexListener(OnIndexListener onIndexListener) {
this.onIndexListener = onIndexListener;
}
public CustomLayoutAnimationController(Animation anim) {
super(anim);
}

public CustomLayoutAnimationController(Animation anim, float delay) {
super(anim, delay);
}
public CustomLayoutAnimationController(Context context, AttributeSet attrs) {
super(context, attrs);
}
/**
* override method for custom play child view animation order
*/
protected int getTransformedIndex(AnimationParameters params) {
if(getOrder() == ORDER_CUSTOM && onIndexListener != null) {
return onIndexListener.onIndex(this, params.count, params.index);
} else {
return super.getTransformedIndex(params);
}
}
/**
* callback for get play animation order
*/
public static interface Callback{

public int onIndex(CustomLayoutAnimationController controller, int count, int index);
}
}

//通过加载XML动画设置文件来创建一个Animation对象；
Animation animation=AnimationUtils.loadAnimation(this, R.anim.slide_right);   //得到一个LayoutAnimationController对象；
CustomLayoutAnimationController controller = new LayoutAnimationController(animation);   //设置控件显示的顺序；
controller.setOrder(CustomLayoutAnimationController.ORDER_COSTOM);   //设置控件显示间隔时间；
controller.setDelay(0.3);   //为ListView设置LayoutAnimationController属性；
listView.setLayoutAnimation(controller);
listView.startLayoutAnimation();

通过复写getTransformedIndex方法，添加自定义顺序ORDER_CUSTOM，让callback自定义控件播放动画的顺序，即可以达到任何想要的效果。