美文网首页AndroidView
Android 加载笑脸/哭脸动画

Android 加载笑脸/哭脸动画

作者: 青青河边踩 | 来源:发表于2017-08-31 14:43 被阅读85次

    由于项目要求,需要写一个加载动画,正在加载的时候转圈,加载成功后出现笑脸,加载失败后出现哭脸,于是写了个自定义view,现在贴出来

    public class FaceView extends View {
        private int status = 0;//0 普通   1成功  2失败
        public static final int NORMAL = 0;
        public static final int SUCCESS = 1;
        public static final int FAILED = 2;
        /**
         * 画笔对象的引用
         */
        private Paint paintArc;
    
    
        private Paint paintRing;//圆环
    
    
        private Paint paintEye; //眼睛
    
        private Paint paintMouth;//嘴巴
    
        /**
         * 圆环的颜色
         */
        private int roundColor;
    
        /**
         * 圆环进度的颜色
         */
        private int roundProgressColor;
    
        /**
         * 圆环的宽度
         */
        private float roundWidth;
    
    
        /**
         * 最大进度
         */
        private int max;
    
        /**
         * 当前进度
         */
        private int progress = 0;
    
        private boolean finish = false;
    
    
        private int eyeRadius = 1;
    
        private long maxTimer = 10;
    
        private int mActionHeartbeat = 1 ;
    
        private CountdownTimerListener mListener;
    
    
        public FaceView(Context context) {
            this(context, null);
        }
    
        public FaceView(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public FaceView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            paintRing = new Paint();
            paintArc = new Paint();
            paintEye = new Paint();
            paintMouth = new Paint();
    
    
            TypedArray mTypedArray = context.obtainStyledAttributes(attrs,
                    com.qeebike.map.R.styleable.FaceView);
    
            //获取自定义属性和默认值
            roundColor = mTypedArray.getColor(com.qeebike.map.R.styleable.FaceView_roundColor, Color.RED);
            roundProgressColor = mTypedArray.getColor(com.qeebike.map.R.styleable.FaceView_roundProgressColor, Color.GREEN);
            roundWidth = mTypedArray.getDimension(com.qeebike.map.R.styleable.FaceView_roundWidth, 5);
            max = mTypedArray.getInteger(com.qeebike.map.R.styleable.FaceView_max, 100);
    
    
            maxTimer  = AppBaseConfigManager.getInstance().getmAppBaseConfigInfo().getBaseInfo().getUnlockTimeOut();
            mTypedArray.recycle();
        }
    
    
        private void initPaint() {
    
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
    
            /**
             * 画最外层的大圆环
             */
            int centre = getWidth() / 2; //获取圆心的x坐标
            int quarter = getWidth() / 4;
            int third = getWidth() / 3;
            int radius = (int) (centre - roundWidth / 2); //圆环的半径
    
    
            paintRing.setColor(roundColor); //设置圆环的颜色
            paintRing.setStyle(Paint.Style.STROKE); //设置空心
            paintRing.setStrokeWidth(roundWidth); //设置圆环的宽度
            paintRing.setAntiAlias(true);  //消除锯齿
    
            paintArc.setColor(roundColor); //设置圆环的颜色
            paintArc.setStyle(Paint.Style.STROKE); //设置空心
            paintArc.setStrokeWidth(roundWidth); //设置圆环的宽度
            paintArc.setAntiAlias(true);  //消除锯齿
            paintArc.setStrokeCap(Paint.Cap.ROUND);
    
    
    
            if (status == FAILED) {
                paintArc.setColor(roundColor);  //设置进度的颜色
            } else {
                paintArc.setColor(roundProgressColor);  //设置进度的颜色
            }
    
            if (status == FAILED) {
                paintEye.setColor(roundColor);
            } else {
                paintEye.setColor(roundProgressColor);
            }
            paintEye.setStyle(Paint.Style.FILL);
            paintEye.setAntiAlias(true);
    
    
            if (status == FAILED) {
                paintMouth.setColor(roundColor);
            } else {
                paintMouth.setColor(roundProgressColor);
            }
            paintMouth.setStyle(Paint.Style.STROKE); //设置空心
            paintMouth.setStrokeWidth(roundWidth/2); //设置圆环的宽度
            paintMouth.setAntiAlias(true);
            paintMouth.setStrokeCap(Paint.Cap.ROUND);
    
    
    
            //设置进度是实心还是空心
            RectF oval = new RectF(centre - radius, centre - radius, centre
                    + radius, centre + radius);  //用于定义的圆弧的形状和大小的界限
    
    
            RectF ovalMouthSuccess = new RectF((float) (centre - radius * 0.75), (float) (centre - radius * 0.70),
                    (float) (centre + radius * 0.70), (float) (centre + radius * 0.75));
    
    
            RectF ovalMouthFailed = new RectF(centre - (int)(radius *0.65), (int)(centre+ radius*0.35),
                    centre + (int)(radius *0.65), getWidth());
    
            int current = 360 * progress / max;
    //        int current = 270;
            if (status == NORMAL) {
                if (current >= 270) {
                    canvas.drawArc(oval, current - 270, 270, false, paintArc);
                } else {
                    canvas.drawArc(oval, 0, current, false, paintArc);  //根据进度画圆弧
                }
    
                postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        progress++;
                        postInvalidate();
    
                    }
                }, 1);
            } else if (status == SUCCESS) {
                canvas.drawCircle(centre, centre, radius, paintRing); //画出圆环
                canvas.drawArc(oval, 0, 360, false, paintArc);
    
                canvas.drawCircle(quarter, third, eyeRadius, paintEye);
                canvas.drawCircle(getWidth() - quarter, third, eyeRadius, paintEye);
    
                canvas.drawArc(ovalMouthSuccess, 0, 10 * eyeRadius, false, paintMouth);
                if (!finish) {
                    postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            eyeRadius++;
                            if (eyeRadius == 18) {
                                finish = true;
                            }
                            postInvalidate();
    
                        }
                    }, 1);
    
                }
    
            } else if (status == FAILED) {
                canvas.drawCircle(centre, centre, radius, paintRing); //画出圆环
                canvas.drawArc(oval, 0, 360, false, paintArc);
    
                canvas.drawCircle(quarter, third, eyeRadius, paintEye);
                canvas.drawCircle(getWidth() - quarter, third, eyeRadius, paintEye);
    
                canvas.drawArc(ovalMouthFailed, -160, (float) (eyeRadius * 7.777777), false, paintMouth);
                if (!finish) {
                    postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            eyeRadius++;
                            if (eyeRadius == 18) {
                                finish = true;
                            }
                            postInvalidate();
    
                        }
                    }, 1);
    
                }
    
            }
    
    
        }
    
    
        public void setStatus(int status1) {
            this.status = status1;
            if (status1 == SUCCESS) {
                postInvalidate();
            } else if (status1 == FAILED) {
                paintMouth.setColor(roundColor);
                paintArc.setColor(roundColor);
                paintEye.setColor(roundColor);
            }
    
        }
    
    
        public void reset() {
            maxTimer  = AppBaseConfigManager.getInstance().getmAppBaseConfigInfo().getBaseInfo().getUnlockTimeOut();
            status = NORMAL;
            progress = 1000;
            eyeRadius = 1;
            postInvalidate();
            finish = false;
    
            mHandler.sendEmptyMessage(mActionHeartbeat);
        }
    
        /**
         * 设置进度的最大值
         *
         * @param max
         */
        public synchronized void setMax(int max) {
            if (max < 0) {
                throw new IllegalArgumentException("max not less than 0");
            }
            this.max = max;
        }
    
        public void setmListener(CountdownTimerListener mListener) {
            this.mListener = mListener;
        }
    
        public interface CountdownTimerListener{
            //倒计时是否到达
            public void onTimeArrive(boolean isArrive);
        }
    
        private Handler mHandler = new Handler() {
    
            public void handleMessage(android.os.Message msg) {
                if(msg.what == mActionHeartbeat){
    
                    maxTimer = maxTimer - 1000;
                    if (maxTimer > 0) {
                        mHandler.sendEmptyMessageDelayed(mActionHeartbeat,1000);
                    }else{
                        setStatus(FAILED);
                        if(mListener!=null){
                            mListener.onTimeArrive(false);
                        }
                    }
                }
            };
        };
    }
    

    自定义属性

    
        <declare-styleable name="FaceView">
            <!--圆环底色-->
            <attr name="roundColor" format="color" />
            <!--圆环进度色-->
            <attr name="roundProgressColor" format="color" />
            <!--圆环宽度-->
            <attr name="roundWidth" format="dimension"></attr>
            <!--最大进度-->
            <attr name="max" format="integer"></attr>
    
        </declare-styleable>
    

    使用
    1、XML

        <***.FaceView
            android:id="@id/loading_view"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:layout_gravity="center"
            app:roundProgressColor="@color/colorPrimary"
            app:roundWidth="8dp"
            app:roundColor="@color/text_gray_normal"
            />
    

    2、Java

    mFaceView= (FaceView) view.findViewById(R.id.loading_view);
    //开始动画
    mFaceView.reset();
    //加载成功
    mFaceView.setStatus(FaceView.SUCCESS);
    //加载失败
    mFaceView.setStatus(FaceView.FAILED);
    

    效果展示(静图展示三种状态的样式,实则是动态动画)

    91CA375B-BC75-4DDE-B00C-33636AC94DE5.png AEEADCC4-C65E-49D2-AC8E-21EE27B0F9DB.png FA5F30C4-0DDB-434E-8B6F-D857C2698A51.png

    相关文章

      网友评论

        本文标题:Android 加载笑脸/哭脸动画

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