在使用支付寶的時候，我發(fā)現(xiàn)了一個很有意思的功能——波浪效果，于是我鉆研了一下午，覺得這玩意還真是挺有意思，大致是svg+css3來實現(xiàn)

于是我就簡單仿寫了一個波浪特效

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

知乎視頻?www.zhihu.com

1.需求分析

還是來做常規(guī)的需求分析，首先我談?wù)勎覟槭裁催x擇svg

SVG 是一種基于 XML 語法的圖像格式。
其他圖像格式都是基于像素處理的，SVG 則是屬于對圖像的形狀描述，
所以它本質(zhì)上是文本文件，體積較小，且不管放大多少倍都不會失真。
此外SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)，SVG 與諸如 DOM 和 XSL 之類的 W3C 標(biāo)準(zhǔn)是一個整體。

為了更好地顯示波浪，我們造一個圓形，讓波浪在里面打轉(zhuǎn)轉(zhuǎn)。

html結(jié)構(gòu)如下：

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

css結(jié)構(gòu)如下：

@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;} }

靜態(tài)效果

好，現(xiàn)在呢，我們來真正地看一遍這個東西是咋回事

圓的width和height都是固定的，我們要保證svg的高度在y軸上的高度是和圓形保持一致的，且X軸的寬度要明顯大于圓形的寬度。

我這里假設(shè)圓形的width=300px,height=300px

那么，svg的height = 300px, 但是為了保證后期的波浪滾動效果，width = 2*圓形寬度 = 600px

實際上，我們看效果圖就知道，整個svg是由2部分組成的

紅色部分是矩形，然后是4個弧形（黃色部分）

現(xiàn)在我們就開始來畫

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

這里我們從Y軸的100px處開始畫矩形，是為了給波浪留出100的空間

好，現(xiàn)在我們來畫第一個弧形波浪，就是圖中黃色的部分

<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>

增加動畫

現(xiàn)在靜態(tài)圖已經(jīng)做好了，那么我們就來畫動態(tài)的效果

還是在css中定義一個keyframe

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

接下來，我們對css進(jìn)行一定程度的結(jié)構(gòu)改造

.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，因為它默認(rèn)不是線性的，而是慢速收尾，所以會出現(xiàn)動畫效果在結(jié)束的關(guān)鍵幀之后，發(fā)生卡頓

這是不允許的，也是不科學(xué)的，所以需要改成linear

最后，我們就可以實現(xiàn)最終的效果了，因為實在太棒了，所以我們再看一遍

知乎視頻?www.zhihu.com

總結(jié)

以上是生活随笔為你收集整理的50兆 svg 文件超过_用svg+css3实现支付宝App波浪功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。