Android 用Canvas輕松繪制一個時鐘

接下來這篇文章主要是結束如何輕松自定義一個View并使用Canvas繪制一個時鐘的案例，話不多說先上圖瞅瞅，一共實作了兩種效果，一種是秒動（秒針一秒走一針）、另一種是連動式的，秒針不會停會一直走動，話不多說，先看看下面兩張效果圖，


好了上面的圖就是目前兩種效果，純原生代碼實作，思路也比較簡單，根據Canvas繪制一個紫色圓形背景、然后繪制刻度尺、接著繪制時針、分針、秒針，其中主要的是時分秒三個指標是如何轉動的，下面來說說具體思路，
##1、繪制表盤
首先我們先來簡單看一下如何繪制表盤，因為這里比較簡單，我們直接上代碼看一下就能明白，

//繪制紫色背景
private void drawClockBg(Canvas canvas) {
        mClockBgPaint.setStyle(Paint.Style.FILL);
        mClockBgPaint.setColor(0xFF6200EE);
        canvas.drawCircle(
                mWidth / 2f,
                mHeight / 2f,
                centerPoint - marginOffset,
                mClockBgPaint
        );
    }
//繪制刻度尺
 private void drawScaleLine(Canvas canvas) {
        canvas.save();
        //回圈繪制刻度線
        for (int i = 0; i < 60; i++) {
            canvas.drawLine(
                    centerPoint,
                    marginOffset,
                    centerPoint,
                    (i % 5 == 0) ? mScaleLongSize : mScaleSize,
                    mClockScalePaint
            );
            canvas.rotate(CLockUtils.CLOCK_CYCLE / CLockUtils.CLOCK_SCALE_SIZE,
                    Math.min(mWidth, mHeight) / 2f,
                    Math.min(mWidth, mHeight) / 2f);
        }
        canvas.restore();
    }

這里非常的簡單刻度主要回圈旋轉畫布繪制每秒鐘/分鐘的刻度，其中小時刻度會比分鐘/秒鐘刻度稍長一些，然后就是繪制重要知識點，就是此處使用了canvas.save & canvas.restore()其主要作用是為了不影響其它畫布的繪制，

canvas.save 保存當前矩陣和剪輯到一個私有堆疊，后續呼叫轉換、縮放、旋轉、傾斜、concat或clipRect，clipPath將所有操作照常，這里直白點理解可以理解為把先前畫布的效果存起來然后再作畫，繪制不會影響先前的畫布狀態，
canvas.restore() 恢復畫布先前保存的狀態，

##2繪制時針、分針、秒針
刻度繪制完后我們接下來需要開始繪制時針、分針、秒針了，這三根指標的繪制操作其實是一致的包括旋轉，這里為了減少代碼冗余，抽出公共方法來處理，只不過他們繪制的畫筆引數以及旋轉角度等引數不同，我們來看下代碼，

//繪制時針、分鐘、秒針的公共方法
 private void drawPointer(Canvas canvas, float degress, float startX, float startY,
                             float stopX, float stopY, @androidx.annotation.NonNull Paint paint) {
        //保存畫布當前狀態
        canvas.save();
        //旋轉秒針畫布
        canvas.rotate(degress, centerPoint, centerPoint);
        //繪制秒針
        canvas.drawLine(startX, startY, stopX, stopY, paint);
        //恢復畫布狀態
        canvas.restore();
    }

這里也非常好理解，代碼也做了精剪，這里并非主要的邏輯,這里僅僅是根據傳入的角度degress來控制旋轉角度，主要邏輯是如何使指標轉動起來并且是準確的轉動，這里是通過自己計算后得來的，具體對代碼做了詳細的注釋，來上代碼：

//根據時間計算時針、分針、秒針的旋轉角度
    private void calculateDegrees() {
        minuteDegrees = 0;
        hourDegrees = 0;

        //獲取當前小時數
        //當前小時數
        int currentHour = Calendar.getInstance().get(Calendar.HOUR);
        //獲取當前分鐘數
        //當前分鐘數
        int currentMinute = Calendar.getInstance().get(Calendar.MINUTE);
        //計算分針旋轉的角度（當前分鐘數 / 刻度數60° * 周期數360°）
        minuteDegrees = currentMinute / CLockUtils.CLOCK_SCALE_SIZE * CLockUtils.CLOCK_CYCLE;
        //根據分針旋轉角度，計算時針偏移量（分鐘旋轉角度 / 周期數360° * 一小時間隔角度30°） + (一小時間隔角度30° * 當前小時數)
        float minutesDegressOffset = (minuteDegrees / CLockUtils.CLOCK_CYCLE * 30) + (30 * currentHour);
        //計算時針旋轉的角度（當前小時數 / 一周小時總數12小時 / 一周刻度數60 * 周期數360° + 分鐘偏移量）
        hourDegrees = currentHour / CLockUtils.CLOCK_HOURS_SIZE /
                CLockUtils.CLOCK_SCALE_SIZE * CLockUtils.CLOCK_CYCLE + minutesDegressOffset;

        //獲取當前秒數
        currentSecond = Calendar.getInstance().get(Calendar.SECOND);
        //計算秒針旋轉的角度（當前秒數/刻度數60°/周期數360°）
        secondDegrees = currentSecond / CLockUtils.CLOCK_SCALE_SIZE * CLockUtils.CLOCK_CYCLE;
    }

這里的計算邏輯稍微復雜一些簡單來說一下邏輯這里以秒動模式為例，首先秒針轉動每秒轉動一個刻度，總共60個刻度，那么獲取當前秒數 / 刻度數60 / 一周是360度得出每秒的角度，分鐘也是同樣的邏輯，根據分鐘數來計算，這里比較復雜的是時針的角度了，首先計算分鐘的角度（當前分鐘數 / 刻度數60° * 周期數360°），

然后由于分針轉動一周，時針轉動的角度是一個大刻度也就是比如現在是3點，時針指向3的刻度，如果分針轉動一周就是4點鐘，那么3-4就是一個大刻度就是30度角，那么此時根據分針旋轉角度，計算時針偏移量（分鐘旋轉角度 / 周期數360° * 一小時間隔角度30°） + (一小時間隔角度30° * 當前小時數)，這個偏移量就好比假設分針從0刻度就是12點這個刻度位置走到了3點半的刻度，其實時針是會有轉動的，不會繼續停留在3的刻度，而是3-4之間，這個偏移量就是計算時針走了多少的，最后根據我自己思考的出的公式，計算時針旋轉的角度（當前小時數 / 一周小時總數12小時 / 一周刻度數60 * 周期數360° + 分鐘偏移量），這里也是花了比較多的時間來思考的，也是主要的演算法邏輯，看不懂的小伙伴可以多看幾遍或者自己上手敲一敲，或者跟一下我的代碼，

##3執行轉動（秒動還是連動）
這里處理指標轉動主要是基于Android的訊息機制，使用Handler間隔1000ms來發送訊息（這是秒動邏輯），連動則是根據當前秒數與60s的時間差來，然后通過屬性影片ValueAnimator來做秒針影片，下面來看下代碼你就明白了，

//旋轉指標
    private void rotatePointer() {
        calculateDegrees();
        //秒動
        if (isSecondAnimator) {
            invalidate();
            mHandler.postDelayed(mClockRunnable, DELAYM_ILLIS);
            return;
        }
        //非秒動
        long delayMillts = DELAYM_ILLIS * (60 - currentSecond);
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(secondDegrees, CLockUtils.CLOCK_CYCLE);
        valueAnimator.setDuration(delayMillts);
        valueAnimator.setInterpolator(null);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                secondDegrees = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.start();
        mHandler.postDelayed(mClockRunnable, delayMillts);
    }

秒動大家都能理解就是一秒鐘發一次訊息，請求繪制一下即可，連動比較復雜，是根據獲取的當前秒數與60做差值然后乘1000ms得來的，例如現在打開時鐘控制元件頁面，此時的秒數是45s，那么秒針初始化位置是45s的位置，那么走完60s就只剩15s的時間了，所以這里的delayMillts就是當前秒數與60s的差值，然后做影片即可，

家人們邏輯說到這里基本上就說完了，這里代碼都是一片段的形式附上的，具體代碼我已經上傳到github上了，有興趣的小伙伴可以checkout了解一下，
GitHub鏈接>>>點擊跳轉
家人們覺得不錯的話，github給個star哈，感恩！