Android原生繪圖之炫酷倒數計時

張風捷特烈發表於2019-03-04

零、前言

1.本篇原型是慕課網的教程，但是用JavaScript實現在瀏覽器上的，詳見
2.最近感覺安卓Canvas不比html5的canvas差，使用想復刻一下到Android上
3.本篇並不止於教程，而是以知其所以然來運用字元點陣及動效，這也是從JavaScript移植到安卓的必要條件
4.本篇會深入地分析整體思路與邏輯，為大家提供一種canvas繪製的思路，相信會給你帶來收穫。

最終效果

一、字元的點陣顯示

第一個問題是如何字元的點陣顯示，以及點陣形狀的自定義：效果如下：

1.從`1`開始分析:先看一個陣列：

/**
 * 用來顯示點陣的二維陣列
 */
public static final int[][] digit_test = new int[][]
        {
                {0, 0, 0, 1, 1, 0, 0},
                {0, 1, 1, 1, 1, 0, 0},
                {0, 0, 0, 1, 1, 0, 0},
                {0, 0, 0, 1, 1, 0, 0},
                {0, 0, 0, 1, 1, 0, 0},
                {0, 0, 0, 1, 1, 0, 0},
                {0, 0, 0, 1, 1, 0, 0},
                {0, 0, 0, 1, 1, 0, 0},
                {0, 0, 0, 1, 1, 0, 0},
                {1, 1, 1, 1, 1, 1, 1}
        };//1
複製程式碼

/**
 * 顏色陣列
 */
public static final int[] colors = new int[]{
        0xff33B5E5, 0xff0099CC, 0xffAA66CC, 0xff9933CC,
        0xff99CC00, 0xff669900, 0xffFFBB33, 0xffFF8800, 0xffFF4444, 0xffCC0000};
複製程式碼

如果你高度散光，估計能一眼看出來些什麼，看不出來的話，看下圖：
你也許會說：暈，這麼簡單粗暴。—-沒錯，就是這麼粗暴

2.其實分析出來也不麻煩

就是二維陣列一行一行遍歷，遇到1就畫圖形，這裡是圓形，你可以自己畫任意的形狀
補充一下，這裡的1和0都是自定義的標示符，你可以任意,但繪製的邏輯也要同步修改

private void renderDigitTest(Canvas canvas) {
    for (int i = 0; i < Cons.digit_test.length; i++) {
        for (int j = 0; j < Cons.digit_test[j].length; j++) {//一行一行遍歷，遇到1就畫
            if (Cons.digit_test[i][j] == 1) {
                canvas.save();
                float rX = (j * 2 + 1) * (mRadius + 1);//第(i，j)個點圓心橫座標
                float rY = (i * 2 + 1) * (mRadius + 1);//第(i，j)個點圓心縱座標
                canvas.translate(rX, rY);
                canvas.drawCircle(rX, rY, mRadius, mPaint);//畫圓
                int color = Cons.colors[(int) (Math.random() * Cons.colors.length)];
                mPaint.setColor(color);
                canvas.restore();
            }
        }
    }
}
複製程式碼

3.如何多個數字呢?

上古有道，道生一，一生二，會一個自然第二個也就不遠了
既然一個二維陣列可以表示一個數，那麼用一個三維陣列再成放10個二維陣列不就表示數字了嗎!
三維陣列太長了，也沒有什麼技術含量，貼這裡影響市容，放在文尾，自行拷貝。

4.數字0~9的渲染函式：(這裡就畫五角星吧，路徑繪製可詳見Path篇)

    /**
     *
     * @param pos 偏移量 x,y
     * @param num 要顯示的數字
     * @param canvas 畫布
     */
    private void renderDigit(PointF pos, int num, Canvas canvas) {
        for (int i = 0; i < Cons.digit[num].length; i++) {
            for (int j = 0; j < Cons.digit[num][j].length; j++) {
                if (Cons.digit[num][i][j] == 1) {
                    canvas.save();
                    float rX = pos.x + j * 2 * (mRadius + 1) + (mRadius + 1);//第(i，j)個點圓心橫座標
                    float rY = pos.y + i * 2 * (mRadius + 1) + (mRadius + 1);//第(i，j)個點圓心縱座標
                    canvas.translate(rX, rY);
                    Path path = CommonPath.nStarPath(5, mRadius, mRadius / 2);
                    int color = Cons.colors[(int) (Math.random() * Cons.colors.length)];
                    mPaint.setColor(color);
                    canvas.drawPath(path, mPaint);
                    canvas.restore();
                }
            }
        }
    }
複製程式碼

OnDraw()中：

canvas.save();
renderDigit( 1, canvas);
canvas.translate(150, 0);
renderDigit( 9, canvas);
canvas.translate(150, 0);
renderDigit(9, canvas);
canvas.translate(150, 0);
renderDigit(4, canvas);
canvas.restore();
複製程式碼

OK,第一步完成，萬事開頭難，理解之後，後面就很簡單了

二、靜態時間顯示與倒數計時：

1.靜態時間顯示

只要動態獲取時間即可，在onDraw中將時間解析成響應數字繪製出來，是不是很簡單

mCalendar = Calendar.getInstance();
int hour = mCalendar.get(Calendar.HOUR_OF_DAY);
int min = mCalendar.get(Calendar.MINUTE);
int sec = mCalendar.get(Calendar.SECOND);
canvas.save();
//繪製小時
renderDigit(hour / 10, canvas);
canvas.translate(17*mRadius, 0);
renderDigit(hour % 10, canvas);
//繪製冒號：
canvas.translate(17*mRadius, 0);
renderDigit(10, canvas);
//繪製分鐘
canvas.translate(11*mRadius, 0);
renderDigit(min / 10, canvas);
canvas.translate(17*mRadius, 0);
renderDigit(min % 10, canvas);
//繪製冒號：
canvas.translate(17*mRadius, 0);
renderDigit(10, canvas);
//繪製秒：
canvas.translate(11*mRadius, 0);
renderDigit(sec / 10, canvas);
canvas.translate(17*mRadius, 0);
renderDigit(sec % 10, canvas);
canvas.restore();
複製程式碼

通過Handler定時傳送訊息更新檢視：

倒數計時處理

//初始時設定截止日期
mCalendar = Calendar.getInstance();
mCalendar.set(2018, 11-1, 11, 21, 21, 21);
mDeadTime = mCalendar.getTimeInMillis();
//OnDraw中獲取之間的毫秒數，處理
mCalendar = Calendar.getInstance();
long lastSec = (mDeadTime - mCalendar.getTimeInMillis()) / 1000;//持續時間

int hour = (int) (lastSec / 3600);
int min = (int) (lastSec - hour * 3600) / 60;
int sec = (int) (lastSec % 60);
Log.d(TAG, "render: "+ hour+","+min+","+sec);
//接下來的和上面一樣
複製程式碼

4.重點：小球的運動

有點小複雜，簡單地畫了一個流程圖

先把小球封裝一下：

/**
 * 作者：張風捷特烈<br/>
 * 時間：2018/11/11 0011:6:13<br/>
 * 郵箱：1981462002@qq.com<br/>
 * 說明：小球封裝類
 */
public class Ball {
    public float a;//加速度
    public float vX;//速度X
    public float vY;//速度Y
    public float pX;//點位X
    public float pY;//點位Y
    public int color;//顏色
}

複製程式碼

準備工作

//成員變數
private int mRadius = 12;//半徑
private int mLimitY;//Y邊界
private final static int BALLS_VY = 15;//y方向速度
private final static int BALLS_ABS_VX = 20;//x方向速度數值
private final static float BALLS_A = 0.98f;//小球的加速度
private List<Ball> mBalls = new ArrayList<>();//小球集合
private long mDeadTime;//剩餘時間
private int mCurDeadTime;//當前剩餘時間
private Paint mPaint;
private Path mStarPath;

//初始化：init()
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStyle(Paint.Style.FILL);
mLimitY = winSize.y - 200;
Calendar calendar = Calendar.getInstance();
calendar.set(2018, 11 - 1, 11, 21, 21, 21);
mDeadTime = calendar.getTimeInMillis();
mCurDeadTime = getLifeSec();
複製程式碼

1.使用ValueAnimator不斷重繪介面

ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
animator.setRepeatCount(-1);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        update();
        invalidate();
    }
});
animator.start();
複製程式碼

2.小球集合的更新總函式

/**
 * 小球集合的更新總函式
 */
private void update() {
    addBalls();//新增小球
    updateBalls();//更新小球
}
複製程式碼

3.新增倒數計時中改動的點

核心是：判斷當前時間是否改變,再將點位放到集合中
這是要注意我繪製小球放在繪製秒的前面，所以根據繪製小球時的畫布原點，在加入是對小球的點位進行偏移

    /**
     * 新增倒數計時中改動的點
     */
    private void addBalls() {
        int nextSec = getLifeSec();
        int nextHours = nextSec / 3600;
        int nextMinutes = (nextSec - nextHours * 3600) / 60;
        int nextSeconds = nextSec % 60;

        int curHours = mCurDeadTime / 3600;
        int curMinutes = (mCurDeadTime - curHours * 3600) / 60;
        int curSeconds = mCurDeadTime % 60;

        if (nextSeconds != curSeconds) {//判斷當前時間是否改變,再將點位放到集合中
            if ((curHours / 10) != (nextHours / 10)) {
                addBalls((-17 * 5 - 11 * 2) * mRadius, curHours / 10);
            }
            if ((curHours % 10) != (nextHours % 10)) {
                addBalls((-17 * 4 - 11 * 2) * mRadius, curHours % 10);
            }
            if ((curMinutes / 10) != (nextMinutes / 10)) {
                addBalls((-17 * 3 - 11) * mRadius, curMinutes / 10);
            }
            if ((curMinutes % 10) != (nextMinutes % 10)) {
                addBalls((-17 * 2 - 11) * mRadius, curMinutes % 10);
            }
            if ((curSeconds / 10) != (nextSeconds / 10)) {
                addBalls(-17 * mRadius, curSeconds / 10);
            }
            if ((curSeconds % 10) != (nextSeconds % 10)) {
                addBalls(0, nextSeconds % 10);
            }
            mCurDeadTime = nextSec;
        }
    }

    /**
     * 新增小球的核心邏輯
     *
     * @param offsetX x方向偏移
     * @param num     改變的時間數字
     */
    private void addBalls(int offsetX, int num) {
        for (int i = 0; i < Cons.digit[num].length; i++) {
            for (int j = 0; j < Cons.digit[num][i].length; j++) {
                if (Cons.digit[num][i][j] == 1) {
                    Ball ball = new Ball();
                    ball.a = BALLS_A;
                    ball.vX = (float) (Math.pow(-1, Math.ceil(Math.random() * 1000)) * BALLS_ABS_VX * Math.random());
                    ball.vY = (float) (BALLS_VY * Math.random());
                    ball.pX = offsetX + j * 2 * (mRadius + 1) + (mRadius + 1);//第(i，j)個點圓心橫座標
                    ball.pY = i * 2 * (mRadius + 1) + (mRadius + 1);//第(i，j)個點圓心縱座標
                    ball.color = Cons.colors[(int) (Math.random() * Cons.colors.length)];
                    mBalls.add(ball);
                }
            }
        }
    }
複製程式碼

4.這裡是讓小球運動的核心：

更新所有球的位置—讓球運動,並且越界移除
根據速度和加速度的公式，每次重新整理的時間作為單位時間
安卓的ValueAnimator是0.167秒,由於程式碼的執行效率，會有一點偏差,大太多就會造成不流暢，即視覺卡頓

    /**
     * 更新所有球的位置---讓球運動
     * 並且越界移除
     */
    private void updateBalls() {
        int minX = (-17 * 5 - 11 * 2) * mRadius;//限定x範圍最小值
        int maxX = 400;//限定x範圍大值

        for (Ball ball : mBalls) {
            ball.pX += ball.vX;//x=xo+v*t
            ball.pY += ball.vY;
            ball.pY += ball.a;//v=vo+a*t

            if (ball.pY >= mLimitY - mRadius) {//超過Y底線，反彈
                ball.pY = mLimitY - mRadius;
                ball.vY = -ball.vY * 0.99f;
            }

            if (ball.pX > maxX) {//超過X最大值，反彈
                ball.pX = maxX - mRadius;
                ball.vX = -ball.vX * 0.99f;
            }
        }

        for (int i = 0; i < mBalls.size(); i++) {//刪除越界的點
            if (mBalls.get(i).pX + mRadius < minX || mBalls.get(i).pY + mRadius < 0
                    || mBalls.get(i).pX - mRadius > maxX) {
                mBalls.remove(i);
            }
        }
    }
複製程式碼

5.獲取倒數計時剩餘秒數

    /**
     * 獲取倒數計時剩餘秒數
     *
     * @return 倒數計時剩餘秒數
     */
    private int getLifeSec() {
        int life = Math.round((mDeadTime - System.currentTimeMillis()) / 1000);
        life = life > 0 ? life : 0;
        return life;
    }
複製程式碼

6.繪製的方法:

和上面比就多了個畫圓球的方法，把化數字的方法抽取了一下。


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int hour = getLifeSec() / 3600;
        int min = (getLifeSec() - hour * 3600) / 60;
        int sec = getLifeSec() % 60;
        canvas.save();
        //繪製小時
        drawHour(canvas, hour);
        //繪製冒號：
        drawDot(canvas);
        //繪製分鐘
        drawMin(canvas, min);
        //繪製冒號：
        drawDot(canvas);
        //繪製秒：
        drawSec(canvas, sec);
        canvas.restore();
    }
    
    /**
     * 繪製秒
     *
     * @param canvas
     * @param sec
     */
    private void drawSec(Canvas canvas, int sec) {
        canvas.translate(11 * mRadius, 0);
        drawBall(canvas);//繪製小球
        renderDigit(sec / 10, canvas);
        canvas.translate(17 * mRadius, 0);
        renderDigit(sec % 10, canvas);
    }

    /**
     * 繪製小球
     *
     * @param canvas
     */
    private void drawBall(Canvas canvas) {
        canvas.save();
        canvas.translate(17 * mRadius, 0);
        for (Ball ball : mBalls) {
            mPaint.setColor(ball.color);
            mPaint.setStyle(Paint.Style.FILL);
            canvas.drawCircle(ball.pX, ball.pY, mRadius, mPaint);
        }
        canvas.restore();
    }

    /**
     * 繪製分鐘
     * @param canvas
     * @param min
     */
    private void drawMin(Canvas canvas, int min) {
        canvas.translate(11 * mRadius, 0);
        renderDigit(min / 10, canvas);
        canvas.translate(17 * mRadius, 0);
        renderDigit(min % 10, canvas);
    }

    /**
     *  繪製冒號
     * @param canvas
     */
    private void drawDot(Canvas canvas) {
        canvas.translate(17 * mRadius, 0);
        renderDigit(10, canvas);
    }

    /**
     * 繪製小時
     * @param canvas
     * @param hour
     */
    private void drawHour(Canvas canvas, int hour) {
        renderDigit(hour / 10, canvas);
        canvas.translate(17 * mRadius, 0);
        renderDigit(hour % 10, canvas);
    }

    /**
     * 渲染數字
     * @param num    要顯示的數字
     * @param canvas 畫布
     */
    private void renderDigit(int num, Canvas canvas) {
        for (int i = 0; i < Cons.digit[num].length; i++) {
            for (int j = 0; j < Cons.digit[num][j].length; j++) {
                if (Cons.digit[num][i][j] == 1) {
                    canvas.save();
                    float rX = j * 2 * (mRadius + 1) + (mRadius + 1);//第(i，j)個點圓心橫座標
                    float rY = i * 2 * (mRadius + 1) + (mRadius + 1);//第(i，j)個點圓心縱座標
                    canvas.translate(rX, rY);
                    mPaint.setColor(Color.BLUE);
                    canvas.drawPath(mStarPath, mPaint);
                    canvas.restore();
                }
            }
        }
    }
複製程式碼

到這裡就OK了，是不是比想象中的要簡單

後記：捷文規範

1.本文成長記錄及勘誤表

專案原始碼	日期	備註
V0.1–無	2018-11-11	Android原生繪圖之炫酷倒數計時

2.更多關於我

筆名	QQ	微信	愛好
張風捷特烈	1981462002	zdl1994328	語言
我的github	我的簡書	我的CSDN	個人網站

3.宣告

1—-本文由張風捷特烈原創,轉載請註明
2—-歡迎廣大程式設計愛好者共同交流
3—-個人能力有限，如有不正之處歡迎大家批評指證，必定虛心改正
4—-看到這裡，我在此感謝你的喜歡與支援

附錄、靜態常量

/**
 * 作者：張風捷特烈<br/>
 * 時間：2018/11/11 0011:6:02<br/>
 * 郵箱：1981462002@qq.com<br/>
 * 說明：常量
 */
public class Cons {

    /**
     * 顏色陣列
     */
    public static final int[] colors = new int[]{
            0xff33B5E5, 0xff0099CC, 0xffAA66CC, 0xff9933CC,
            0xff99CC00, 0xff669900, 0xffFFBB33, 0xffFF8800, 0xffFF4444, 0xffCC0000};

    /**
     * 用來顯示點陣的三維陣列
     */
    public static final int[][] digit_test = new int[][]

            {
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 1, 1, 1, 1, 0, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {1, 1, 1, 1, 1, 1, 1}
            };//1




    /**
     * 用來顯示點陣的三維陣列
     */
    public static final int[][][] digit = new int[][][]{
            {
                    {0, 0, 1, 1, 1, 0, 0},
                    {0, 1, 1, 0, 1, 1, 0},
                    {1, 1, 0, 0, 0, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {0, 1, 1, 0, 1, 1, 0},
                    {0, 0, 1, 1, 1, 0, 0}
            },//0
            {
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 1, 1, 1, 1, 0, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {1, 1, 1, 1, 1, 1, 1}
            },//1
            {
                    {0, 1, 1, 1, 1, 1, 0},
                    {1, 1, 0, 0, 0, 1, 1},
                    {0, 0, 0, 0, 0, 1, 1},
                    {0, 0, 0, 0, 1, 1, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 0, 1, 1, 0, 0, 0},
                    {0, 1, 1, 0, 0, 0, 0},
                    {1, 1, 0, 0, 0, 0, 0},
                    {1, 1, 0, 0, 0, 1, 1},
                    {1, 1, 1, 1, 1, 1, 1}
            },//2
            {
                    {1, 1, 1, 1, 1, 1, 1},
                    {0, 0, 0, 0, 0, 1, 1},
                    {0, 0, 0, 0, 1, 1, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 0, 1, 1, 1, 0, 0},
                    {0, 0, 0, 0, 1, 1, 0},
                    {0, 0, 0, 0, 0, 1, 1},
                    {0, 0, 0, 0, 0, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {0, 1, 1, 1, 1, 1, 0}
            },//3
            {
                    {0, 0, 0, 0, 1, 1, 0},
                    {0, 0, 0, 1, 1, 1, 0},
                    {0, 0, 1, 1, 1, 1, 0},
                    {0, 1, 1, 0, 1, 1, 0},
                    {1, 1, 0, 0, 1, 1, 0},
                    {1, 1, 1, 1, 1, 1, 1},
                    {0, 0, 0, 0, 1, 1, 0},
                    {0, 0, 0, 0, 1, 1, 0},
                    {0, 0, 0, 0, 1, 1, 0},
                    {0, 0, 0, 1, 1, 1, 1}
            },//4
            {
                    {1, 1, 1, 1, 1, 1, 1},
                    {1, 1, 0, 0, 0, 0, 0},
                    {1, 1, 0, 0, 0, 0, 0},
                    {1, 1, 1, 1, 1, 1, 0},
                    {0, 0, 0, 0, 0, 1, 1},
                    {0, 0, 0, 0, 0, 1, 1},
                    {0, 0, 0, 0, 0, 1, 1},
                    {0, 0, 0, 0, 0, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {0, 1, 1, 1, 1, 1, 0}
            },//5
            {
                    {0, 0, 0, 0, 1, 1, 0},
                    {0, 0, 1, 1, 0, 0, 0},
                    {0, 1, 1, 0, 0, 0, 0},
                    {1, 1, 0, 0, 0, 0, 0},
                    {1, 1, 0, 1, 1, 1, 0},
                    {1, 1, 0, 0, 0, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {0, 1, 1, 1, 1, 1, 0}
            },//6
            {
                    {1, 1, 1, 1, 1, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {0, 0, 0, 0, 1, 1, 0},
                    {0, 0, 0, 0, 1, 1, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 0, 1, 1, 0, 0, 0},
                    {0, 0, 1, 1, 0, 0, 0},
                    {0, 0, 1, 1, 0, 0, 0},
                    {0, 0, 1, 1, 0, 0, 0}
            },//7
            {
                    {0, 1, 1, 1, 1, 1, 0},
                    {1, 1, 0, 0, 0, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {0, 1, 1, 1, 1, 1, 0},
                    {1, 1, 0, 0, 0, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {0, 1, 1, 1, 1, 1, 0}
            },//8
            {
                    {0, 1, 1, 1, 1, 1, 0},
                    {1, 1, 0, 0, 0, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {1, 1, 0, 0, 0, 1, 1},
                    {0, 1, 1, 1, 0, 1, 1},
                    {0, 0, 0, 0, 0, 1, 1},
                    {0, 0, 0, 0, 0, 1, 1},
                    {0, 0, 0, 0, 1, 1, 0},
                    {0, 0, 0, 1, 1, 0, 0},
                    {0, 1, 1, 0, 0, 0, 0}
            },//9
            {
                    {0, 0, 0, 0},
                    {0, 0, 0, 0},
                    {0, 1, 1, 0},
                    {0, 1, 1, 0},
                    {0, 0, 0, 0},
                    {0, 0, 0, 0},
                    {0, 1, 1, 0},
                    {0, 1, 1, 0},
                    {0, 0, 0, 0},
                    {0, 0, 0, 0}
            }//:
    };
}

複製程式碼

JavaScript 原生小案例 60秒倒數計時
2019-01-19
JavaScript
Android中handler倒數計時
2019-02-12
Android
JavaScript 原生小案例秒殺時鐘倒數計時
2019-01-19
JavaScript
CSS動畫篇之炫酷時鐘之時鐘牆
2022-05-08
CSS動畫
如何繪製酷炫折線圖? 視訊教程 + 原始碼
2017-12-12
原始碼
android炫酷的textview
2018-08-28
AndroidTextView
Android 實現計數或者倒數計時計時器用法Demo
2014-01-08
Android
如何使用原生技術寫一個倒數計時時鐘
2018-09-04
Android使用SVG向量圖打造酷炫動效！
2017-01-24
AndroidSVG
CountDownTimer使用——android倒數計時
2019-03-04
Android
Android 倒數計時類CountDownTimer
2017-05-21
Android
微信小程式之倒數計時元件
2018-04-07
微信小程式元件
JavaScript倒數計時
2019-02-28
JavaScript
js——倒數計時
2016-06-29
JS
JS倒數計時
2013-04-23
JS
Android View篇之啟動頁倒數計時動畫的實現
2019-05-08
AndroidView動畫
Android實現計時與倒數計時的幾種方法
2014-10-21
Android
Android原生繪圖之讓你瞭解View的運動
2018-11-16
Android繪圖View
Android超炫酷煙花程式
2014-07-31
Android
Kookjs 倒數計時
2009-10-14
JS
倒數計時34天
2024-03-05
Android 倒數計時的五種實現方式
2017-03-07
Android
微信小程式之自定義倒數計時元件
2019-04-28
微信小程式元件
原始碼分析：CountDownLatch 之倒數計時門栓
2020-11-22
原始碼CountDownLatch
原生js實現的天小時分鐘和秒倒數計時效果
2017-03-26
JS
【Android繪圖】繪圖之基礎篇（一）
2019-04-28
Android繪圖
微信開發之小程式實現倒數計時
2018-05-14
laravel 9 倒數計時了
2021-12-30
Laravel
小程式倒數計時深究
2018-12-27
canvas環形倒數計時
2018-11-04
Canvas
倒數計時門栓（CountDownLatch）
2017-11-20
CountDownLatch
CSS 奇思妙想之酷炫倒影
2023-01-12
CSS
js自動倒數計時程式碼，倒數計時完畢時自動停止迴圈
2024-07-19
JS
js倒數計時實現傳送驗證碼倒數計時60s
2018-01-20
JS
PHP建立一個炫酷的圖表
2016-03-05
PHP
怎樣做QQ上酷炫的人？看！Android仿QQ 傳送圖片時載入效果
2020-03-06
Android
Flutter倒數計時/計時器的實現
2019-04-10
Flutter
線上直播系統原始碼，預設倒數計時，自定義輸入時間倒數計時
2023-05-04
原始碼

Android原生繪圖之炫酷倒數計時

零、前言

最終效果

一、字元的點陣顯示

1.從1開始分析:先看一個陣列：

2.其實分析出來也不麻煩

3.如何多個數字呢?

4.數字0~9的渲染函式：(這裡就畫五角星吧，路徑繪製可詳見Path篇)

二、靜態時間顯示與倒數計時：

1.靜態時間顯示

倒數計時處理

4.重點：小球的運動

1.使用ValueAnimator不斷重繪介面

2.小球集合的更新總函式

3.新增倒數計時中改動的點

4.這裡是讓小球運動的核心：

5.獲取倒數計時剩餘秒數

6.繪製的方法:

後記：捷文規範

1.本文成長記錄及勘誤表

2.更多關於我

3.宣告

附錄、靜態常量

相關文章

1.從`1`開始分析:先看一個陣列：