Android Animation學習（二） ApiDemos解析：基本Animators使用

 

Android Animation學習（二） ApiDemos解析：基本Animatiors使用

 

　　Animator類提供了創建動畫的基本結構，但是一般使用的是它的子類：

　　ValueAnimator、ObjectAnimator、AnimatorSet

 

　　ApiDemos中Animation部分是單獨的一個包。

　　下面代碼來自ApiDemos中的AnimationCloning類，加了一個使用ValueAnimator的動畫，還有一些注釋。

　　

　　完整的項目見：URL:https://github.com/mengdd/AnimationApiDemos.git

 

package com.example.helloanimation.demo1;

import java.util.ArrayList;

import com.example.helloanimation.R;
import com.example.helloanimation.demo.ShapeHolder;

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.animation.ValueAnimator.AnimatorUpdateListener;
import android.app.Activity;
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.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.widget.Button;
import android.widget.LinearLayout;

public class BasicAnimationActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 設置布局，布局xml中只包含了一個線性布局和一個Button
        setContentView(R.layout.animation_basic);

        LinearLayout container = (LinearLayout) findViewById(R.id.container);

        // 將自定義的View加入到線性布局中
        final MyAnimationView animView = new MyAnimationView(this);
        container.addView(animView);

        // Button的點擊事件即動畫開始
        Button starter = (Button) findViewById(R.id.startButton);
        starter.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {
                animView.startAnimation();
            }
        });
    }

    /**
     * 自定義的View類
     * 其中包含了一系列的球形對象
     * 
     */
    public class MyAnimationView extends View implements
            ValueAnimator.AnimatorUpdateListener {

        // 圓形球
        public final ArrayList<ShapeHolder> balls = new ArrayList<ShapeHolder>();

        // 總的動畫集合
        AnimatorSet animation = null;

        // 屏幕密度
        private float mDensity;

        public MyAnimationView(Context context) {
            super(context);

            // 得到密度值
            mDensity = getContext().getResources().getDisplayMetrics().density;

            addBall(50f, 25f);
            addBall(150f, 25f);
            addBall(250f, 25f);
            addBall(350f, 25f);
            addBall(450f, 25f);
        }

        private void createAnimation() {

            if (animation == null) {
                // ===============================================
                // 第1個球球的動畫效果：用ObjectAnimator
                // 用工廠方法構造對象：用ofFloat()因為屬性值是float類型
                // 第1個參數為目標對象：balls.get(0)
                // 第2個參數為屬性名：y 這里要求目標對象要有“set屬性名()”的方法。
                // 后面是可變參數，表明屬性目標值，一個參數表明是終止值（對象要有get屬性方法）
                // 可變參數的個數為2時，表明第一個是起始值，第二個是終止值；更多個參數時，動畫屬性值會逐個經過這些值

                ObjectAnimator anim1 = ObjectAnimator.ofFloat(balls.get(0),
                        "y", 0f, getHeight() - balls.get(0).getHeight())
                        .setDuration(500);

                // ===============================================
                // 第二個球球的動畫效果：clone動畫效果1，但是重新設置目標物體
                ObjectAnimator anim2 = anim1.clone();
                anim2.setTarget(balls.get(1));
                anim1.addUpdateListener(this);
                // 因為前兩個動畫完全相同，所以設置刷新監聽的時候就只設置了一個（它們刷新的是同一個View）

                // ===============================================
                // 第三個球球的動畫效果：先加速下落，再減速上升
                ShapeHolder ball2 = balls.get(2);
                // 動畫效果：落下效果
                ObjectAnimator animDown = ObjectAnimator.ofFloat(ball2, "y",
                        0f, getHeight() - ball2.getHeight()).setDuration(500);
                // 落下效果改變了Interpolator,設置為加速
                animDown.setInterpolator(new AccelerateInterpolator());
                // 動畫效果：上升效果
                ObjectAnimator animUp = ObjectAnimator.ofFloat(ball2, "y",
                        getHeight() - ball2.getHeight(), 0f).setDuration(500);
                // 上升效果設置為減速上升
                animUp.setInterpolator(new DecelerateInterpolator());

                // 用一個AnimatorSet對象將下落效果和上升效果順序播放
                AnimatorSet s1 = new AnimatorSet();
                s1.playSequentially(animDown, animUp);// 順序播放效果，參數個數可變

                // 下落動畫刷新View
                animDown.addUpdateListener(this);
                // 上升動畫刷新View
                animUp.addUpdateListener(this);
                // ===============================================
                // 第四個球球的動畫效果
                // 另一個AnimatorSet克隆了上一個set，更換了對象
                AnimatorSet s2 = (AnimatorSet) s1.clone();
                s2.setTarget(balls.get(3));

                // ===============================================
                // 第五個球球的動畫效果:使用ValueAnimator
                final ShapeHolder ball5 = balls.get(4);
                ValueAnimator valueAnimator5 = ValueAnimator.ofFloat(0f,
                        getHeight() - ball5.getHeight());
                valueAnimator5.setDuration(500);
                valueAnimator5.addUpdateListener(new AnimatorUpdateListener() {

                    // ValueAnimator需要自己在監聽處理中設置對象參數
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        // 用animation.getAnimatedValue()得到當前的屬性值，設置進動畫對象中
                        ball5.setY((Float) animation.getAnimatedValue());

                        // 記得要刷新View否則不會調用重新繪制
                        invalidate();
                    }
                });

                // =============================================================
                // 用一個總的AnimatorSet對象管理以上所有動畫
                animation = new AnimatorSet();
                animation.playTogether(anim1, anim2, s1);// 並行
                animation.playSequentially(s1, s2, valueAnimator5);// 串行
            }
        }

        // 在指定位置加上球形
        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();// 這里開始播放動畫
        }

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            // 在參數更新的時候invalidate，刷新整個View的繪制
            // 否則onDraw不會被調用，即看不到View外觀的改變
            invalidate();
        }

    }
}

 

　　其中ShapeHolder:

package com.example.helloanimation.demo;

import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.Shape;
import android.view.View;

/**
 * 
 * A data structure that holds a Shape and various properties that can be used to define
 * how the shape is drawn.
 * （從API Demos中直接搬過來的類）
 * 
 */
public class ShapeHolder {
    private float x = 0, y = 0;
    private ShapeDrawable shape;
    private int color;
    private RadialGradient gradient;
    private float alpha = 1f;
    private Paint paint;

    public void setPaint(Paint value) {
        paint = value;
    }
    public Paint getPaint() {
        return paint;
    }

    public void setX(float value) {
        x = value;
    }
    public float getX() {
        return x;
    }
    public void setY(float value) {
        y = value;
    }
    public float getY() {
        return y;
    }
    public void setShape(ShapeDrawable value) {
        shape = value;
    }
    public ShapeDrawable getShape() {
        return shape;
    }
    public int getColor() {
        return color;
    }
    public void setColor(int value) {
        shape.getPaint().setColor(value);
        color = value;
    }
    public void setGradient(RadialGradient value) {
        gradient = value;
    }
    public RadialGradient getGradient() {
        return gradient;
    }

    public void setAlpha(float alpha) {
        this.alpha = alpha;
        shape.setAlpha((int)((alpha * 255f) + .5f));
    }

    public float getWidth() {
        return shape.getShape().getWidth();
    }
    public void setWidth(float width) {
        Shape s = shape.getShape();
        s.resize(width, s.getHeight());
    }

    public float getHeight() {
        return shape.getShape().getHeight();
    }
    public void setHeight(float height) {
        Shape s = shape.getShape();
        s.resize(s.getWidth(), height);
    }

    public ShapeHolder(ShapeDrawable s) {
        shape = s;
    }
}

 

 

　　效果如圖：

         

 

 

ValueAnimator

　　ValueAnimator使用時可以需要自己設置監聽，將變動的值設置給目標對象：

　　ValueAnimator構造使用工廠方法。

 

　　上面例子中相應的代碼片段：

                // ===============================================
                // 第五個球球的動畫效果:使用ValueAnimator
                final ShapeHolder ball5 = balls.get(4);
                ValueAnimator valueAnimator5 = ValueAnimator.ofFloat(0f,
                        getHeight() - ball5.getHeight());
                valueAnimator5.setDuration(500);
                valueAnimator5.addUpdateListener(new AnimatorUpdateListener() {

                    // ValueAnimator需要自己在監聽處理中設置對象參數
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        // 用animation.getAnimatedValue()得到當前的屬性值，設置進動畫對象中
                        ball5.setY((Float) animation.getAnimatedValue());

                        // 記得要刷新View否則不會調用重新繪制
                        invalidate();
                    }
                });

 

 

ObjectAnimator

　　ObjectAnimator是ValueAnimator的子類，構造時也用工廠方法。

　　ObjectAnimator不用自己設置監聽來設置對象的值，要動畫的對象和要改變的屬性都在構造的時候設置好了。

 　　比如前兩個球球的動畫：

 

                // ===============================================
                // 第1個球球的動畫效果：用ObjectAnimator
                // 用工廠方法構造對象：用ofFloat()因為屬性值是float類型
                // 第1個參數為目標對象：balls.get(0)
                // 第2個參數為屬性名：y 這里要求目標對象要有“set屬性名()”的方法。
                // 后面是可變參數，表明屬性目標值，一個參數表明是終止值（對象要有get屬性方法）
                // 可變參數的個數為2時，表明第一個是起始值，第二個是終止值；更多個參數時，動畫屬性值會逐個經過這些值

                ObjectAnimator anim1 = ObjectAnimator.ofFloat(balls.get(0),
                        "y", 0f, getHeight() - balls.get(0).getHeight())
                        .setDuration(500);

                // ===============================================
                // 第二個球球的動畫效果：clone動畫效果1，但是重新設置目標物體
                ObjectAnimator anim2 = anim1.clone();
                anim2.setTarget(balls.get(1));
                anim1.addUpdateListener(this);
                // 因為前兩個動畫完全相同，所以設置刷新監聽的時候就只設置了一個（它們刷新的是同一個View）

 

 

AnimatorSet

　　AnimatorSet用來組織動畫，動畫可以同時播放，順序播放，也可以設定一定的延遲之后播放。

　　playTogether()表示動畫同時播放。

　　playSequentially() 表示動畫順序播放。

 

　　比如第三個球球先加速下降再減速上升的動畫：

 

                // ===============================================
                // 第三個球球的動畫效果：先加速下落，再減速上升
                ShapeHolder ball2 = balls.get(2);
                // 動畫效果：落下效果
                ObjectAnimator animDown = ObjectAnimator.ofFloat(ball2, "y",
                        0f, getHeight() - ball2.getHeight()).setDuration(500);
                // 落下效果改變了Interpolator,設置為加速
                animDown.setInterpolator(new AccelerateInterpolator());
                // 動畫效果：上升效果
                ObjectAnimator animUp = ObjectAnimator.ofFloat(ball2, "y",
                        getHeight() - ball2.getHeight(), 0f).setDuration(500);
                // 上升效果設置為減速上升
                animUp.setInterpolator(new DecelerateInterpolator());

                // 用一個AnimatorSet對象將下落效果和上升效果順序播放
                AnimatorSet s1 = new AnimatorSet();
                s1.playSequentially(animDown, animUp);// 順序播放效果，參數個數可變

                // 下落動畫刷新View
                animDown.addUpdateListener(this);
                // 上升動畫刷新View
                animUp.addUpdateListener(this);

 

 

　　因為參數是Animator類型的對象集合或者可變參數，所以表示AnimationSet是可嵌套使用的，因為AnimationSet是Animator的子類。

 

                // =============================================================
                // 用一個總的AnimatorSet對象管理以上所有動畫
                animation = new AnimatorSet();
                animation.playTogether(anim1, anim2, s1);// 並行
                animation.playSequentially(s1, s2, valueAnimator5);// 串行

 

　　Demo中就是將所有的動畫都放在一個AnimationSet對象中，最后調用start()方法播放。

 

 

參考資料

　　API Guides：Property Animation

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

　　博文：

　　http://www.cnblogs.com/angeldevil/archive/2011/12/02/2271096.html

 

　　項目地址：

　　https://github.com/mengdd/AnimationApiDemos.git