Android原生繪圖之炫酷倒計時

阿新 • • 發佈：2018-11-11

零、前言

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/>
 * 郵箱：[email protected]<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/>
 * 郵箱：[email protected]<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}
            }//:
    };
}

複製程式碼

Android原生繪圖之炫酷倒計時

零、前言 1.本篇原型是慕課網的教程，但是用JavaScript實現在瀏覽器上的，詳見 2.最近感覺安卓Canvas不比html5的canvas差，使用想復刻一下到Android上 3.本篇並不止於教程，而是以知其所以然來運用字元點陣及動效，這也是從JavaScript移植到安卓的必要條件 4.本篇會

Android原生繪圖之一起畫個表

零、前言前幾天介紹了一大堆Android的Canvas，Paint,Path的API，接下來將是靈活地使用他們今天帶來的是一個手錶的繪製，經過本篇的洗禮，相信你會對Canvas的圖層概念有更深刻的理解至於表的美醜不是本文的重點，本文只有一個目的，就是理清Canvas的save和restore的意

Android原生繪圖之讓你瞭解View的運動

一、前言 1.我一直想寫一篇關於運動的文章,現在總算千呼萬喚始出來了。 2.本篇是一個長篇，各位看官自備水果、飲料、花生米，相信會給你會吃的很開心。 3.本專案原始碼見文尾捷文規範第一條先看一下幾個效果:(留圖鎮樓) 1.---瘋狂的分裂 2.---粉身碎骨

Android開發之炫酷MD風格

轉載於： https://www.cnblogs.com/1925yiyi/p/7466568.html?tdsourcetag=s_pcqq_aiomsg 2.載入效果 3.自定義動態柱形圖 4.MaterialPowerMen

Android 從無到有打造一個炫酷的進度條效果

fault ref size art href 一個 font itl top 從無到有打造一個炫酷的進度條效果Android 從無到有打造一個炫酷的進度條效果

Android-25種開源炫酷動畫框架

提示控件進度顯示風格 spl nec 用戶 refresh class art 前言忙碌的工作終於可以停息一段時間了，最近突然有一個想法，就是自己寫一個app，所以找了一些合適開源控件，這樣更加省時，再此分享給大家，希望能對大家有幫助，此博文介紹的都是UI上面的框架

Android原生繪圖進度條+簡單自定義屬性程式碼生成器

零、前言 1.感覺切拼字串是個很有意思的事，好的拼接方式可以自動生成一些很實用的東西 2.本文自定義控制元件並不是很高大上的東西，目的在於計錄自定義控制元件的書寫規範與行文流程 3.建議大家自定義控制元件時自定義屬性有自己專屬字首，有利無害,何樂不為 4.本文是根據鴻洋在慕課網上的教程敲的：詳見，自己

翻翻git之---炫酷的自定義翻滾View TagCloudView

週一好，又到了每週最困的一天，最近都被齧齒類動物搞的累死，廢話不多，今天上一個自定義的ViewGroup實現一個3D球形集合。效果圖：效果還不錯，可以作為短小文字內容的展示用 How to use? Grade: compile 'co

Android studio RecyclerView實現炫酷吸頂效果

public class SectionDecoration extends RecyclerView.ItemDecoration { private List<NameBean> beanList; private TextPaint textPaint; priva

自定義View之炫酷的水滴ViewPageIndicator

*本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出去年在是某個Android群了看到有人發了一個設計圖，覺得很好。想自己實現一下，到上網搜了一些資料，比如參考，這位兄弟已經把如何繪製一個彈性的圓寫的很詳細了，在此對他表示感謝。不過他沒

css3 之炫酷的loading效果

near absolut asc 教育 load jquery origin ffffff over css3 之炫酷的loading效果今天實現了一個炫酷的loading效果，基本全用css來實現，主要練習一下css3的熟練運用 js需要引入jquery 只用到了一點

教你用原生CSS寫炫酷頁面切換效果，跟第三方元件說拜拜

因為專案需要，別人想讓我給他寫一個個人部落格，並且給了我一個其他人的網頁，可以點此檢視。有的同學可能說了，第三方部落格框架這麼多，為什麼還要去手寫的，你說這個有可能是沒有看到開啟這個部落格。樣式介紹給大家看一下這個網頁的大體樣式。這個介面可以說是非常漂亮，整體也是一個響應式佈局，總體來說還算不錯

原生JS例項之輪播圖《由簡單到炫酷》系列二

本文主要講述JavaScript原生輪播圖例項，如需JavaScript基礎請到菜鳥教程自己補習。目錄結構目標與思路本文講述最基礎的版本: 頁面載入完成後自動輪播實現思路：思路： 1、獲取圖

原生JS例項之輪播圖《由簡單到炫酷》系列一

本文主要講述JavaScript原生輪播圖例項，如需JavaScript基礎請到菜鳥教程自己補習。目錄結構目標與思路本文講述最基礎的版本: 點選圖片切換到下一張圖片實現思路：思路： 1、獲取圖片標

Android自定義View之實現簡單炫酷的球體進度球

前言最近一直在研究自定義view，正好專案中有一個根據下載進度來實現球體進度的需求，所以自己寫了個進度球，程式碼非常簡單。先看下效果：效果還是非常不錯的。準備知識要實現上面的效果我們只要掌握兩個知識點就好了，一個是Handler機制，用於發訊息重新整理我們的進度球，一個是clip

玩轉Android之MVVM開發模式實戰，炫酷的DataBinding！

C# 很早就有了MVVM的開發模式，Android手機中的MVVM一直到去年Google的I\O大會上才推出，姍姍來遲。MVVM這中開發模式的優點自不必多說，可以實現檢視和邏輯程式碼的解耦，而且，按照Google的說法，使用了MVVM的開發模式，還可以提高佈局檔案的解析速度，

Android探索之旅（第十四篇）Android中實現炫酷效果的Demo（持續收錄中......）

浪起來！使用 drawBitmapMesh 實現模擬水波紋效果簡書傳送門三十秒實現QQ首頁動畫特效 BMoveView為RadioGroup新增移動的特

Android控制元件開發之Gallery3D酷炫效果瀏覽圖片

效果網上已經很多人做出來了，只是這次需要用到，所以自己也實踐了一下（這裡例子我也是根據網上一些資料編寫）。特下面針對一些關鍵程式碼進行簡要說明，需要做這方面東西的朋友可以看看。這篇文章是實用性文章，理論分析不多。

android仿微信紅包動畫、Kotlin綜合應用、Xposed模塊、炫酷下拉視覺、UC瀏覽器滑動動畫等源碼

架構分析 body oot googl short html 博文 urn 管理 Android精選源碼仿微信打開紅包旋轉動畫使用Kotlin編寫的Android應用，內容你想象不到 Android手機上的免Root Android系統日誌Viewer 一個能讓微

Android炫酷廣東快樂十分搭建的播放效果

tar operation container animation text one ESS eal ola 使用廣東快樂十分搭建述 dsluntan.com 貝塞爾曲線實現滑動效果，在使用屬性動畫實現水波紋效果，然後就能實現以上效果三、實現 1、先封裝動畫框架，創建動

Android原生繪圖之炫酷倒計時

零、前言

最終效果

一、字元的點陣顯示

1.從1開始分析:先看一個數組：

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

3.如何多個數字呢?

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

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

1.靜態時間顯示

倒計時處理

4.重點：小球的運動

1.使用ValueAnimator不斷重繪介面

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

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

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

5.獲取倒計時剩餘秒數

6.繪製的方法:

後記：捷文規範

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

2.更多關於我

3.宣告

附錄、靜態常量

相關推薦

1.從`1`開始分析:先看一個數組：