使用 SVG 来实现波浪 (wave) 动画效果
如下图所示的波浪动画效果,实现方法有很多,比如CSS或者是js等方法都可以实现。不过,要是使用SVG来实现的,我觉得比其它两种方法都要简单。这篇文章就来讲讲使用SVG来实现类似这样的波浪动画效果是多么的简单。
先来分析下这个波浪效果的实现原理。
波浪效果主要是由两个动画构成,一个是波浪上下位置的变化即改变元素的Y轴的值;另外一个波浪滚动的效果,其实是改变一个大的由SVG绘制的波浪的X轴的变化形成的。
整个效果的一个关键是使用矢量设计软件比如AI来设计一个波浪的形状:
类似的波浪形状使用AI中的钢笔工具很轻松就能绘制出来,SVG代码如下:
<svg class="wave-svg" xmlns="http://www.w3.org/2000/svg" data-name="3-waves" viewBox="0 0 600 215.43"><title>wave shape</title><path class="871c1787-a7ef-4a54-ad03-3cd50e05767a" d="M639,986.07c-17-1-27.33-.33-40.5,2.67s-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06S456,987.07,439,986.07s-27.33-.33-40.5,2.67-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06S256,987.07,239,986.07s-27.33-.33-40.5,2.67-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06v205.06h600V996S656,987.07,639,986.07Z" </path></svg>
SVG默认路经填充是黑色的,可以在AI中直接定义路经的颜色,也可以通过样式来定义填充颜色。
波浪形状有了,下面来实现动画效果,先来定义基本的HTML效果:
<div class="wrapper">
<h3>animated svg</h3>
<div>
<div class="wave-svg-shape">
<svg class="wave-svg" xmlns="http://www.w3.org/2000/svg" id="738255fe-a9fa-4a5e-963a-8e97f59370ad" data-name="3-waves" viewBox="0 0 600 215.43"><title>wave shape</title><path class="871c1787-a7ef-4a54-ad03-3cd50e05767a" d="M639,986.07c-17-1-27.33-.33-40.5,2.67s-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06S456,987.07,439,986.07s-27.33-.33-40.5,2.67-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06S256,987.07,239,986.07s-27.33-.33-40.5,2.67-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06v205.06h600V996S656,987.07,639,986.07Z" transform="translate(-76 -985)"></path></svg>
</div>
</div>
</div>
类名为wave-svg-shape用来实现波浪在Y轴位置变化的动画效果;类名为wave-svg用来实现波浪在X轴变化的动画效果。
定义基本的CSS:
body > .wrapper {
margin: 50px auto;
text-align: center;
}
h3 {
margin-bottom: 50px;
}
body > .wrapper > div {
width: 100px;
height: 100px;
overflow: hidden;
display: block;
margin: 0 auto;
position: relative;
}
.wave-svg-shape {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 100%;
overflow: hidden;
transform: translateX(-100px);
}
.wave-svg-shape .wave-svg {
width: 100%;
height: auto;
overflow: hidden;
float: left;
fill: #00A1DF;
margin: 0;
}
在样式中,使用transform定义了波浪在X轴的初始位置,并且改变了波浪形状的填充颜色。
接下来是来编写两个动画效果的animation的keyframe,首先是类名为wave-svg-shape的动画效果,主要是transform来实现:
@keyframes fillUpSvg {
0% {
transform: translateY(calc(100px/2)) scaleY(0);
}
50% {
transform: translateY(0) scaleY(1);
}
100% {
transform: translateY(calc(100px/2)) scaleY(0);
}
}
从上面代码中可以看出主要是用来translateY和scaleY这两个属性,在初始的0%的点,元素在Y轴的位置为50px并且在Y轴的方向上的缩小为0,这样元素刚好是在可视范围之外。然后再改变元素的值为默认的值,就实现了波浪上下滚动的动画效果。
上下效果实现了,接下来是类名wave-svg元素在X轴上的滚动动画效果:
@keyframes waveSvgAnim {
0% {
transform: translateX(calc(-100px * 2));
}
100% {
transform: translateX(100px * 2);
}
}
这里就简单了,就是移动元素在X轴上的位置。整体CSS代码如下:
body > .wrapper {
margin: 50px auto;
vertical-align: top;
text-align: center;
}
h3 {
margin-bottom: 50px;
}
body > .wrapper > div {
width: 100px;
height: 100px;
overflow: hidden;
display: block;
margin: 0 auto;
position: relative;
}
.wave-svg-shape {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 100%;
overflow: hidden;
transform: translateX(-100px);
animation: fillUpSvg 10s ease-in-out infinite;
}
.wave-svg-shape .wave-svg {
width: 100%;
height: auto;
overflow: hidden;
float: left;
fill: #00A1DF;
margin: 0;
animation: waveSvgAnim 1s linear infinite;
}
@keyframes fillUpSvg {
0% {
transform: translateY(calc(100px/2)) scaleY(0);
}
50% {
transform: translateY(0) scaleY(1);
}
100% {
transform: translateY(calc(100px/2)) scaleY(0);
}
}
@keyframes waveSvgAnim {
0% {
transform: translateX(calc(-100px * 2));
}
100% {
transform: translateX(100px * 2);
}
}
一个优雅的波浪滚动动画效果就实现了。这样类似的效果在一些加载动画上面用的比较多。
现在浏览器对SVG的支持越来越好了,特别是移动端可以大胆的使用。好好的使用SVG这一利器,不仅能提高动画开发的效率,还可以大大提升动画的趣味性。
使用 SVG 来实现波浪 (wave) 动画效果的更多相关文章
- 使用SVG生成的奔跑吧兄弟的动画效果
在线演示 本地下载 缩放一下在线演示效果窗口,看看不同大小下的动画是不是都显示的非常完美? 体验一下SVG的强大之处吧!
- 纯CSS实现帅气的SVG路径描边动画效果(转载)
本文转载自: 纯CSS实现帅气的SVG路径描边动画效果
- SVG的路径动画效果
使用SVG animateMotion实现的一个动画路径效果,相关代码如下. 在线调试唯一地址:http://www.gbtags.com/gb/debug/c88f4099-5056-4ad7-af ...
- 如何使用SVG生成超酷的页面预加载素描动画效果
在线演示 本地下载 1 SVG简介 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 2 SVG的特点 与其他图像 ...
- iOS CAShapeLayer、CADisplayLink 实现波浪动画效果
iOS CAShapeLayer.CADisplayLink 实现波浪动画效果 效果图 代码已上传 GitHub:https://github.com/Silence-GitHub/CoreAnima ...
- 用HTML和CSS实现WWDC 2015上的动画效果
用HTML和CSS实现WWDC 2015上的动画效果 动画效果WWDC 2015 原文:https://cssanimation.rocks/wwdc15/ 译者:周晓楷(@Helkyle) 每年 ...
- 赞!15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 12个来自 Codrops 的创新交互和动画效果
产品的用户体验是否被用户所接受,很大一部分取决于交互界面的设计,交互界面设计是整个产品设计中的核心,对于产品品质有着决定性的影响.这里集合了12个来自 Codrops 的创新的界面交互和动画效果,值得 ...
- 运动曲线提升CSS动画效果
原文链接 译文\译者鞠大宝 先有UI动画,然后才会有好的UI动画.好的动画会让人惊叹“哇哦!”——因为页面看上去很流畅.很漂亮,最重要的是,自然,一点都不会让人觉得不和谐或者僵硬死板.如果你经常逛Dr ...
随机推荐
- JavaWeb笔记(十一)Maven
什么是Maven Maven是Apache旗下一款开源自动化的项目管理工具,它使用java语言编写,因此Maven是一款跨平台的项目管理工具. 主要功能 项目构建 在实际开发中,不仅仅是写完代码项目就 ...
- hadoop-hdfs(三)
HDFS概念 1 数据块* HDFS的一个数据块默认是64M,与元数据分开管理. 优点: 数据块的大小设计的较大,所以寻址占传输的时间比例较小,只需要计算传输速度即可. 便于简化管理,利于计算剩余空间 ...
- IPV4的地址是如何分类的?网络号的范围分别是多少?
1. A类地址 (1)A类地址第1字节为网络地址,其它3个字节为主机地址. (2)A类地址范围:1.0.0.1—126.255.255.254 (3)A类地址中的私有地址和保留地址: ① 10.X.X ...
- input file request.files[] 为空
需要在 form 里设置 一句话 : $('form').attr("enctype", "multipart/form-data"); <form e ...
- 多线程 线程池 ExecutorService
package org.zln.thread; import java.util.Date; import java.util.concurrent.ExecutorService; import j ...
- mysql外网链接
1:设置mysql的配置文件 /etc/mysql/my.cnf 找到 bind-address =127.0.0.1 将其注释掉://作用是使得不再只允许本地访问: 重启mys ...
- CSS Sprites技术
CSS Sprites技术,国内很多人也叫雪碧图,因为sprite麻 (你买一瓶雪碧就看得到大大的sprite字样了) 主要用于将网站的零碎图标的img标签取代,因为每个img标签引用的src就会造成 ...
- AGC019-E Shuffle and Swap
给定两个长度为\(n\le 10^5\)的\(01\)串 \(A, B\), 满足 \(1\) 的数量相等 求通过下列方式将\(A\)变成\(B\)的概率 (mod意义下) 构造序列\(a,b\). ...
- bzoj 1111 - 四进制的天平
Description 给定 1000的十进制数, 求 最小的 四幂拆分 方案 有多少种 Solution 先大除法 \(n\log_4(n)\)次取余转化为 四进制数. 然后从 低位 往 高位 \( ...
- Extend Html.EditorFor MVC
原文发布时间为:2011-09-07 -- 来源于本人的百度文章 [由搬家工具导入] http://aspadvice.com/blogs/kiran/archive/2009/11/29/Addin ...