简单仿华为Loading

默然 相爱
寂静 欢喜

一概述

自定义LoadingView大全，教你实现一些简单的LoadingView，若有错误及不好的地方，还请指出，能够和大家一起学习，吾之开心。

我非常希望能够和大家一起探讨有趣的动画。

先来看看效果图：

WSCircleRotate

WSCircleRotate的实现比较简单，运动的轨迹比较单一。难点就是计算小圆的圆心坐标。来看下图：

ps用得不6，效果就长这样了。

ballX=cX+r*cos(a)
ballY=cY+sin(a)

转化成项目中的代码：

 ballX = centerX + storeRadius * (float) Math.cos(Math.toRadians(DEFAULT_BALL_START_ANGLE + mValueAnimator * DEGREE_360));

 ballY = centerY + storeRadius * (float) Math.sin(Math.toRadians(DEFAULT_BALL_START_ANGLE + mValueAnimator * DEGREE_360));

mValueAnimator 动画属性取值（0.0f~1.0f）

从效果图中可以看出，动画开始与结束的地方速率改变比较慢，在中间的时候加速。那么就会用到动画插值器一Interpolator

Interpolator的系统值有下面几个：

• AccelerateDecelerateInterpolator 在动画开始与结束的地方速率改变比较慢，在中间的时候加速
• AccelerateInterpolator 在动画开始的地方速率改变比较慢，然后开始加速
• AnticipateInterpolator 开始的时候向后然后向前甩
• AnticipateOvershootInterpolator 开始的时候向后然后向前甩一定值后返回最后的值
• BounceInterpolator 动画结束的时候弹起
• CycleInterpolator 动画循环播放特定的次数，速率改变沿着正弦曲线
• DecelerateInterpolator 在动画开始的地方快然后慢
• LinearInterpolator 以常量速率改变
• OvershootInterpolator 向前甩一定值后再回到原来位置

下面是onDraw，startAnimator源码：

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

        //画外圆
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(dip2px(DEFAULT_STORE_WIDTH));
        mPaint.setAlpha(STORE_CIRCLE_ALPHA);
        canvas.drawCircle(centerX, centerY, mRadius, mPaint);

        mPaint.setAlpha(ALPHA_255);
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        ballX = centerX + mRadius * (float) Math.cos(Math.toRadians(DEFAULT_BALL_START_ANGLE + mValueAnimator * DEGREE_360));
        ballY = centerY + mRadius * (float) Math.sin(Math.toRadians(DEFAULT_BALL_START_ANGLE + mValueAnimator * DEGREE_360));

        canvas.drawCircle(ballX,ballY,dip2px(DEFAULT_BALL_RADIUS),mPaint);
    }


    //开始动画
    public void startAnimator() {
        post(new Runnable() {
            @Override
            public void run() {
                ValueAnimator animator = ValueAnimator.ofFloat(0f, 1.0f);
                animator.setDuration(1000);
                animator.setInterpolator(new AccelerateDecelerateInterpolator());
                animator.setRepeatMode(ValueAnimator.RESTART);
                animator.setRepeatCount(ValueAnimator.INFINITE);
                animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        mValueAnimator = (float) animation.getAnimatedValue();

                        postInvalidate();
                    }
                });
                animator.start();
            }
        });
    }

源码地址

欢迎关注 自定义LoadingView大全