酷炫的日間夜間模式切換按鈕

前言

最近看到一個酷炫的日間夜間模式切換按鈕，因而就動手寫了仿寫了一個。
這裏是Github連接，歡迎star,fork...
PO上效果圖，錄製的不太好

主要的編寫思路

這裏主要是用屬性動畫中的ValueAnimator來產生具備一組有規律數字，而後主要繪製日間模式（雲朵跳動的效果），夜間模式（星星閃爍的效果，月亮逆向旋轉的效果），全局設計有四種固定的模式（SWITCH_ANIMATION_OFF, SWITCH_ANIMATION_ON, SWITCH_ON, SWITCH_OFF）分別對應着按鈕動畫關閉，按鈕動畫打開，打開，關閉，這幾種具體的狀態。

1、日間模式

主要分爲日間模式打開狀態。

private void drawSwitchOn(Canvas canvas) {
        float[] rectAttrs = compRoundRectAttr(SWITCH_OFF_POS);
        drawRoundRect(canvas, switchOnColor, rectAttrs);//按鈕主題的背景

        float[] ovalAttrs = compOvalAttr(SWITCH_ON_POS);
        drawOval(canvas, spotOnColor, ovalAttrs);//繪製太陽
        drawOvalIn(canvas, spotOnColorIn, ovalAttrs);
        drawCloud(canvas, 1);//繪製雲朵

        drawRoundRectStroke(canvas, DEFAULT_SWITCH_ON_COLOR_OUT);
    }

日間模式動畫打開狀態。

private void drawSwitchOnAnim(Canvas canvas) {
        float[] rectAttrs = compRoundRectAttr(SWITCH_OFF_POS);
        drawRoundRect(canvas, switchOnColor, rectAttrs);

        rectAttrs = compRoundRectAttr(currentPos);
        drawRoundRect(canvas, switchOffColor, rectAttrs);

        float[] ovalShadeOnAttrs = compRoundRectShadeOnAttr(currentPos * 3/2);
        float[] ovalAttrs = compOvalAttr(currentPos* 3/2);
        int color = compColor(currentPos, DEFAULT_SPOT_OFF_COLOR, DEFAULT_SPOT_ON_COLOR);
        int colorIn = compColor(currentPos, DEFAULT_SPOT_OFF_COLOR_IN, DEFAULT_SPOT_ON_COLOR_IN);
        drawRoundRect(canvas, color, ovalShadeOnAttrs);
        drawOval(canvas, color, ovalAttrs);
        drawOvalIn(canvas, colorIn, ovalAttrs);
        if(currentPos > 0.6) {
            drawCloud(canvas, currentPos);//雲朵的動態效果
        }

        int strokeColor = compColor(currentPos, DEFAULT_SWITCH_OFF_COLOR_OUT, DEFAULT_SWITCH_ON_COLOR_OUT);
        drawRoundRectStroke(canvas, strokeColor);
    }

2、夜間模式

主要分爲夜間模式打開狀態。

float[] rectAttrs = compRoundRectAttr(SWITCH_OFF_POS);
        drawRoundRect(canvas, switchOffColor, rectAttrs);

        float[] ovalAttrs = compOvalAttr(SWITCH_OFF_POS);
        drawOval(canvas, spotOffColor,  ovalAttrs);
        drawOvalIn(canvas, spotOffColorIn, ovalAttrs);
        drawCircleDot(canvas, spotOffColor, spotOffColorIn, 1, ovalAttrs);
        drawCircleDot2(canvas, spotOffColor, spotOffColorIn, 1, ovalAttrs);//繪製月亮上的原點
        drawCircleDot3(canvas, spotOffColor, spotOffColorIn, 1, ovalAttrs);//繪製月亮上的原點
        drawStar(canvas, DEFAULT_SPOT_OFF_COLOR_IN, 1);//繪製星星

        drawRoundRectStroke(canvas, DEFAULT_SWITCH_OFF_COLOR_OUT);

主要分爲夜間模式動畫打開狀態。

float[] rectAttrs = compRoundRectAttr(SWITCH_OFF_POS);
        if (currentPos != 1) {
            drawRoundRect(canvas, switchOffColor, rectAttrs);
        }
        //夜間模式的背景
        rectAttrs = compRoundRectAttr(1 - currentPos);
        drawRoundRect(canvas, switchOffColor, rectAttrs);

        float[] ovalAttrs;
        if(currentPos > 2.0/3){
            ovalAttrs = compOvalAttr(0);
        }else{
            ovalAttrs = compOvalAttr(1 - currentPos * 3/2);
        }
        float[] ovalShadeOffAttrs = compRoundRectShadeOffAttr(1 - currentPos * 3/2);
        int color = compColor(currentPos, DEFAULT_SPOT_ON_COLOR, DEFAULT_SPOT_OFF_COLOR);
        int colorIn = compColor(currentPos, DEFAULT_SPOT_ON_COLOR_IN, DEFAULT_SPOT_OFF_COLOR_IN);
        drawRoundRect(canvas, color, ovalShadeOffAttrs);
        drawOval(canvas, color, ovalAttrs);
        drawOvalIn(canvas, colorIn, ovalAttrs);
        drawCircleDot(canvas, DEFAULT_SPOT_OFF_COLOR, DEFAULT_SPOT_OFF_COLOR_IN, currentPos, ovalAttrs);//繪製月亮上的動態旋轉的原點
        drawCircleDot2(canvas, DEFAULT_SPOT_OFF_COLOR, DEFAULT_SPOT_OFF_COLOR_IN, currentPos, ovalAttrs);
        drawCircleDot3(canvas, DEFAULT_SPOT_OFF_COLOR, DEFAULT_SPOT_OFF_COLOR_IN, currentPos, ovalAttrs);
        if(currentPos > 0.6) {
            drawStar(canvas, DEFAULT_SPOT_OFF_COLOR_IN, currentPos);//繪製閃爍的星星
        }

        int strokeColor = compColor(currentPos, DEFAULT_SWITCH_ON_COLOR_OUT, DEFAULT_SWITCH_OFF_COLOR_OUT);
        drawRoundRectStroke(canvas, strokeColor);

最後

具體的代碼見個人Github，先寫這麼多，有空再來繼續補全文章。這裏是Github連接，歡迎star,fork...謝謝