Android Animation學習（四） ApiDemos解析：多屬性動畫

 

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