二. 拇指效果(ThumbView)

仿即刻点赞效果

1. 效果

1.1 点赞时
光圈从左到右显示出来，并且同时从透明变到不透明；
拇指变小再变大。

1.2 取消点赞时
光圈从不透明变到透明；
拇指变小再变大

2. 思路

2.1 使用Canvas.clipPath，Path.AddArc实现点赞时的光圈从左到右逐渐显示
2.2 使用Paint.setAlpha()实现透明度的变化
2.3 使用Canvas.setScale()实现拇指的缩放

4. 知识

Canvas相关

4.1 根据Path剪切画布

canvas.clipPath(Paht path)

4.2 给Path添加弧。

Path.addArc(RectF oval, float startAngle,float sweepAngle)

4.3 设置画布的缩放程度(注意，画布缩放，绘制的内容也跟着缩放)

Canvas.setScale(float scale)

4.4 绘制图像

drawBitmap( Bitmap bitmap, float left, float top, Paint paint)

3. 技巧

3.1 设置渐变量mNowSweepedAngle,不断改变其值得大小，以驱动动画的执行。

3.2 动画的完成度为
float progress = (mNowSweepedAngle * 1f) /(THUMB_FINAL_ANGLE - THUMB_START_ANGLE)

3.3 根据渐变量mNowSweepedAngle实现光圈的逐渐显示，根据完成度progress来设置光圈的透明度和拇指的缩放程度。

3.4 拇指先变小再变大的数学知识
Canvas的缩放程度scale和动画完成度的关系

image

3.5 弧
android的弧和数学中的弧是一样的，以水平向右为0度，顺时针旋转为正角度

image