效果預(yù)覽
錄制.gif
功能
- 單擊拍攝
- 長(zhǎng)按拍攝
- 長(zhǎng)按拍攝時(shí)可以拖動(dòng)
注意點(diǎn)
外圈擴(kuò)散圓環(huán)動(dòng)畫
仔細(xì)觀察抖音的錄制按鈕卸伞，邊緣擴(kuò)散的動(dòng)畫效果不是從圓環(huán)的中心點(diǎn)同時(shí)向內(nèi)和向外擴(kuò)散的楞卡。因此，只繪制一個(gè)園闪水，設(shè)置paint的strokeWidth是不能達(dá)到這種效果的累铅。（注：paint繪制有strokeWidth的圖形時(shí)跃须，真正繪制的位置對(duì)應(yīng)的是stroke的中心點(diǎn)）
因此，這個(gè)思路行不通娃兽。有沒有直接的方法可以從邊緣修改stroke的寬度呢菇民？好像并沒有，那只能換一種思路。一個(gè)圓不行第练，畫兩個(gè)可以嗎阔馋？對(duì)里面的圓的半徑做動(dòng)畫，外面的圓不動(dòng)娇掏。似乎還是不行呕寝，里面的透明圓怎么覆蓋外面的圓呢？其實(shí)是可以的婴梧。那就是使用Paint的setXfermode方法下梢。
關(guān)鍵代碼如下：
mCirclePaint.setColor(Color.parseColor("#33ffffff"));
canvas.drawCircle(centerX, centerY, circleRadius, mCirclePaint);
mCirclePaint.setXfermode(mXfermode);
mCirclePaint.setColor(Color.parseColor("#000000"));
canvas.drawCircle(centerX, centerY, circleRadius - circleStrokeWidth, mCirclePaint);
mCirclePaint.setXfermode(null);
簡(jiǎn)單的說setXfermode可以設(shè)置Paint在繪制時(shí)如何處理繪制內(nèi)容的交叉部分。具體可以參考扔物線大佬的專欄中對(duì)此方法的講解志秃。
中間白色圓的動(dòng)畫怔球。
一開始看到圓形變成方形的效果感覺還是很神奇的。其實(shí)實(shí)現(xiàn)很簡(jiǎn)單浮还。圓形實(shí)際上是通過drawRoundRect方法繪制的竟坛。
canvas.drawRoundRect(mRectF, corner, corner, mRectPaint);
當(dāng)corner的值等于矩形寬度的一半時(shí)，矩形看起來就是圓形了钧舌。因此担汤，這個(gè)動(dòng)畫只需要修改圓角的值就可以實(shí)現(xiàn)。
