仿抖音录制按钮效果

github

效果预览

录制.gif

功能

• 单击拍摄
• 长按拍摄
• 长按拍摄时可以拖动

注意点

外圈扩散圆环动画

仔细观察抖音的录制按钮，边缘扩散的动画效果不是从圆环的中心点同时向内和向外扩散的。因此，只绘制一个园，设置paint的strokeWidth是不能达到这种效果的。（注：paint绘制有strokeWidth的图形时，真正绘制的位置对应的是stroke的中心点）

因此，这个思路行不通。有没有直接的方法可以从边缘修改stroke的宽度呢？好像并没有，那只能换一种思路。一个园不行，画两个可以吗？对里面的圆的半径做动画，外面的圆不动。似乎还是不行，里面的透明圆怎么覆盖外面的圆呢？其实是可以的。那就是使用Paint的setXfermode方法。

关键代码如下：

        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);

简单的说setXfermode可以设置Paint在绘制时如何处理绘制内容的交叉部分。具体可以参考扔物线大佬的专栏中对此方法的讲解。

中间白色圆的动画。

一开始看到圆形变成方形的效果感觉还是很神奇的。其实实现很简单。圆形实际上是通过drawRoundRect方法绘制的。

canvas.drawRoundRect(mRectF, corner, corner, mRectPaint);

当corner的值等于矩形宽度的一半时，矩形看起来就是圆形了。因此，这个动画只需要修改圆角的值就可以实现。