輕量級HTML5插件使用jQuery繪制SVG圖形輪廓線路徑動畫教程

看到網頁上炫酷的圖形輪廓線路徑動畫妳是否會動心,想要自己來制作壹個呢?其實這個特效實現起來並不難,使用輕量級HTML5插件jquery-drawsvg就可以實現了,jquery-drawsvg是壹款輕量級的使用jQuery來繪制SVG圖形輪廓線路徑動畫的插件。該插件使用jQuery內置的動畫引擎來使SVG元素中path元素產生動畫,其底層實現使用的是stroke-dasharray和stroke-dashoffset屬性。

該SVG路徑動畫插件的特點有:

輕量級,壓縮後小於2kb

使用簡單

支持Easing過渡動畫效果

演示地址:/Demo/201509112558.html

插件下載地址:/1509/201509111546.zip

使用方法:

使用該SVG圖形輪廓線路徑動畫插件需要引入jQuery和jquery.drawsvg.js文件。

<script src="js/jquery.min.js"></script>

<script src="js/jquery.drawsvg.js"></script>

初始化插件

在頁面DOM元素加載完畢之後,可以通過下面的方法來使SVG圖形生成輪廓線動畫效果。

首先將初始化的對象實例保存為壹個變量:

var mySVG = $('#my_svg_element').drawsvg();

然後就可以執行動畫效果了:

mySVG.drawsvg('animate');

配置參數

下面是該SVG路徑動畫創建的可用配置參數:

參數類型默認值描述durationInteger1000完成每壹個路徑動畫的持續時間staggerInteger200每壹個路徑動畫開始前的延遲時間easingStringswing使用jQuery

Easing插件的過渡動畫效果reverseBooleanfalse是否反向繪制callbackFunctionfunction()

{}路徑動畫完成之後的回調函數

上一篇:騰訊WeTest通過TMMi 3級認證

下一篇:如何查看android sdk版本