這是一款HTML5 svg炫酷波浪線條動畫插件。該波浪動畫插件基于tweenMax和SVG，也可以作為jQuery插件來使用，可以制作出漂亮的波浪線條動畫特效。

使用方法

在頁面中引入jquery和TweenMax.min.js文件，以及wavify.js和jquery.wavify.js文件。

HTML結構

然后在頁面中創建一個空的SVG元素。

My Wave Animation

初始化插件

在頁面DOM元素加完畢之后，在path元素上調用wavify()方法來初始化插件。

$('#demo').wavify();

配置參數

該浪線條動畫插件的可用配置參數有：

container：父容器的選擇器，用于在尺寸變化時計算波浪的大小。默認為body。

color：波浪的顏色，默認為rgba(255,255,255, 0.20)。

bones：波浪的節點，默認值為3。

speed：波浪動畫的速度。默認值為0.15。

height：波峰至波谷高度。默認值為200。

amplitude：波傳播的垂直距離。默認值為100。

例如：

// For jQuery

var myWave = $('#myID').wavify({

height: 60,

bones: 3,

amplitude: 40,

color: 'rgba(150, 97, 255, .8)',

speed: .25

});

// For Vanilla JavaScript

var myWave = wavify( document.querySelect('#myId'), {

height: 60,

bones: 3,

amplitude: 40,

color: 'rgba(150, 97, 255, .8)',

speed: .25

})

方法

該浪線條動畫插件的可用方法有：

pause：暫停波浪動畫。

play：繼續執行波浪動畫。

kill：銷毀當前的波浪動畫。

reboot：重啟波浪動畫。

總結

以上是生活随笔為你收集整理的html5波浪线条,HTML5 svg炫酷波浪线条动画插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。