Android繪製(三):Path結合屬性動畫,讓圖示動起來!

Android繪製(一):來用shape繪出想要的圖形吧!
Android繪製(二):來用Path繪出想要的圖形吧!

---

目錄

• 效果圖
• 前言
• 繪製
• 屬性動畫
• 最後

---

效果圖

不廢話, 直接上效果圖, 感興趣再看下去. 其實不單單是效果圖演示的, 運用熟練的話各種圖示之間都是可以切換的.

---

前言

之前的文章也說了, path還是很有潛力的. 但是很遺憾, 我本人不太擅長用貝塞爾曲線畫東西, 所以只能演示一些簡單的變化(手動無奈). 來看看是如何實現的吧.

---

繪製

想要繪製矩形很簡單啦, 移動到左上角, 然後逆時針畫一圈, 或者順時針畫一圈. 那其實暫停和終止就是兩個矩形, 播放就是兩個三角形. 所以稍微改變下path繪製的位置就解決問題啦.

mLPath.moveTo(left, top);
mLPath.lineTo(left, bottom);
mLPath.lineTo(right, bottom);
mLPath.lineTo(right, top);
mLPath.close();

但是需要弄清繪製區域. 首先要測出設定檢視寬高, 再以此畫一個圓, 然後設定一個內邊距, 然後再繪製圖示. 來張圖:

---

屬性動畫

其實這裡的屬性動畫的使用部分是最簡單的使用, 就是值變化, 從0到1或者從1到0.

ValueAnimator valueAnimator = ValueAnimator.ofFloat(isPlaying ? 1 : 0, isPlaying ? 0 : 1);
valueAnimator.setDuration(mAnimDuration);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        mProgress = (float) animation.getAnimatedValue();
        invalidate();
    }
});

然後依據mProgress的值變化圖形. 那要怎麼構建這個變化呢? 注意看我的註釋部分, 變化的值就那幾個, 你將0時的值和1時的值先寫好, 然後推算函式, 就是初中數學的難度, 大概(天知道現在小學生變成什麼樣了)(手動滑稽).

// 暫停間距(0: mMidSpace 1: 0)
float pauseDis = mMidSpace * (1 - mProgress);
// 暫停單條寬(0: mRectWidth / 3 1: mRectWidth / 2)
float pauseWidth = (mRectWidth - pauseDis) / 2;
// 左暫停左上(0: 0 1: mRectWidth / 2)
float pauseLLT = pauseWidth * mProgress;
// 右暫停左上(0: mRectWidth / 3 * 2 1: mRectWidth / 2)
float pauseRLT = pauseWidth + pauseDis;
// 右暫停右上(0: mRectWidth 1: mRectWidth)
float pauseRRT = pauseWidth * 2 + pauseDis;
// 右暫停右下(0: mRectWidth 1: mRectWidth / 2)
float pauseRRB = pauseRRT - pauseWidth * mProgress;

---

最後

之後實現應該都不太難了, 不管是監聽還是自定義屬性. 那自定義檢視可以看這篇-介面無小事(五):自定義TextView, 屬性動畫可以看這篇-動畫必須有(一): 屬性動畫淺談. 當然了, 要是前一篇沒看的, 建議看下Android繪製(二):來用Path繪出想要的圖形吧!. 喜歡記得點贊哦, 有意見或者建議評論區見, 暗中關注我也是可以的哦~

---