一步步用svg做一个声波扩散动画 - linxiong - 博客园

　　有个项目需要在某个坐标显示一个声波扩散(不知道这个表达对不对)的动画。

　　这种需求一般做法有几种，一种做成gif图片，然后贴上去，一种是用html+css3完成，要么就是画上去，这画又分两种，一种是Canvas画布来画，另一种用svg来画。

　　制作成gif图片往上贴，如果有ui负责做图，这对于前端来说是最省事的方法，只要贴上去就完了，不过这种方法有一个缺点，你能控制的有限，如果要用另一种颜色，或者改变圈数，只能重新制作一张图片，重复替换，而且动画的重复次数也不好控制。pass

　　html+css3完成，这个简单，不过效果有限，看这里。pass

　　画上去分两种，一种canvas画布，一种svg画布，关于两者的优劣比较不是这里的主体，在这里不讨论。而且对于小需求来说，两者的资源消耗差异其实也可以忽略不计。关于canvas的声波扩散实现，看这里。

　　好吧，言归正传，既然选择了方向，那便开始。

　　首先，写一个svg画布，宽高200px

　　然后在里面画一个圆。

<circle cx="80" cy="80" r="50" stroke="#555" fill-opacity="0"></circle>

</svg>

　　这里circle表示一个圆，圆心坐标以svgView画布左上角为原点，向右偏移cx个单位，向下偏移cy个单位，r为圆半径，stroke表示圆边框填充颜色，fill表示圆内填充颜色，fill-opacity表示圆内填充透明度。完整API。

　　效果：

　　接下来添加动画效果。这里用到了svg的SMIL animation。

　　attributeName表示动画进行改变的是图像的什么属性；begin为开始时间，单位为秒；from为开始值，to为目标值，其中from可选，dur表示动画持续时间。如果不添加repeatCount属性，表示动画执行一次便结束。

　　效果：

　　我们的图片是需要不停的扩散的，于是添加repeatCount属性，让其无限循环。

　　indefiniter表示无限循环至电脑死机。

　　效果：

　　设计里，我们的扩散环有三环，然后每环延迟0.5s释放，当释放至最大消失，由此循环。

; "复制代码")

; "复制代码")

　　其中，begin为动画开始时间，可以设置具体的时间秒数，也可以根据animate 的id值，来获取该id的animate动画开始结束时间，然后添加偏移数据，来控制多个动画的依序进行。

　　效果：

　　到这里，其实已经达到效果了，不过我们可以进一步添加一个效果，让圆环在扩散过程中慢慢消失。并且将圆环宽度设置为5px。

; "复制代码")

; "复制代码")

　　最终效果：

　　到这里，这个svg版声纹扩散动画已经做完了。

原网址: 访问
创建于: 2020-03-01 17:32:50
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论