提出需求
最近做了一个小项目,里面有一个需求需要添加一个动态进度条,进度条的样式就类似于水波来回起伏的那种形状,下面就是最初的展示效果(有一点区别,这里我加了一个进度自动增加的功能):
![3e03c78237075070daf3f836fad4c572.gif](https://i-blog.csdnimg.cn/blog_migrate/ebf69459aff3614895d8ec69a7ba7178.gif)
下面先说一下这个效果的制作原理
原理介绍
在介绍动态效果之前需要先看一下静态的:
![4ef0c956b35defdd82f7992c018bedb4.png](https://i-blog.csdnimg.cn/blog_migrate/7a8b644084ca43e71f64163637924c1e.jpeg)
如果仔细观察的话,静态图效果的呈现在于先后的两个线条的绘制,产生水波的主要是由于两线条的左右的水平错位 以及 设置的透明度不同 所造成的;
想要形成最后的水波荡漾的视觉效果,只需要把数张线条连续走向的静态图拼接在一起就能达到
线条中的波浪效果,这里用到的是 正弦函数
的走向ÿ