美文网首页
多个波纹扩散动画效果

多个波纹扩散动画效果

作者: 举个栗子wow | 来源:发表于2019-08-15 21:09 被阅读0次

像下面这样:


多个波纹.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:多个波纹扩散

相关文章

  • 多个波纹扩散动画效果

    像下面这样: 这个可以用在长按波纹扩散的的地方,色调有点丑,忽略一下。。。 说下思路和遇到的一些问题:整体分为了两...

  • iOS动画-扩散波纹效果

    最终效果 实现思路 动画的表现形式是颜色以及大小的变化,整体效果可以看做多个单独的波纹效果的叠加。因此我们可以创建...

  • css和js点击波纹扩散

    1.点击波纹扩散 效果: 代码 按钮内的波纹扩散: 效果: 代码:

  • Android 点击波纹扩散动画

    前言 国际惯例先放图 gif动画将就看吧,要啥自行车,真机上效果还可以。 大体思路 通过继承Drawable重写d...

  • 波纹效果动画

    类似淘宝的效果:  我们知道,计算机不可能绘制出一条完美的曲线,如果放大到像素的级别,可以看到这些曲线其实都是栅格...

  • 水波纹扩散效果

    传送门:OC、swift 因为代码并不多,在这里就简单说一下思路吧:1.我创建了一个自定义的view,在里面用贝塞...

  • android 为布局增加水波纹效果5.0以上

    只适用于5.0以上 效果1,在边界内水波纹 效果2,就是一个圆形的水波纹,会超过布局扩散 android:clic...

  • Material Design动画

    Material Design中特有的动画效果,如水波纹,Activity转场动画等 1.Touch FeedBa...

  • 点击容器 呈现水波纹效果

    1.首先创建 waves.css 2.创建 waves.js 3.使用 效果 点击后 水波纹扩散

  • Android 使用ObjectAnimator自定义动画

    使用ObjectAnimator做一个自定义动画 动画效果大致类似水波纹的效果 先看图 没有GIF图 直接上静态图...

网友评论

      本文标题:多个波纹扩散动画效果

      本文链接:https://www.haomeiwen.com/subject/tbptsctx.html