3.0引入的属性动画相比之前的帧动画及补间动画做出了很大的设计上的突破,功能更加强大,结构上更加松耦合。在设计上很值得我们去学习。
做了这么几层抽象
第一层:任何View的动画都可以抽象成对View某种属性值的改变。
ObjectAnimator colorAnim = ObjectAnimator.ofArgb(ballView, "color", Color.BLUE, Color.RED, Color.YELLOW);
如上,只需要保证View存在setColor的接口,那么就可以通过colorAnim来动态改变View的颜色。这也是属性动画名称的由来。
优点是:
干净彻底的实现了View和动画功能的解耦,从此view不知有动画,不用专门对外提供startAnimation方法的实现了,只用对外公开属性接口即可。
代表是:
ObjectAnimator
NOTE:如上setter方法的参数类型要和Animator中的设置的参数类型保持一致,否则会动画便没有效果
第二层:任何属性值的改变都可以抽象成为数学公式:
currentValue = startValue + fraction * (endValue - startValue)
如果是属性值类型是基本数据类型,我们是接触不到这一层的,Animator会帮助我们处理,但如果属性值类型是一个自定义数据类型,那么我们就需要通过实现接口TypeEvaluator来自行处理,这里我们就需要使用到上面的公式。
如下:属性值类型是一个坐标点对象。
public class SinPointTypeEvaluator implements TypeEvaluator {
@Override
public Object evaluate(float fraction, Object startValue, Object endValue) {
BallPoint start = (BallPoint) startValue;
BallPoint end = (BallPoint) endValue;
BallPoint newPoint = new BallPoint();
newPoint.x = start.x + fraction * (end.x - start.x);
newPoint.y = (float) (Math.sin(newPoint.x * Math.PI / 180) * 100) + end.y;
return newPoint;
}
}
fraction是比例值,由0到1的变化。
第三层:根据插值器,duration来计算比例值:fraction
根据插值器,时间duration 在动画执行后,随着时间的变化实时的对外通知fraction的变化。这是动画最核心逻辑实现.
实例
要实现如下的这个动画
首先是个球状View.我们要控制的属性有:
- 球体直径
- 球体颜色
- 球体位置
定义View,公开属性方法
public class BallView extends View {
/**
* 球的颜色
*/
private int color;
/**
* 球的直径
*/
private int radius;
/**
* 球的位置
*/
private BallPoint point;
public BallView(Context context) {
super(context);
}
public BallView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public BallView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public BallView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
public int getColor() {
return color;
}
public BallView setColor(int color) {
this.color = color;
return this;
}
public int getRadius() {
return radius;
}
public BallView setRadius(int radius) {
this.radius = radius;
invalidate();
return this;
}
public BallPoint getPoint() {
return point;
}
public BallView setPoint(BallPoint point) {
this.point = point;
return this;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setColor(color);
float x = 0;
float y = 500;
if (point != null) {
x = point.x;
y = point.y;
}
canvas.drawCircle(x, y, radius, paint);
}
}
实现关于位置的TypeEvaluator
public class SinPointTypeEvaluator implements TypeEvaluator {
@Override
public Object evaluate(float fraction, Object startValue, Object endValue) {
BallPoint start = (BallPoint) startValue;
BallPoint end = (BallPoint) endValue;
BallPoint newPoint = new BallPoint();
newPoint.x = start.x + fraction * (end.x - start.x);
newPoint.y = (float) (Math.sin(newPoint.x * Math.PI / 180) * 100) + end.y;
return newPoint;
}
}
启动动画
BallView ballView = new BallView(this);
ObjectAnimator colorAnim = ObjectAnimator.ofArgb(ballView, "color", Color.BLUE, Color.RED, Color.YELLOW);
colorAnim.setRepeatMode(ValueAnimator.REVERSE);
colorAnim.setRepeatCount(ValueAnimator.INFINITE);
ObjectAnimator radiusAnim = ObjectAnimator.ofInt(ballView, "radius", 10, 20, 30, 20, 10);
radiusAnim.setRepeatMode(ValueAnimator.REVERSE);
radiusAnim.setRepeatCount(ValueAnimator.INFINITE);
ObjectAnimator pointAnim = ObjectAnimator.ofObject(ballView, "point", new SinPointTypeEvaluator(), new BallPoint(0, 300), new BallPoint(500, 300));
pointAnim.setRepeatMode(ValueAnimator.REVERSE);
pointAnim.setRepeatCount(ValueAnimator.INFINITE);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(3000);
animatorSet.playTogether(colorAnim, radiusAnim, pointAnim);
animatorSet.start();