本篇涉及到的知识包括:实现自定义 View;Paint、Canvas、RectF 等对象相关方法的使用;ValueAnimator、AnimatorSet 等动画相关对象的使用。
功能分析
最近实现了一个抽奖功能。
要求如下:
- 抽奖控件包括两行,需要显示 0-9 这 10 个数字,每行 5 个数字;
- 点击开始之后有一个平移效果的动画在这 10 个数字上显示;
- 获取到抽奖结果平移动画正好定位到中奖值所在位置;
效果截图:
初始状态
点击选中状态
中奖码选中状态
附带动画的整体效果
思考及尝试实现
只看默认布局,使用 RecycleView 就可以实现这样的布局,点击选中/取消选中可在 Adapter 对应的 Item 中实现。这种方式实现的话平移效果动画实现有难度,尤其最后要停在中奖码的位置。
接下来就是从自定义 view 实现这种实现方式进行思考:
- 画 10 个数字(其实就是 drawBitmap()),需要区分当时是否为选中状态;
- 重写 onTouchEvent 方法,实现选中/取消选中数字;
- 画动画滑动(也是 drawBitmap());
- 动画结束滑块显示在(通过 RectF 确定);
- 平移动画其实就是画滑块在线段上的平移(找好起点、终点),连续性可以使用 AnimatorSet 将动画串联起来;
最终代码
详细说明见代码中注释
注意
切图别留外边距,否则显示上会有奇怪的现象发生。