50兆 svg 文件超过_用svg+css3实现支付宝App波浪功能

在使用支付宝的时候，我发现了一个很有意思的功能——波浪效果，于是我钻研了一下午，觉得这玩意还真是挺有意思，大致是svg+css3来实现

于是我就简单仿写了一个波浪特效

照例，直接上功能，不多解释

知乎视频www.zhihu.com

1.需求分析

还是来做常规的需求分析，首先我谈谈我为什么选择svg

SVG 是一种基于 XML 语法的图像格式。
其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，
所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
此外SVG 是万维网联盟的标准，SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。

为了更好地显示波浪，我们造一个圆形，让波浪在里面打转转。

html结构如下：

<div class="padding-bor"><div class='bor'><svg class="posi"></svg></div>
</div>

css结构如下：

@theme-blue:#02A7F0;
.padding-bor{display: flex;justify-content: center;background-color:@theme-blue;height: 100%;position: absolute;width: 100%;overflow:hidden;.bor{align-self: center;border:1px solid @theme-blue;background-color: #fff;border-radius: 50%;width: 300px;height: 300px;}
}

静态效果

好，现在呢，我们来真正地看一遍这个东西是咋回事

圆的width和height都是固定的，我们要保证svg的高度在y轴上的高度是和圆形保持一致的，且X轴的宽度要明显大于圆形的宽度。

我这里假设圆形的width=300px,height=300px

那么，svg的height = 300px, 但是为了保证后期的波浪滚动效果，width = 2*圆形宽度 = 600px

实际上，我们看效果图就知道，整个svg是由2部分组成的

红色部分是矩形，然后是4个弧形（黄色部分）

现在我们就开始来画

<svg height="300px" width="600px" class="posi"><!--矩形--><rect width="100%" x="0" y="100"/>
</svg>

这里我们从Y轴的100px处开始画矩形，是为了给波浪留出100的空间

好，现在我们来画第一个弧形波浪，就是图中黄色的部分

<svg height="300px" width="600px" class="posi"><!--矩形--><rect width="100%" x="0" y="100"/><!--第一个弧形--><path fill="#fff" d="M0 100, Q75 175,150 100"/>
</svg>

以此类推，我们来画后面的几个弧形

<svg height="300px" width="600px" class="posi"><!--矩形--><rect width="100%" x="0" y="100"/><path fill="#fff" d="M0 100, Q75 175,150 100"/><path fill="blue" d="M150 100, Q225 25,300 100"/><path fill="#fff" d="M300 100, Q375 175,450 100"/><path fill="blue" d="M450 100, Q525 25,600,100"/>
</svg>

增加动画

现在静态图已经做好了，那么我们就来画动态的效果

还是在css中定义一个keyframe

@keyframes move{from {left:0}to{left:-300px}
}

接下来，我们对css进行一定程度的结构改造

.padding-bor{display: flex;justify-content: center;height: 100%;position: absolute;width: 100%;.bor{align-self: center;border:1px solid #02A7F0;background-color: #fff;border-radius: 50%;width: 300px;height: 300px;overflow:hidden;.posi{left:0;position: relative;animation-name: move;animation-duration: 2.5s;animation-iteration-count:infinite;animation-delay: 0;animation-timing-function: linear;}}
}

这里要特别注意animation-timing-function，因为它默认不是线性的，而是慢速收尾，所以会出现动画效果在结束的关键帧之后，发生卡顿

这是不允许的，也是不科学的，所以需要改成linear

最后，我们就可以实现最终的效果了，因为实在太棒了，所以我们再看一遍

知乎视频www.zhihu.com