Android動畫之旅(二)----兩個小球旋轉的動畫,形成視覺差的效果

第二個 兩個小球旋轉的動畫,形成視覺差的效果

動畫組成:

主要是左右兩個小球的位移和體積變化動畫.

1.要利用ObjectAnimator的target,target可以是控件,也可以是類,只要包裝類存在需要你動畫改變的方法.

package com.example.administrator.animationworkdemo.views;

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.BounceInterpolator;
import android.view.animation.DecelerateInterpolator;

/**
 * Created by SuperD on 2017/2/17.
 * 小球轉動的View
 */

public class CircleRotateLoadingView extends View implements View.OnClickListener {
    //小球在不同位置的半徑狀況
    private static final int MAX_BALL_RADIUS = 75;
    private static final int MID_BALL_RADIUS = 50;
    private static final int MIN_BALL_RADIUS = 25;

    //小球移動的距離(與屬性動畫相對應)
    private static final int MOVE_DISTANCE = 100;
    //默認的動畫執行時間
    private static final int ANIM_DO_TIME = 1500;

    // 默認第一個小球顏色
    private final static int DEFAULT_ONE_BALL_COLOR = Color.parseColor("#40df73");
    // 默認第二個小球顏色
    private final static int DEFAULT_TWO_BALL_COLOR = Color.parseColor("#ffdf3e");

    //控件的中心點
    private float centerX;
    private float centerY;

    //左右兩側小球的畫筆
    private Paint mLeftPaint;
    private Paint mRightPaint;

    //左右兩個小球的數據類
    private Ball mLeftBall;
    private Ball mRightBall;

    private AnimatorSet mAnimatorSet;


    public CircleRotateLoadingView(Context context) {
        this(context, null);
    }

    public CircleRotateLoadingView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleRotateLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mLeftPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mLeftPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mLeftPaint.setStrokeWidth(5);

        mRightPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mRightPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mRightPaint.setStrokeWidth(5);

        mLeftBall = new Ball();
        mRightBall = new Ball();
        mLeftBall.setColor(DEFAULT_ONE_BALL_COLOR);
        mRightBall.setColor(DEFAULT_TWO_BALL_COLOR);

        mLeftPaint.setColor(mLeftBall.color);
        mRightPaint.setColor(mRightBall.color);
        initAnim();
        setOnClickListener(this);
    }

    //設置小球的展示動畫
    private void initAnim() {
        mAnimatorSet = new AnimatorSet();
        //左側小球的大小變化分別爲: mid --> max --> mid -->min -->mid
        ValueAnimator mOneScale = ObjectAnimator.ofInt(
                mLeftBall,
                "radius",
                MID_BALL_RADIUS, MAX_BALL_RADIUS, MID_BALL_RADIUS, MIN_BALL_RADIUS, MID_BALL_RADIUS);
        mOneScale.setRepeatCount(ValueAnimator.INFINITE);
        //左側小球的位移變化通過改變圓心
        ValueAnimator mOneMove = ValueAnimator.ofFloat(-1, 0, 1, 0, -1);
        mOneMove.setRepeatCount(ValueAnimator.INFINITE);
        mOneMove.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float value = (float) valueAnimator.getAnimatedValue();
                mLeftBall.setCenterX(centerX + value * MOVE_DISTANCE);
                invalidate();
            }
        });


        //右側小球動畫
        ValueAnimator mTwoScale = ObjectAnimator.ofInt(
                mRightBall,
                "radius",
                MID_BALL_RADIUS, MIN_BALL_RADIUS, MID_BALL_RADIUS, MAX_BALL_RADIUS, MID_BALL_RADIUS);
        mTwoScale.setRepeatCount(ValueAnimator.INFINITE);
        //右側小球動畫
        ValueAnimator mTwoMove = ValueAnimator.ofFloat(1, 0, -1, 0, 1);
        mTwoMove.setRepeatCount(ValueAnimator.INFINITE);
        mTwoMove.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float value = (float) valueAnimator.getAnimatedValue();
                mRightBall.setCenterX(centerX + value * MOVE_DISTANCE);
                invalidate();
            }
        });

        mAnimatorSet.setDuration(ANIM_DO_TIME);
        mAnimatorSet.setInterpolator(new DecelerateInterpolator());
        mAnimatorSet.playTogether(mOneScale, mOneMove, mTwoScale, mTwoMove);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        centerX = w / 2;
        centerY = h / 2;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //先畫大的球,防止重疊
        if (mLeftBall.radius >= mRightBall.radius) {
            canvas.drawCircle(mRightBall.centerX, centerY, mRightBall.radius, mRightPaint);
            canvas.drawCircle(mLeftBall.centerX, centerY, mLeftBall.radius, mLeftPaint);
        } else {
            canvas.drawCircle(mLeftBall.centerX, centerY, mLeftBall.radius, mLeftPaint);
            canvas.drawCircle(mRightBall.centerX, centerY, mRightBall.radius, mRightPaint);
        }
    }

    @Override
    public void onClick(View view) {
        if (mAnimatorSet.isRunning()) {
            mAnimatorSet.cancel();
        }
        mAnimatorSet.start();
    }


    /**
     * 正在旋轉的小球
     */
    class Ball {
        //小球的半徑
        private int radius;
        //小球的圓心點
        private float centerX;
        //小球的顏色
        private int color;

        public Ball() {
        }

        public Ball(int radius, float centerX, int color) {
            this.radius = radius;
            this.centerX = centerX;
            this.color = color;
        }

        public int getRadius() {
            return radius;
        }

        public void setRadius(int radius) {
            this.radius = radius;
        }

        public float getCenterX() {
            return centerX;
        }

        public void setCenterX(float centerX) {
            this.centerX = centerX;
        }

        public int getColor() {
            return color;
        }

        public void setColor(int color) {
            this.color = color;
        }
    }
}