Android Animation学习（四） ApiDemos解析：多属性动画

如果想同时改变多个属性，根据前面所学的，比较显而易见的一种思路是构造多个对象Animator，

（Animator可以是ValueAnimator、ObjectAnimator和AnimatorSet）

然后最后把它们放在一个AnimatorSet中。

另一种思路就是，把多个属性的改变放在同一个ValueAnimator中（ObjectAnimator也是ValueAnimator）。

而这就要借助PropertyValuesHolder。本文主要讲这种方法。

PropertyValuesHolder

PropertyValuesHolder是API Level 11加进来的。根据名字就可以判断出它是某种属性的持有者。

使用工厂方法构造PropertyValuesHolder对象，指定属性名和一系列属性值。

代码例子：MultiPropertyAnimation中：

// ============================================================// 第二个小球：加速下落并且alpha变化ball = balls.get(1);// 利用ofFloat工厂方法构造PropertyValuesHolder类型对象，控制y属性PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("y",ball.getY(), getHeight() - BALL_SIZE);// 利用ofFloat工厂方法构造另一个PropertyValuesHolder类型对象，控制alpha属性PropertyValuesHolder pvhAlpha = PropertyValuesHolder.ofFloat("alpha", 1.0f, 0f);// 利用ofPropertyValuesHolder方法来构造ObjectAnimator对象// 把多个属性变化结合到一个动画中去ObjectAnimator yAlphaBouncer = ObjectAnimator.ofPropertyValuesHolder(ball, pvhY, pvhAlpha).setDuration(DURATION / 2);yAlphaBouncer.setInterpolator(new AccelerateInterpolator());yAlphaBouncer.setRepeatCount(1);yAlphaBouncer.setRepeatMode(ValueAnimator.REVERSE);

关键帧Keyframe

PropertyValuesHolder的工厂方法里面，除了整形ofInt()、浮点型ofFloat()、Object类型ofObject()之外，还有一种：ofKeyframe()。

Keyframe类型对象由一个time/value对组成，定义了指定时间点的指定值。

每一个keyframe还可以拥有自己的interpolator，控制了前一个关键帧到这一个关键帧之间的时间动画行为。

Keyframe对象的构造也用是工厂方法：ofInt(),ofFloat(), orofObject()。

Keyframe对象构造完之后就可以用ofKeyframe()工厂方法来构造PropertyValuesHolder对象。

代码例子：MultiPropertyAnimation中：

// ============================================================// 第四个小球：利用关键帧实现曲线运动ball = balls.get(3);// 属性1：Y坐标运动：下落pvhY = PropertyValuesHolder.ofFloat("y", ball.getY(),getHeight() - BALL_SIZE);float ballX = ball.getX();// 三个关键帧Keyframe kf0 = Keyframe.ofFloat(0f, ballX);Keyframe kf1 = Keyframe.ofFloat(.5f, ballX + 100f);Keyframe kf2 = Keyframe.ofFloat(1f, ballX + 50f);// 属性2：X坐标运动：曲折// 用三个关键帧构造PropertyValuesHolder对象PropertyValuesHolder pvhX = PropertyValuesHolder.ofKeyframe("x", kf0, kf1, kf2);// 再用两个PropertyValuesHolder对象构造一个ObjectAnimator对象ObjectAnimator yxBouncer = ObjectAnimator.ofPropertyValuesHolder(ball, pvhY, pvhX).setDuration(DURATION / 2);yxBouncer.setRepeatCount(1);yxBouncer.setRepeatMode(ValueAnimator.REVERSE);

View的多属性动画：使用ViewPropertyAnimator

ViewPropertyAnimator是API Level 12引进的。

它是用来做针对View对象的多个属性动画功能。

（前面的PropertyValuesHolder对象是针对所有对象的，范围更广）。

如果要同时变换一个View的多个属性的话，ViewPropertyAnimator提供了一种更方便和更适合的方法。

而且由于多个属性的invalidate方法调用统一管理，而不是之前的分别调用，所以还会有一些性能优化。

注意ViewPropertyAnimator这个类的对象不是由调用者构造的，而是通过View类的animate()方法返回的。

比如下面的代码对比：给同一个View实现同一个动画效果：

用多个ObjectAnimator对象：

ObjectAnimator animX = ObjectAnimator.ofFloat(myView, "x", 50f);ObjectAnimator animY = ObjectAnimator.ofFloat(myView, "y", 100f);AnimatorSet animSetXY = new AnimatorSet();animSetXY.playTogether(animX, animY);animSetXY.start();

用一个ObjectAnimator对象加多个PropertyValuesHolder:

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

用ViewPropertyAnimator：

myView.animate().x(50f).y(100f);

API Demos完整代码：

public class MultiPropertyAnimation extends Activity {private static final int DURATION = 1500;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.animation_multi_property);LinearLayout container = (LinearLayout) findViewById(R.id.container);final MyAnimationView animView = new MyAnimationView(this);container.addView(animView);Button starter = (Button) findViewById(R.id.startButton);starter.setOnClickListener(new View.OnClickListener() {public void onClick(View v) {animView.startAnimation();}});}public class MyAnimationView extends View implementsValueAnimator.AnimatorUpdateListener {private static final float BALL_SIZE = 100f;public final ArrayList<ShapeHolder> balls = new ArrayList<ShapeHolder>();AnimatorSet animation = null;Animator bounceAnim = null;ShapeHolder ball = null;public MyAnimationView(Context context) {super(context);addBall(50, 0);addBall(150, 0);addBall(250, 0);addBall(350, 0);}private void createAnimation() {if (bounceAnim == null) {ShapeHolder ball;// ============================================================// 第一个小球：弹跳效果ball = balls.get(0);ObjectAnimator yBouncer = ObjectAnimator.ofFloat(ball, "y",ball.getY(), getHeight() - BALL_SIZE).setDuration(DURATION);yBouncer.setInterpolator(new BounceInterpolator());yBouncer.addUpdateListener(this);// ============================================================// 第二个小球：加速下落并且alpha变化ball = balls.get(1);// 利用ofFloat工厂方法构造PropertyValuesHolder类型对象，控制y属性PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("y",ball.getY(), getHeight() - BALL_SIZE);// 利用ofFloat工厂方法构造另一个PropertyValuesHolder类型对象，控制alpha属性PropertyValuesHolder pvhAlpha = PropertyValuesHolder.ofFloat("alpha", 1.0f, 0f);// 利用ofPropertyValuesHolder方法来构造ObjectAnimator对象// 把多个属性变化结合到一个动画中去ObjectAnimator yAlphaBouncer = ObjectAnimator.ofPropertyValuesHolder(ball, pvhY, pvhAlpha).setDuration(DURATION / 2);yAlphaBouncer.setInterpolator(new AccelerateInterpolator());yAlphaBouncer.setRepeatCount(1);yAlphaBouncer.setRepeatMode(ValueAnimator.REVERSE);// ============================================================// 第三个小球：宽度，高度，x，y同时变化ball = balls.get(2);PropertyValuesHolder pvhW = PropertyValuesHolder.ofFloat("width", ball.getWidth(), ball.getWidth() * 2);PropertyValuesHolder pvhH = PropertyValuesHolder.ofFloat("height", ball.getHeight(), ball.getHeight() * 2);PropertyValuesHolder pvTX = PropertyValuesHolder.ofFloat("x",ball.getX(), ball.getX() - BALL_SIZE / 2f);PropertyValuesHolder pvTY = PropertyValuesHolder.ofFloat("y",ball.getY(), ball.getY() - BALL_SIZE / 2f);// 利用ofPropertyValuesHolder方法来构造ObjectAnimator对象// 因为是可变参数，所以PropertyValuesHolder对象的个数不限ObjectAnimator whxyBouncer = ObjectAnimator.ofPropertyValuesHolder(ball, pvhW, pvhH, pvTX, pvTY).setDuration(DURATION / 2);whxyBouncer.setRepeatCount(1);whxyBouncer.setRepeatMode(ValueAnimator.REVERSE);// ============================================================// 第四个小球：利用关键帧实现曲线运动ball = balls.get(3);// 属性1：Y坐标运动：下落pvhY = PropertyValuesHolder.ofFloat("y", ball.getY(),getHeight() - BALL_SIZE);float ballX = ball.getX();// 三个关键帧Keyframe kf0 = Keyframe.ofFloat(0f, ballX);Keyframe kf1 = Keyframe.ofFloat(.5f, ballX + 100f);Keyframe kf2 = Keyframe.ofFloat(1f, ballX + 50f);// 属性2：X坐标运动：曲折// 用三个关键帧构造PropertyValuesHolder对象PropertyValuesHolder pvhX = PropertyValuesHolder.ofKeyframe("x", kf0, kf1, kf2);// 再用两个PropertyValuesHolder对象构造一个ObjectAnimator对象ObjectAnimator yxBouncer = ObjectAnimator.ofPropertyValuesHolder(ball, pvhY, pvhX).setDuration(DURATION / 2);yxBouncer.setRepeatCount(1);yxBouncer.setRepeatMode(ValueAnimator.REVERSE);// ===========================================================// 所有小球动画的集合bounceAnim = new AnimatorSet();((AnimatorSet) bounceAnim).playTogether(yBouncer,yAlphaBouncer, whxyBouncer, yxBouncer);}}public void startAnimation() {createAnimation();bounceAnim.start();}private ShapeHolder addBall(float x, float y) {OvalShape circle = new OvalShape();circle.resize(BALL_SIZE, BALL_SIZE);ShapeDrawable drawable = new ShapeDrawable(circle);ShapeHolder shapeHolder = new ShapeHolder(drawable);shapeHolder.setX(x);shapeHolder.setY(y);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();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;}@Overrideprotected void onDraw(Canvas canvas) {for (ShapeHolder ball : balls) {canvas.translate(ball.getX(), ball.getY());ball.getShape().draw(canvas);canvas.translate(-ball.getX(), -ball.getY());}}public void onAnimationUpdate(ValueAnimator animation) {invalidate();}}}

参考资料：

API Guides：Property Animation

/guide/topics/graphics/prop-animation.html

项目地址：/mengdd/AnimationApiDemos.git