svg波浪动画

LeoHsiun 发布于2019-08-21 11:52 / 1623人阅读

摘要：分析由上图可以看出，波浪动画是由多个不同的波浪组成，而每个波浪则是由近似正弦图形组成，最后的波动效果，其实是静态的波浪循环向左运动产生的。

之前做过CSS动画、canvas动画，但svg动画第一次做，最终效果如下图所示。

分析

由上图可以看出，波浪动画是由多个不同的‘波浪’组成，而每个波浪则是由近似正弦图形组成，最后的‘波动’效果，其实是静态的波浪循环向左运动产生的。

同时介绍后面会用到的几个svg相关标签：

path：定义形状的基础元素，其中d属性就是图形的路径。静态的波浪就是这个元素绘制的，后面会再多带带介绍

animateTransform：定义目标元素的变形属性，波浪的循环移动就是使用这个属性实现的

g：组合对象的容器

绘制单个静态波浪

上面是写好的单个波浪，其中d属性绘制了形状，fill属性表示填充的颜色。

d属性中使用了以下几个命令：

M：M x y表示移动到(x, y)点( svg中左上角是(0,0)点 )
Q：Q x1 y1, x2 y2表示绘制二次贝塞尔曲线，x1 y1为二次贝塞尔的控制点，x2 y2为终点，可以使用贝塞尔生产曲线工具帮助生成。
T：T x y表示生成上一个二次贝塞尔曲线的镜像，其终点坐标为(x,y)
V：V y表示从当前点(x0,y0)垂直移动到(x0, y)
H：H x表示从当前点(x0, y0)水平移动到(x, y0)

所以上面代码可以翻译后为：首先移动到(0,70)处，再绘制起点为(0,70)，终点为(150,70)，控制点为(75,39)的二次贝塞尔曲线，接着绘制已(300,70)为终点的镜像二次贝塞尔曲线，最后依次移动到(100,70)，(0,70)，(0,0),从而形成闭合曲线。

动起来

增加了animateTransform后就动其来了，该标签的几个属性含义为：

attributeName：需要运动的属性
type：具体运动的类型
from：运动初始值
to：运动终点值
dur：运动时间
repeatCount：重复次数，indefinite为无限循环

看了后就发现其实很简单，有一下几个点需要注意，首先path绘制图形的路径至少是svg宽加上from-to的宽，第二，to的值为周期的n/2倍，这个可以想象一下正弦的波形。注意了这两点，波浪看起来已经有点模样了。

多个波浪合成

只有一个波浪，看起来还是不够逼真，将多个不同周期波浪合成，并填充不同透明度的颜色形成最终效果。

抽象成组件

当手写两个波浪之后，就会发现很多地方是相同的，总结之后会发现只有svg的宽高、周期、峰值、移动速度、初始偏移量（即正弦的初相位）、填充颜色、叠加波浪个数这几个是变化的，因此可以做成组件，隐藏内部的复杂度。

GPU云服务器云服务器 svg动画波浪线大波浪 html5波浪滚动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87219.html

svg波浪动画

摘要：分析由上图可以看出，波浪动画是由多个不同的波浪组成，而每个波浪则是由近似正弦图形组成，最后的波动效果，其实是静态的波浪循环向左运动产生的。之前做过CSS动画、canvas动画，但svg动画第一次做，最终效果如下图所示。showImg(https://segmentfault.com/img/bVSKfU?w=428&h=198); 分析由上图可以看出，波浪动画是由多个不同的‘波浪’...

voyagelab 2019-08-02 15:57 评论0 收藏0
案例 - 收藏集 - 掘金

摘要：同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候，遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。闲话图片上传 - 掘金作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com ...

张金宝 2019-08-20 17:44 评论0 收藏0
案例 - 收藏集 - 掘金

摘要：同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候，遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。闲话图片上传 - 掘金作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com ...

huangjinnan 2019-08-29 12:54 评论0 收藏0
学习小结 | Vue+TweenMax做一个温度计

摘要：原作者效果内容是一个温度显示仪器，上方一个当前温度显示，下方还有一个温度刻线。原教程使用了布局，给整个容器加上了的高度，让在没有内容的时候也能被沾满。设置上部分占高度的，下部分为。温度的数据要从的实例中获取，然后进行一个输出。前言所谓站在巨人的肩膀上学习，是因为这个例子是来自于一个来自于国外的每周插件的栏目的教程，所以我很严肃的说清楚这点！这篇文章是自己通过这个例子的学习后，的一些...

smartlion 2019-08-29 16:08 评论0 收藏0
Codepen 每周精选：展现 WEB 魅力的 26 个页面特效（2018-6-4）

摘要：按下右侧的点击预览按钮可以在当前页面预览，点击链接可以打开原始页面。按下右侧的点击预览按钮可以在当前页面预览，点击链接可以打开原始页面。 1. 一个正 20 面体的骰子https://codepen.io/chrisvfrit... 2. 纯 css 写的夜间景色的视差滚动效果https://codepen.io/danbhala/p... 3. 机器人喝油的动画https://co...

AlexTuan 2019-08-29 15:35 评论0 收藏0