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() {@Overridepublic 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繪出想要的圖形吧!. 喜歡記得點贊哦, 有意見或者建議評論區見, 暗中關注我也是可以的哦~

---