android跳动的小球动画

平时对牛逼动画,高级UI,都深入的不多!近日,某头条,推了一个android技术类视频(平时在头条关注技术比较多),讲的是加载动画效果,是动脑学院讲的公开课,160分钟,我硬是拿着小手机看完了!边看,便记,然后整理了一下,规范了一下代码
做这个动画,需掌握:
1、属性动画
2、Path类、Canvas类
3、贝塞尔曲线
4、SurfaceView用法
5、自定义attr属性
6 、架构: 状态模式,控制器
7 、自由落体,抛物线等概念
不多说了,直接上码

1.DancingView.java

public class DancingView extends SurfaceView implements SurfaceHolder.Callback {

    public static final int STATE_DOWN = 1;//向下状态
    public static final int STATE_UP = 2;//向上状态

    public static final int DEFAULT_POINT_RADIUS = 10;
    public static final int DEFAULT_BALL_RADIUS = 13;
    public static final int DEFAULT_LINE_WIDTH = 200;
    public static final int DEFAULT_LINE_HEIGHT = 2;
    public static final int DEFAULT_LINE_COLOR = Color.parseColor("#FF9800");
    public static final int DEFAULT_POINT_COLOR = Color.parseColor("#9C27B0");
    public static final int DEFAULT_BALL_COLOR = Color.parseColor("#FF4081");

    public static final int DEFAULT_DOWN_DURATION = 600;//ms
    public static final int DEFAULT_UP_DURATION = 600;//ms
    public static final int DEFAULT_FREEDOWN_DURATION = 1000;//ms

    public static final int MAX_OFFSET_Y = 50;//水平下降最大偏移距离


    public int PONIT_RADIUS = DEFAULT_POINT_RADIUS;//小球半径
    public int BALL_RADIUS = DEFAULT_BALL_RADIUS;//小球半径

    private Paint mPaint;
    private Path mPath;
    private int mLineColor;
    private int mPonitColor;
    private int mBallColor;
    private int mLineWidth;
    private int mLineHeight;

    private float mDownDistance;
    private float mUpDistance;
    private float freeBallDistance;

    private ValueAnimator mDownController;//下落控制器
    private ValueAnimator mUpController;//上弹控制器
    private ValueAnimator mFreeDownController;//自由落体控制器

    private AnimatorSet animatorSet;
    private int state;

    private boolean ismUpControllerDied = false;
    private boolean isAnimationShowing = false;
    private boolean isBounced = false;
    private boolean isBallFreeUp = false;

    public DancingView(Context context) {
        super(context);
        init(context, null);
    }

    public DancingView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }


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


    private void init(Context context, AttributeSet attrs) {
        initAttributes(context, attrs);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(mLineHeight);
        mPaint.setStrokeCap(Paint.Cap.ROUND);

        mPath = new Path();
        getHolder().addCallback(this);

        initController();
    }

    private void initAttributes(Context context, AttributeSet attrs) {
        TypedArray typeArray = context.obtainStyledAttributes(attrs, R.styleable.DancingView);
        mLineColor = typeArray.getColor(R.styleable.DancingView_lineColor, DEFAULT_LINE_COLOR);
        mLineWidth = typeArray.getDimensionPixelOffset(R.styleable.DancingView_lineWidth, DEFAULT_LINE_WIDTH);
        mLineHeight = typeArray.getDimensionPixelOffset(R.styleable.DancingView_lineHeight, DEFAULT_LINE_HEIGHT);
        mPonitColor = typeArray.getColor(R.styleable.DancingView_pointColor, DEFAULT_POINT_COLOR);
        mBallColor = typeArray.getColor(R.styleable.DancingView_ballColor, DEFAULT_BALL_COLOR);
        typeArray.recycle();
    }


    private void initController() {
        mDownController = ValueAnimator.ofFloat(0, 1);
        mDownController.setDuration(DEFAULT_DOWN_DURATION);
        mDownController.setInterpolator(new DecelerateInterpolator());
        mDownController.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mDownDistance = MAX_OFFSET_Y * (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        mDownController.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                state = STATE_DOWN;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });

        mUpController = ValueAnimator.ofFloat(0, 1);
        mUpController.setDuration(DEFAULT_UP_DURATION);
        mUpController.setInterpolator(new DancingInterpolator());
        mUpController.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mUpDistance = MAX_OFFSET_Y * (float) animation.getAnimatedValue();
                if (mUpDistance >= MAX_OFFSET_Y) {
                    //进入自由落体状态
                    isBounced = true;
                    if (!mFreeDownController.isRunning() && !mFreeDownController.isStarted() && !isBallFreeUp) {
                        mFreeDownController.start();
                    }
                }
                postInvalidate();
            }
        });
        mUpController.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                state = STATE_UP;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                ismUpControllerDied = true;
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });

        mFreeDownController = ValueAnimator.ofFloat(0, 8f);
        mFreeDownController.setDuration(DEFAULT_FREEDOWN_DURATION);
        mFreeDownController.setInterpolator(new DecelerateInterpolator());
        mFreeDownController.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //该公式解决上升减速 和 下降加速
                float t = (float) animation.getAnimatedValue();
                freeBallDistance = 40 * t - 5 * t * t;

                if (ismUpControllerDied) {//往上抛,到临界点
                    postInvalidate();
                }
            }
        });
        mFreeDownController.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                isBallFreeUp = true;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                isAnimationShowing = false;
                //循环第二次
                startAnimations();
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });

        animatorSet = new AnimatorSet();
        animatorSet.play(mDownController).before(mUpController);
        animatorSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                isAnimationShowing = true;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });
    }

    /**
     * 启动动画,外部调用
     */
    public void startAnimations() {
        if (isAnimationShowing) {
            return;
        }
        if (animatorSet.isRunning()) {
            animatorSet.end();
            animatorSet.cancel();
        }
        isBounced = false;
        isBallFreeUp = false;
        ismUpControllerDied = false;

        animatorSet.start();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);


        // 一条绳子用左右两部分的二阶贝塞尔曲线组成
        mPaint.setColor(mLineColor);
        mPath.reset();
        //起始点
        mPath.moveTo(getWidth() / 2 - mLineWidth / 2, getHeight() / 2);

        if (state == STATE_DOWN) {//下落
            /**************绘制绳子开始*************/
            //左部分 的贝塞尔
            mPath.quadTo((float) (getWidth() / 2 - mLineWidth / 2 + mLineWidth * 0.375), getHeight() / 2 + mDownDistance,
                    getWidth() / 2, getHeight() / 2 + mDownDistance);
            //右部分 的贝塞尔
            mPath.quadTo((float) (getWidth() / 2 + mLineWidth / 2 - mLineWidth * 0.375), getHeight() / 2 + mDownDistance,
                    getWidth() / 2 + mLineWidth / 2, getHeight() / 2);

            mPaint.setStyle(Paint.Style.STROKE);
            canvas.drawPath(mPath, mPaint);
            /**************绘制绳子结束*************/


            /**************绘制弹跳小球开始*************/
            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setColor(mBallColor);
            canvas.drawCircle(getWidth() / 2, getHeight() / 2 + mDownDistance - BALL_RADIUS, BALL_RADIUS, mPaint);
            /**************绘制弹跳小球结束*************/
        } else if (state == STATE_UP) { //向上弹
            /**************绘制绳子开始*************/
            //左部分的贝塞尔
            mPath.quadTo((float) (getWidth() / 2 - mLineWidth / 2 + mLineWidth * 0.375), getHeight() / 2 + 50 - mUpDistance,
                    getWidth() / 2,
                    getHeight() / 2 + (50 - mUpDistance));

            //右部分的贝塞尔
            mPath.quadTo((float) (getWidth() / 2 + mLineWidth / 2 - mLineWidth * 0.375), getHeight() / 2 + 50 - mUpDistance,
                    getWidth() / 2 + mLineWidth / 2,
                    getHeight() / 2);

            mPaint.setStyle(Paint.Style.STROKE);
            canvas.drawPath(mPath, mPaint);
            /**************绘制绳子结束*************/

            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setColor(mBallColor);

            //弹性小球,自由落体
            if (!isBounced) {
                //上升
                canvas.drawCircle(getWidth() / 2, getHeight() / 2 + (MAX_OFFSET_Y - mUpDistance) - BALL_RADIUS, BALL_RADIUS, mPaint);
            } else {
                //自由落体
                canvas.drawCircle(getWidth() / 2, getHeight() / 2 - freeBallDistance - BALL_RADIUS, BALL_RADIUS, mPaint);
            }
        }
        mPaint.setColor(mPonitColor);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(getWidth() / 2 - mLineWidth / 2, getHeight() / 2, PONIT_RADIUS, mPaint);
        canvas.drawCircle(getWidth() / 2 + mLineWidth / 2, getHeight() / 2, PONIT_RADIUS, mPaint);
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        Canvas canvas = holder.lockCanvas();//锁定整个SurfaceView对象,获取该Surface上的Canvas.
        draw(canvas);
        holder.unlockCanvasAndPost(canvas);//释放画布，提交修改
    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
    }
}

2.DancingInterpolator.java

 public class DancingInterpolator implements Interpolator {
    @Override
    public float getInterpolation(float input) {
        return (float) (1 - Math.exp(-3 * input) * Math.cos(10 * input));
    }
}

3.自定义属性 styles.xml

<declare-styleable name="DancingView">
       <attr name="lineWidth" format="dimension" />
       <attr name="lineHeight" format="dimension" />
       <attr name="pointColor" format="reference|color" />
       <attr name="lineColor" format="reference|color" />
       <attr name="ballColor" format="reference|color" />
declare-styleable>

颜色,尺寸,参数可以自己测试,调整,仅供学习!

--每天进步一点,终会成长为老司机