一个精致的打钩小动画

前言

最近在看轻芒杂志的时候,看到一个动画很带感很精致;

恰好这段时间也在看【HenCoder】的自定义view教程(里面写得非常非常详细,也有相应的习题等等),所以就趁热打铁,熟悉一下学习的知识。

国际惯例,先上轻芒杂志标记已读的动画

看了后是不是感觉很精致,很带感?

那下面来看一下我自己模仿的效果

静态图

是不是模仿得有几分相似,哈哈~,下面来看一下我实现的思路吧

分析

这个动画实现起来并不复杂,掌握几个基本的自定义view的方法即可。实现的思路分为选中状态未选中状态

未选中的状态

未选中的状态很简单,需要绘制的有两个图形

  • 圆环

选中的状态

绘制选中的动画稍微复杂一点,主要包括

  1. 绘制圆环进度条 这个简单,直接使用drawArc()即可实现
  2. 绘制向圆心收缩的动画 这个一开始的时候想用drawArc()加上设置画笔的宽度strokeWidth来实现,不过改变的宽度是往外扩张的,所以这个想法果断放弃。 之后,我的想法是这样的,看下图

我就打算先绘制一个黄色的背景,然后在这个图层上面绘制一个白色的圆,半径不断的缩小,直至为0,这就反过来得到了一个向中心收缩的动画,这可以叫逆转思维吧,最近看的一本书里面说到有时候反过来思考也许会有不一样的效果。

  1. 显示勾出来 关于这个√,我在网上搜了一波,也没有明确的指明怎么画法才是标准的,所以这里可以随意发挥,自己觉得好看就行。这里直接可以使用drawLine()可以一步搞定。
  2. 最后是圆环放大再回弹的效果 放大回弹可以使用drawArc(),配合改变画笔的宽度来实现即可

具体实现

确定进度圆环和钩的位置

经过上面分析,无论是选中状态还是未选中状态,进度圆环和钩的位置是不变的,所以我们先来确定圆环的位置和钩的位置

定义变量,标记状态

既然分选中状态和未选中状态,那个绘制过程中,就必须判断当前究竟是绘制未选中的呢还是选中了的呢。因此在这里,我定义了一个变量isChecked

绘制未选中状态

绘制过程中那些画笔就不详细说了,一开始初始化画笔最后绘制的时候调用即可

绘制选中状态

选中状态是个动画,因此我们这里需要调用postInvalidate()不断进行重绘,直到动画执行完毕;另外,我这里用计数器的方式来控制绘制的进度。

绘制圆环进度条

绘制进度圆环这里,我们定义一个计数器ringCounter,峰值为360(也就是360度),每执行一次onDraw()方法,我们对ringCounter进行自加,进而模拟进度。

最后记得调用postInvalidate()进行重绘

这一步后效果图如下

绘制向圆心收缩的动画

圆心收缩的动画在圆环进度达到100%的时候才进行,同理,也采用计数器circleCounter的方法来控制绘制的时间和速度

这一步后效果图如下

绘制钩

当白色的圆半径收缩到0后,就该绘制打钩了。

绘制打钩,这里问题不大,因为在onMeasure()中已经将钩的三个坐标点已经计算出来了,直接使用drawLine()即可画出来。

这一步后效果图如下

绘制放大再回弹的效果

放大再回弹的效果,开始的时机应该也是收缩动画结束后开始,也就是说跟打钩的动画同时进行

因为这里要放大并且回弹,所以这里的计数器我设置成一个不为0的数值,先设置成45(随意,这不是标准),然后没重绘一次,自减4个单位。

最后画笔的宽度是关键的地方,画笔的宽度根据scaleCounter的正负来决定是加还是减

完成最后一步的最终效果图

暴露外部接口

为了灵活的可以控制绘制的状态,我们可以暴露一个接口给外部设置是否选中

添加点击事件

控件到这里已经基本做好了,但还不是特别的完善。想想checkbox,它不需要暴露外部接口也能通过点击控件来实现选中还是取消选中,所以接下来要实现的就是为控件添加点击事件。先定义一个接口OnCheckedChangeListener,实现监听此控件的监听事件

接下来,初始化控件的点击事件

看看效果图

自定义配置项

这里简单说一下动画执行速度的配置,这里我设置了3档速度,我用枚举定义了三个速度的配置项

获取xml的配置,获取对应的枚举,从而得到配好的动画速度的一些参数

最终成果图

That ' s all~ 感谢大家阅读,最后再放一下项目的github地址

Github地址:TickView,一个精致的打钩小动画 https://github.com/ChengangFeng/TickView

原文发布于微信公众号 - 我就是马云飞(coding_ma)

原文发表时间:2017-10-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏斜述视角

0基础学习网页制作-Html

文章来自:4月14日早,在贵州大学北校区10栋715寝室,对物理学院同学培训的内容。

1042
来自专栏葡萄城控件技术团队

响应式设计(Response Web Design)实践

前一篇响应式设计(Response Web Design)浅谈提到了响应式设计的由来和应用场景。本文聊一聊如何实现。 如何让自己的网站也响应式Web设计,可以响...

2697
来自专栏GIS讲堂

地图切片详解

地图切片很多做GIS的筒子都不陌生,但是其中的原理一直是马马虎虎,在此,就地图切片中的几个重要的概念做一个介绍,一则自己做个总结,二则希望能够帮助到有此困惑的战...

4392
来自专栏编程

小白必知什么是css和盒模型

CSS盒模型概念 CSS 盒模型也叫框模型 (Box Model) ,包含了元素内容(content)、内边距(padding,也叫填充)、边框(border)...

1967
来自专栏一“技”之长

iOS开发CoreAnimation解读之一——初识CoreAnimation核心动画编程

        众所周知,绚丽动画效果是iOS系统的一大特点,通过UIView层封装的动画,基本已经可以满足我们应用开发的所有需求,但若需要更加自由的控制动画的...

2083
来自专栏九彩拼盘的叨叨叨

前端文章收藏

1301
来自专栏练小习的专栏

可视化格式模型-绝对定位

相对包含块偏移定位 在绝对定位模型中,一个框明确地基于它的包含块偏移。不是父元素,这点需注意。 要是人家问你,绝对定位相对于谁定位啊?你很快乐的说:它的父元...

21010
来自专栏Material Design组件

Material Design — 按钮( Buttons)

40716
来自专栏IMWeb前端团队

animation动画实践

由于业务关系,有幸参与腾讯课堂app下载页面制作,原则上ie8、9可表现为静态版本,而高级浏览则为动画版本。在这把一些重要思想和中间遇到的一些问题记录下,以供知...

2320
来自专栏Coco的专栏

【CSS3进阶】酷炫的3D旋转透视

2284

扫码关注云+社区

领取腾讯云代金券