Android属性动画（Property Animation）（上）
1、概述
从Android3.0 (API11)开始引入了属性动画，跟早期的View动画相比，属性动画具有以下优点：
1、属性动画允许对任意对象的属性执行动画操作，而早期的视图动画仅仅只能对View执行动画操作。
2、View动画只能改变视图的几个方面，比如对视图进行缩放以及旋转等，但是像背景颜色这种就无法改变。
3、View动画只是改变View在屏幕上的位置，但是却不能真正改变View本身。比如对于一个按钮，通过动画让其在屏幕上进行移动，但是按钮的有效点击区域还是其原来的位置，并没有发生改变。要想实现按钮的有效点击区域随着动画的改变而改变，这就需要自己手动实现这个逻辑，而属性动画就解决了这个问题。
一个属性动画在特定的时间段内改变对象的属性值，不管这个属性能不能绘制到屏幕上。为了对对象执行属性动画，首先需要指定想要改变的属性，比如对象在屏幕上的位置，然后是动画的持续时间，以及在动画执行期间改变的属性值的类型。
属性动画系统允许你定义一个动画的以下特性：
1、Duration：动画持续时间，默认是300ms
2、Time interpolation：时间差值，这个跟View动画里面的LinearInterpolator等差不多，定义动画的变化率
3、Repeat count and behavior：定义重复次数以及重复模式。可以指定是否重复以及重复的次数，以及重复的时候是从头开始还是反向
4、Animator sets：动画集合。可以定义一组动画，顺序执行或者一起执行，顺序执行的时候可以执行动画之间执行的时间间隔
5、Frame refresh delay：帧刷新延迟。对于动画，定义多久刷新一次帧，默认是10ms，但是帧率最终取决于系统，一般不需要管
2、相关的API
ValueAnimator：主要的动画执行类
ObjectAnimator：VauleAnimator的子类，大多数情况下动画的执行类使用ObjectAnimator就行，除非一些特殊情况下才会使用VauleAnimator做为动画执行类
AnimatorSet：动画集合，用于控制一组动画的执行方式：一起，线性，动画的执行次序以及动画之间的时间间隔
TypeEvaluator：动画估值，用于动画操作属性的值，系统自带的有IntEvaluator、FloatEvaluator等估值方式。
TimeInterpolator：时间差值，这个在前面有介绍，用于指定属性值随着时间改变的方式，比如线性改变、加速改变、先加速再减速等等。
3、使用ObjectAnimator实现动画
使用ObjectAnimator可以很快实现一个动画效果，下面来看一个例子。
首先是布局文件：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/content_object_animate"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.easyliu.test.animationdemo.ObjectAnimateActivity"
tools:showIn="@layout/activity_object_animate">
<Button
android:id="@+id/btn_object_anim"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object Animator"
/>
RelativeLayout>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
然后是Activity:
package com.easyliu.test.animationdemo;
import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
public class ObjectAnimateActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_object_animate);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
findViewById(R.id.btn_object_anim).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// 执行动画操作
ObjectAnimator.ofFloat(view,"alpha",0.0f,1f).setDuration(500).start();
}
});
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
效果如下： 
以上实现的是点击按钮，其透明度发生改变的动画，我们发现只需要一句话就可以实现动画效果！
使用ObjectAnimator有几点需要注意的地方：
1、使用ObjectAnimator就不需要再实现ValueAnimator.AnimatorUnpdateListener接口，因为执行动画的属性值会自动更新
2、执行动画的属性值必须有setter函数，因为在动画的执行过程总会自动调用这个函数来更新属性的值，函数形式为setPropName,例如如果属性名字为foo,那么对应的setter方法为setFoo()。如果不存在setter方法，那么有三种解决方案：
（1）增加一个setter方法，前提是有权限修改这个类
（2）使用一个包装类来间接改变这个属性
（3）使用ValueAnimator,这个稍后会讲
3、如果对于ObjectAnimator只指定一个属性值，默认就是动画结束时候的属性值，此时就要求属性具有getter方法，因为此时属性的开始值需要通过getter方法来得到
4、getter和setter方法必须对相同的类型进行操作，这个类型必须跟ObjectAnimator指定的类型保持一致
5、如果操作属性的setter方法里面没有调用view的重绘，那就需要实现ValueAnimator.AnimatorUpdateListener接口，在接口方法里面手动调用，如下所示：
objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
// view.invalidate();
// view.postInvalidate();
}
});
4、使用ValueAnimator实现动画
ValueAnimator的使用方法和ObjectAnimator差不多，如下所示： ValueAnimator valueAnimator = ValueAnimator.ofFloat(0.0f, (float) (view.getHeight() * 3));
valueAnimator.setDuration(500);
valueAnimator.setTarget(view);
valueAnimator.start();
我们发现ValueAnimator并没有直接指定要操作的属性，这样是看不到任何效果的，这样的好处是不需要操作的属性必须存在getter和setter方法，我们需要在ValueAnimator.AnimatorUpdateListener接口的方法里面获取到动画的当前值，然后对任意属性进行操作，如下所示：
//执行动画
private void performAnimate(final View view) {
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0.0f, (float) (view.getHeight() * 3));
valueAnimator.setDuration(500);
valueAnimator.setTarget(view);
valueAnimator.start();
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float animatedValue=(float)valueAnimator.getAnimatedValue();
view.setTranslationY(animatedValue);
view.setTranslationX(animatedValue);
}
});
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
在上述代码中，通过调用ValueAnimator的getAnimatedValue()方法来获取动画的当前值，然后对view的TranslationX和TranslationY属性进行操作。效果如下：
从上图中我们发现Button的x轴和y轴的移动速率是相同的，如果有一个需求，比如抛物线运动：此时x轴和y轴的移动速率是不同的，那这时候该怎么办呢？此时就需要自定义估值器TypeEvaluator了！
下面自定义估值器:
//自定义估值器
public class PointTypeEvaluator implements TypeEvaluator<PointF> {
@Override
public PointF evaluate(float fraction, PointF pointStart, PointF pointEnd) {
Log.d(TAG,fraction+"");
//抛物线运动
PointF pointF = new PointF();
pointF.x = 600 * fraction;
pointF.y = 0.5f * 10 * (fraction) * (fraction)*120;
return pointF;
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
下面是执行动画：
//执行自定义估计器动画
private void performAnimate2(final View view) {
ValueAnimator valueAnimator = new ValueAnimator();
valueAnimator.setDuration(1000);
valueAnimator.setTarget(view);
valueAnimator.setObjectValues(new PointF(0.0f,0.0f));
valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
//设置自定义估值器
valueAnimator.setEvaluator(new PointTypeEvaluator());
valueAnimator.start();
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
PointF pointF = (PointF) valueAnimator.getAnimatedValue();
view.setTranslationX(pointF.x);
view.setTranslationY(pointF.y);
}
});
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
效果如下： 
通过自定义TypeEvaluator就实现了抛物线的效果～～
5、使用AnimateSet组合动画
可以使用AnimateSet把多个动画组合在一起执行，可以指定执行的模式：顺序执行或者一起执行。下面使用一个来自ApiDemo里面的例子，效果如下所示。ball1和ball2的动画为往下运动，ball3和ball4的动画为往下运动再往上回到起点。ball1、ball2、ball3三个球的动画同时执行，执行完成之后再执行ball4的动画。
Activity代码：
package com.easyliu.test.animationdemo;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.Shader;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.widget.RelativeLayout;
import java.util.ArrayList;
public class ValueAnimateSetActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_value_animate_set);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
RelativeLayout container = (RelativeLayout) findViewById(R.id.content_value_animate_set);
final MyAnimationView myAnimationView = new MyAnimationView(this);
//把动画视图加入布局
container.addView(myAnimationView);
findViewById(R.id.btn_value_animate_set_start).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// 执行动画
myAnimationView.startAnimation();
}
});
}
//自定义动画视图
public class MyAnimationView extends View implements ValueAnimator.AnimatorUpdateListener {
public final ArrayList balls = new ArrayList();
AnimatorSet animation = null;
private float mDensity;
public MyAnimationView(Context context) {
super(context);
mDensity = getContext().getResources().getDisplayMetrics().density;
ShapeHolder ball0 = addBall(50f, 25f);
ShapeHolder ball1 = addBall(150f, 25f);
ShapeHolder ball2 = addBall(250f, 25f);
ShapeHolder ball3 = addBall(350f, 25f);
}
private void createAnimation() {
if (animation == null) {
ObjectAnimator anim1 = ObjectAnimator.ofFloat(balls.get(0), "y",
0f, getHeight() - balls.get(0).getHeight()).setDuration(500);
ObjectAnimator anim2 = anim1.clone();
anim2.setTarget(balls.get(1));
anim1.addUpdateListener(this);
ShapeHolder ball2 = balls.get(2);
ObjectAnimator animDown = ObjectAnimator.ofFloat(ball2, "y",
0f, getHeight() - ball2.getHeight()).setDuration(500);
animDown.setInterpolator(new AccelerateInterpolator());
ObjectAnimator animUp = ObjectAnimator.ofFloat(ball2, "y",
getHeight() - ball2.getHeight(), 0f).setDuration(500);
animUp.setInterpolator(new DecelerateInterpolator());
AnimatorSet s1 = new AnimatorSet();
s1.playSequentially(animDown, animUp);
animDown.addUpdateListener(this);
animUp.addUpdateListener(this);
AnimatorSet s2 = (AnimatorSet) s1.clone();
s2.setTarget(balls.get(3));
animation = new AnimatorSet();
animation.playTogether(anim1, anim2, s1);//一起执行，可以把AnimatorSet跟ValueAnimator组合在一起执行
animation.playSequentially(s1, s2);// 顺序执行
}
}
private ShapeHolder addBall(float x, float y) {
OvalShape circle = new OvalShape();
circle.resize(50f * mDensity, 50f * mDensity);
ShapeDrawable drawable = new ShapeDrawable(circle);
ShapeHolder shapeHolder = new ShapeHolder(drawable);
shapeHolder.setX(x - 25f);
shapeHolder.setY(y - 25f);
int red = (int) (100 + Math.random() * 155);
int green = (int) (100 + Math.random() * 155);
int blue = (int) (100 + Math.random() * 155);
int color = 0xff000000 | red << 16 | green << 8 | blue;
Paint paint = drawable.getPaint(); //new Paint(Paint.ANTI_ALIAS_FLAG);
int darkColor = 0xff000000 | red / 4 << 16 | green / 4 << 8 | blue / 4;
RadialGradient gradient = new RadialGradient(37.5f, 12.5f,
50f, color, darkColor, Shader.TileMode.CLAMP);
paint.setShader(gradient);
shapeHolder.setPaint(paint);
balls.add(shapeHolder);
return shapeHolder;
}
@Override
protected void onDraw(Canvas canvas) {
for (int i = 0; i < balls.size(); ++i) {
ShapeHolder shapeHolder = balls.get(i);
canvas.save();
canvas.translate(shapeHolder.getX(), shapeHolder.getY());
shapeHolder.getShape().draw(canvas);
canvas.restore();
}
}
public void startAnimation() {
createAnimation();
animation.start();
}
public void onAnimationUpdate(ValueAnimator animation) {
invalidate();
}
}
} - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
6、监听动画事件
我们有的时候需要监听动画执行过程中的一些事件，比如当按钮的动画执行结束之后删除按钮，此时就需要为动画添加监听，添加方式如下所示：
// 添加动画监听
valueAnimator.addListener(new ValueAnimator.AnimatorListener() {
@Override
public void onAnimationCancel(Animator animator) {
}
@Override
public void onAnimationStart(Animator animator) {
}
@Override
public void onAnimationEnd(Animator animator) {
//动画执行完成之后删除View
ViewGroup parent = (ViewGroup) view.getParent();
if (parent != null) {
parent.removeView(view);
}
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
效果如下所示,当动画执行结束之后，按钮就被移除了。
有的时候不需要Animator.AnimatorListener接口里面所有的方法，比如只需要End方法，此时可以使用AnimatorListenerAdapter来过滤掉不需要的方法，如下所示：
valueAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
//动画执行完成之后删除View
ViewGroup parent = (ViewGroup) view.getParent();
if (parent != null) {
parent.removeView(view);
}
}
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
以上主要对属性动画的核心功能进行了一个详细的讲解，包括组合动画、自定义估值器等，下一篇讲解：
1、在xml文件当中定义属性动画
2、布局动画
3、ViewPropertyAnimator等
代码下载地址：https://github.com/EasyLiu-Ly/AndroidBlogDemo
参考：
https://developer.android.google.cn/guide/topics/graphics/overview.html
https://developer.android.google.cn/guide/topics/graphics/prop-animation.html