Android 加載笑臉/哭臉動(dòng)畫

由于項(xiàng)目要求,需要寫一個(gè)加載動(dòng)畫,正在加載的時(shí)候轉(zhuǎn)圈,加載成功后出現(xiàn)笑臉,加載失敗后出現(xiàn)哭臉,于是寫了個(gè)自定義view,現(xiàn)在貼出來

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;
    /**
     * 畫筆對(duì)象的引用
     */
    private Paint paintArc;


    private Paint paintRing;//圓環(huán)


    private Paint paintEye; //眼睛

    private Paint paintMouth;//嘴巴

    /**
     * 圓環(huán)的顏色
     */
    private int roundColor;

    /**
     * 圓環(huán)進(jìn)度的顏色
     */
    private int roundProgressColor;

    /**
     * 圓環(huán)的寬度
     */
    private float roundWidth;


    /**
     * 最大進(jìn)度
     */
    private int max;

    /**
     * 當(dāng)前進(jìn)度
     */
    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);

        //獲取自定義屬性和默認(rèn)值
        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);

        /**
         * 畫最外層的大圓環(huán)
         */
        int centre = getWidth() / 2; //獲取圓心的x坐標(biāo)
        int quarter = getWidth() / 4;
        int third = getWidth() / 3;
        int radius = (int) (centre - roundWidth / 2); //圓環(huán)的半徑


        paintRing.setColor(roundColor); //設(shè)置圓環(huán)的顏色
        paintRing.setStyle(Paint.Style.STROKE); //設(shè)置空心
        paintRing.setStrokeWidth(roundWidth); //設(shè)置圓環(huán)的寬度
        paintRing.setAntiAlias(true);  //消除鋸齒

        paintArc.setColor(roundColor); //設(shè)置圓環(huán)的顏色
        paintArc.setStyle(Paint.Style.STROKE); //設(shè)置空心
        paintArc.setStrokeWidth(roundWidth); //設(shè)置圓環(huán)的寬度
        paintArc.setAntiAlias(true);  //消除鋸齒
        paintArc.setStrokeCap(Paint.Cap.ROUND);



        if (status == FAILED) {
            paintArc.setColor(roundColor);  //設(shè)置進(jìn)度的顏色
        } else {
            paintArc.setColor(roundProgressColor);  //設(shè)置進(jìn)度的顏色
        }

        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); //設(shè)置空心
        paintMouth.setStrokeWidth(roundWidth/2); //設(shè)置圓環(huán)的寬度
        paintMouth.setAntiAlias(true);
        paintMouth.setStrokeCap(Paint.Cap.ROUND);



        //設(shè)置進(jìn)度是實(shí)心還是空心
        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);  //根據(jù)進(jìn)度畫圓弧
            }

            postDelayed(new Runnable() {
                @Override
                public void run() {
                    progress++;
                    postInvalidate();

                }
            }, 1);
        } else if (status == SUCCESS) {
            canvas.drawCircle(centre, centre, radius, paintRing); //畫出圓環(huán)
            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); //畫出圓環(huán)
            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);
    }

    /**
     * 設(shè)置進(jìn)度的最大值
     *
     * @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{
        //倒計(jì)時(shí)是否到達(dá)
        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">
        <!--圓環(huán)底色-->
        <attr name="roundColor" format="color" />
        <!--圓環(huán)進(jìn)度色-->
        <attr name="roundProgressColor" format="color" />
        <!--圓環(huán)寬度-->
        <attr name="roundWidth" format="dimension"></attr>
        <!--最大進(jìn)度-->
        <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);
//開始動(dòng)畫
mFaceView.reset();
//加載成功
mFaceView.setStatus(FaceView.SUCCESS);
//加載失敗
mFaceView.setStatus(FaceView.FAILED);

效果展示(靜圖展示三種狀態(tài)的樣式,實(shí)則是動(dòng)態(tài)動(dòng)畫)

91CA375B-BC75-4DDE-B00C-33636AC94DE5.png
AEEADCC4-C65E-49D2-AC8E-21EE27B0F9DB.png
FA5F30C4-0DDB-434E-8B6F-D857C2698A51.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,716評(píng)論 25 709
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,022評(píng)論 4 61
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點(diǎn)贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 47,133評(píng)論 22 665
  • 男人只有在認(rèn)為自己很糟的情況下才會(huì)擺出男女有別的姿態(tài)把女人割裂出去,生怕女人們搶了自己的地盤,自己變的一無是處。
    核桃慈海閱讀 513評(píng)論 0 0
  • 43分鐘的keep 1份大雞排(沒有管住嘴) 晚飯一杯粥2個(gè)素包子 看了電影《天才槍手》 晚上0點(diǎn)50睡覺
    起名是個(gè)技術(shù)活閱讀 506評(píng)論 0 0

友情鏈接更多精彩內(nèi)容