参考

关注我就能达到大师级水平，这话我终于敢说了 (rengwuxian.com)

效果图

源码：HenCoder-CustomView: HenCoder-三篇自定义View仿写 (gitee.com)

原的

仿的

整体效果分成三部分：点赞，滚动数字，其他图片点击动画。逐个拆解分析功能如何实现

点赞分析

功能点

1. 未点赞，展示灰色图片
2. 手指按下触发点击事件，图片有一个缩放效果，按下变小，抬起恢复正常
3. 点击事件触发后
   1. 展示主色图片
   2. 出现一圈半透明圆环，扩散变透明消失
   3. 点赞小手上方出现四个主色竖条
4. 点击时 view缩放动画 有点跳动的感觉 用数字来表示 1—0.75—1.1—1
5. 取消点赞
   1. 触摸缩放动画
   2. 主色竖条，隐藏

实现

1. 绘制图片比较简单，使用 drawBitmap() 根据点赞状态绘制不同的图片
2. 缩放动画，手指抬起按下时触发 重新onTouchEvent() 。ACTION_DOWN 开启属性动画缩小View，ACTION_UP 开启属性动画放大View
3. 从效果上看动画不仅仅作用于图片。所以使用属性动画缩放整个View。
4. 手指抬起 View有点跳动，回弹的感觉 利用插值器OvershootInterpolator实现 。用数字说明这个插值器的效果。 预取目标：0.751。实际效果：0.751.1~1。
5. 圆环
   1. 绘制圆环 调用 drawCircle() ,画笔样式设置为 Paint.Style.*STROKE* 就能出现圆环的效果，而不是实心圆 。
   2. 圆环有两个动态效果，透明度改变和圆环大小改变，本质上都是数据的变化
   3. 透明度的改变，Paint.setARGB(value, 228, 88, 62) Paint设置颜色时把透明度设置为变量，通过属性动画修改即可
   4. 圆环大小也是同理，圆的大小由半径确定，把半径设为变量，通过属性动画修改，变量值即可。
6. 点赞小手上面的四个竖条
   1. 没什么特殊的，图片的显示与隐藏而已
   2. 显示与隐藏由透明度控制

滚动数字分析

功能点

1. 数字0不绘制，
2. 数字每次只会加1或减1，
3. 增加时 比如：8~9。 9从下往上淡入，8从下往上淡出。
4. 减少时，8从上往下淡入，9从下往上淡出
5. 进位的情况
   1. 129~130，百位1不变，十位个位执行动画改变数值
   2. 130~131，百位十位不变，个位执行动画改变数值
6. 点击文字 也可以触发点赞

实现

调用canvas.drawText() 方法，绘制文本参数要求传入String。

为了计算方便加减的时候使用Int，绘制时转成字符串。

转成字符串后可以循环遍历得到每一个字符，比较新数与旧数字符的异同。

如果百位相同那么直接绘制静态文本，如果个位十位不同执行动画绘制

其他缩放图片分析

只有手指按下抬起的缩放动画

汇总分析

一共设计四个组件一个接口，TouchAnimLayout，ThumbsUpView—点赞View，ScrollNumberView —滑动数字View， TouchAnimImageView—点击动画View ，ITouchAnimInterface

整体设计思路：

1. 从UI看 图片和文字并排排列，点击文字也可以触发点赞或其他业务。这说明图片和文字共享一个点击事件监听。有两种实现方式
   1. 图片，文字设置同一个View.OnClickListener 对象
   2. 图片，文字外层套一个Layout，给Layout设置点击事件
2. 但是不仅仅是要响应点击事件处理业务，还要执行动画。***“图片，文字设置同一个View.OnClickListener 对象” 。***那这种方案弊端就很大了，写起来太麻烦，会出现很多类似代码
3. 现在有个大致思路。自定义Layout TouchAnimLayout，内部包裹图片，文字。点击事件设置给Layout，重写Layout的onTouchEvent() 实现点击动画。
4. 图片有两种：普通静态图，点赞View
5. 点赞View的内部实现复杂，不仅仅是展示图片，还有状态管理，圆环，竖条等内容。自身的点赞业务已经很复杂了，不会让点赞View完成展示静态图片的功能。
6. 这样就出现了两个组件：点赞View 和 ImageView
7. 点赞View 和 ImageView 都有点击动画的需求，把点击动画抽象为接口ITouchAnimInterface .如果有组件想要配合 TouchAnimLayout 实现点击动画，实现接口即可。
8. 使用接口也符合接口本身的概念，使某个对象具有某种能力。
9. 在当前场景是ImageView需要动画，如果TextView需要动画，那么自定义TextView实现接口既可。
10. 同时也符合迪米特原则，View的动画只有View自身知道，降低代码耦合。