多个波纹扩散动画效果

像下面这样:


多个波纹.gif

这个可以用在长按波纹扩散的的地方,色调有点丑,忽略一下。。。

说下思路和遇到的一些问题:
整体分为了两部分,一部分是单纯的计算协议,另一部分就是视图上的处理;

计算部分

1.计算部分由于是多个波纹效果,这样就会产生多个计算数据,当时想了两个方案:单个扩散计算和多个扩散计算。单个的话计算比较简单,一个计时器不停地加值,但是弊端也是很明显的,N个波纹会产生N个计时器;多个共用同一个计时器的话,设计思路是好的,但是计算协议写起来就很麻烦了。最后选择了麻烦的,虽然麻烦,但是可行;

2.如何实现这个方案呢?我准备了一个计算值数组,用来装载多个计算的值,为了达到间隔依次扩散的效果,我准备了一个启动阈值数组,用一个“引线”依次“点燃”每个需要的开始计算的值;

3.整个过程就是各个计数值被点燃开启之后达到临界值再次回到起点累加的的处理,由于精确度问题可能会出现偏差,所以计算方面最好不要使用==,使用>=或者<=替代;

视图处理部分

1.由于是循环动画,所以需要不停地调整Layer的层级,保证当前扩散最大的在下面,最小的在上面;

2.当圈扩散到最大变回到初始点时,由于第二层还未达到最大,此时会出现跳闪的现象,解决方式是插入一个layer当背景,在第0位,通过获取当前扩散到最大的layer的颜色,给自身填充这个色彩;

3.在填充色彩上,由于fillColor这个属性是Animated可动画的,直接赋值会有0.25秒的隐式动画,视觉上还是非常明显的,所以赋值的时候需要将隐式动画进行手动关闭;

4.点击停止按钮并没有马上停止,做了一个结束的过度动画(把要扩散的扩散完)。这个效果的实现需要结束当前动画的计时器,同时重启一个计时器,用来走完剩下的部分。在视图处理上,[a,b,c,d,e],假如按下停止时c扩散的值最大,记录c下标2,那么在调整层级上按之前的调整后,需要按b a e d c的顺序把达到最大的放到最下面;

整理一下放Git:多个波纹扩散

你可能感兴趣的:(多个波纹扩散动画效果)