这是一款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:重启波浪动画。