项目GitHub地址:
https://github.com/GuLiSir/GuLiBlogDemo
工作的一个需求,要求实现一条线线慢慢画出来然后转折一次,再画出一个点,后来实现是实现了,发现做的还可以拓展,例如可以用来做折现统计图,画三角形,五角星等,目前可以实现画线和画点两种功能,至于画其他效果,需要拓展一下就好,并不是很麻烦.先看看效果吧.
废话不多说,直接上代码部分:
首先继承一个View并实现一个自己定义的接口,
实现接口的原因是因为项目中有很多其他的自定义View,有通用的部分,所以就将其抽象出来,解耦用,不需要的可以不用实现,
接口的内容是:
一个准备的方法,一个开始方法,一个主动结束方法.
然后就是另外一个接口,这个接口是放在自定义View里面的
这个接口定义的是每一个绘制效果,例如绘制一条直线的动画,或者一个点的动画,都是实现了此接口,该接口只需要实现两个方法就可以
getDuration() 是自己需要绘制的时间,这个方法最简单,直接返回毫秒值就行了
drawSelfModule(Canvas canvas, float percent); 是绘制自己的动画效果,一个参数是canvas,这是必须的,到时将内容绘制在此画布上,第二个参数percent代表的是百分比,该值会根据上一个方法获取的时间,然后计算出当前绘制的进度,实现的时候根据进度来画出相应的效果就行了.
至于为什么能实现接口就能完成功能,在介绍完两个实现之后说明.
然后来看一下实现吧,下面将说明一下划线和画点的功能:
划线:
在构造方法里,实现了对各个参数的初始化,画笔颜色,画这条线的时长,以及起始点终止点,两个点性质一样,所以定义了一个Point类,该类就只有XY两个坐标点.
,drawSelfModule方法里面,实现的就是绘制功能了,由于是绘制一条直线,逻辑就很简单了,百分比为0的时候就什么都没有.百分比为0.5的时候就绘制该线一般的长度,1.0的时候就绘制全部长度.实现部分也是这么做的,起始点不会根据当前绘制的进度产生变化,
而终止点却跟时间变量相关,这里将关系实现就行.具体直接看代码简单明了吧
接下来看看点的实现,点的实现更简单了,因为没有什么动画效果,(加个透明度变化也许是很不错的)就是在一瞬间画出一个点,这个跟时间就没什么关系了,看看实现:
这里就直接画出一个点,没什么好说的,返回时长32ms是怕16ms一帧时长绘制不出来,所以就多了一帧间隔时间.
两个实现都完成了,然后将上面Activity实现动图相关的代码贴出来:
Activity是用kotlin实现的,大意就是在activity初始化的时候设置了要显示的效果,这里都是各个坐标点,然后点一个按钮就可以开始播放效果,也就是文章开头处的效果.
为何能够实现这种效果?
接下来回到View里面看看onDraw方法做了什么工作吧:
在全局变量里面定义了两个变量,一个用来存储绘制的效果,因为执行完一个之后要执行下一个,所以用list来存储,List存储的是绘制的接口,所以可以根据自己的需要去实现不同的效果,例如绘制一条弧形,实现DrawItem即可.另一个是存储开始时间,用来计算当前进度.
动画开始方法:
接下来onDraw方法:
这里由上往下逐一说明:
前面几行是状态判断,是否调用了准备方法(在此文是没什么用,但是在个人项目中是有用的),为了防止状态异常,然后取得当前时间并且计算出当前执行时长.
接下来就稍微复杂一点,在第61行的循环里面,62和63是取得当前绘制效果需要的时长并且算入当前总时长去然后第65是判断当前Item是否全部绘制完了,true的话就是全部绘制完,传入一个百分比为1.0的绘制请求,给实现类去实现,如果没有绘制完就执行69-73的逻辑,计算出百分比,然后让实现类去实现,当然重要的是别忘了break退出循环,不执行后面的计算,最后是计算监听部分了,如果全部绘制完就调用监听,否则请求继续绘制.
到此,实现效果是讲解完了,其实代码也不多,也不会很复杂,只是感觉可以拓展出其他很多有趣的效果,例如绘制三角形,五角星,圆形,各种效果都可以拓展,只是看你怎么实现了,这里没去认真实现,但是感觉还是挺有价值的,所以就分享出来!
(完)