美文网首页
一个简单的加载动画(一)

一个简单的加载动画(一)

作者: Wang_Yi | 来源:发表于2016-09-23 13:28 被阅读192次

    最终效果,这个动画是在花瓣上看到的,主要是实现动画,
    代码还有优化的地方懒得做了。什么时候用到这个再来封装下。


        /**
         * 一个简单的加载动画
         */
        public class LoadingView extends View {
            /**
             * 三个外圈圆的背景色
             */
            private int leftCircleColor = Color.parseColor("#e83939");
            private int centerColor = Color.parseColor("#70c7d4");
            private int rightColor = Color.parseColor("#FF4081");
            /**
             * 控件宽高
             */
            private int mWidth;
            private int mHeight;
            /**
             * 三个外圈圆的半径和padding
             */
            private int circleRadius;
            private int circlePadding;
            /**
             * 左右圆动画的最大和最小半径
             */
            private int leftAndRightMaxRadius;
            private int leftAndRightMinRadius;
            private int leftInsideRadius;
            private int rightInsideRadius;
            /**
             * 中心圆动画的最大半径
             */
            private int centerMaxRadius;
            private int centerMinRadius;
            private int centerInsideRadius;
            /**
             * 值动画是否正在播放
             */
            private boolean animPlaying;
    
            public LoadingView(Context context) {
                super(context);
                init(null);
            }
    
            public LoadingView(Context context, AttributeSet attrs) {
                super(context, attrs);
                init(attrs);
            }
    
            public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
                super(context, attrs, defStyleAttr);
                init(attrs);
            }
    
            private void init(AttributeSet attrs) {
                circleRadius = dip2px(15);
                circlePadding = dip2px(50);
                leftAndRightMaxRadius = dip2px(9);
                leftAndRightMinRadius = dip2px(3);
                centerMaxRadius = dip2px(12);
                centerMinRadius = dip2px(6);
            }
    
            @Override
            protected void onDraw(Canvas canvas) {
                super.onDraw(canvas);
                if (mWidth == 0 || mHeight == 0)
                    return;
                //画左边外圈
                Paint leftOutSideCircle = new Paint();
                leftOutSideCircle.setColor(leftCircleColor);
                leftOutSideCircle.setAntiAlias(true);
                canvas.drawCircle(mWidth / 2 - circlePadding, mHeight / 2, circleRadius, leftOutSideCircle);
                //画中心外圈圆
                Paint centerOutSidePaint = new Paint();
                centerOutSidePaint.setAntiAlias(true);
                centerOutSidePaint.setColor(centerColor);
                canvas.drawCircle(mWidth / 2, mHeight / 2, circleRadius, centerOutSidePaint);
                //画右边外圈圆
                Paint rightOutSidePaint = new Paint();
                rightOutSidePaint.setColor(rightColor);
                rightOutSidePaint.setAntiAlias(true);
                canvas.drawCircle(mWidth / 2 + circlePadding, mHeight / 2, circleRadius, rightOutSidePaint);
                //值动画播放完成继续开始重新播放
                if (!animPlaying) {
                    startAnim();
                    animPlaying = true;
                }
                //左边中心圆
                Paint leftInSideCircle = new Paint();
                leftInSideCircle.setColor(Color.WHITE);
                leftInSideCircle.setAntiAlias(true);
                canvas.drawCircle(mWidth / 2 - circlePadding, mHeight / 2, leftInsideRadius, leftInSideCircle);
                //中间中心圆
                Paint centerInSidePaint = new Paint();
                centerInSidePaint.setAntiAlias(true);
                centerInSidePaint.setColor(Color.WHITE);
                canvas.drawCircle(mWidth / 2, mHeight / 2, centerInsideRadius, centerInSidePaint);
                //右边中心圆
                Paint rightInSidePaint = new Paint();
                rightInSidePaint.setColor(Color.WHITE);
                rightInSidePaint.setAntiAlias(true);
                canvas.drawCircle(mWidth / 2 + circlePadding, mHeight / 2, rightInsideRadius, rightInSidePaint);
            }
    
            private void startAnim() {
                final ValueAnimator mValueAnim = ValueAnimator.ofInt(1);
                mValueAnim.setInterpolator(new LinearInterpolator());
                mValueAnim.setDuration(800);
                mValueAnim.addListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animator) {
                    }
    
                    @Override
                    public void onAnimationEnd(Animator animator) {
                        int tempA = centerMinRadius;
                        centerMinRadius = centerMaxRadius;
                        centerMaxRadius = tempA;
                        int tempB = leftAndRightMaxRadius;
                        leftAndRightMaxRadius = leftAndRightMinRadius;
                        leftAndRightMinRadius = tempB;
                        animPlaying = false;
                        invalidate();
                    }
    
                    @Override
                    public void onAnimationCancel(Animator animator) {
                    }
    
                    @Override
                    public void onAnimationRepeat(Animator animator) {
                    }
                });
                mValueAnim.setRepeatMode(ValueAnimator.RESTART);
                mValueAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator valueAnimator) {
                        float fraction = mValueAnim.getAnimatedFraction();
                        centerInsideRadius = evaluate(fraction, centerMaxRadius, centerMinRadius);
                        leftInsideRadius = evaluate(fraction, leftAndRightMinRadius, leftAndRightMaxRadius);
                        rightInsideRadius = evaluate(fraction, leftAndRightMaxRadius, leftAndRightMinRadius);
                        Log.i("===TAG===", "centerInsideRadius-" + centerInsideRadius + "leftInsideRadius-" + leftInsideRadius + "rightInsideRadius-" + rightInsideRadius);
                        invalidate();
                    }
                });
                mValueAnim.start();
            }
    
            public int evaluate(float fraction, int startValue, int endValue) {
                return (int) (startValue + fraction * (endValue - startValue));
            }
    
            @Override
            protected void onSizeChanged(int w, int h, int oldw, int oldh) {
                super.onSizeChanged(w, h, oldw, oldh);
                mWidth = w;
                mHeight = h;
            }
    
            public int dip2px(float dpValue) {
                final float scale = getContext().getResources().getDisplayMetrics().density;
                return (int) (dpValue * scale + 0.5f);
            }
        }
    

    相关文章

      网友评论

          本文标题:一个简单的加载动画(一)

          本文链接:https://www.haomeiwen.com/subject/cuutyttx.html