正文

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

IP云
IP云V管理员/28 阅读
11/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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() , or ofObject() 。

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;

    @Override

    public 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 implements

            ValueAnimator.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;

        }

        @Override

        protected 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

http://developer.android.com/guide/topics/graphics/prop-animation.html

项目地址：https://github.com/mengdd/AnimationApiDemos.git

相关阅读

目录[+]