DrawSVGPlugin使用方法

载入DrawSVGPlugin文件

DrawSVGPlugin是GreenSock 365体育官网-ribo88_365手机体育投注_365体育在线国外网址平台用于描绘SVG路径的插件。可以对SVG 的, , , , , 进行绘图365体育官网-ribo88_365手机体育投注_365体育在线国外网址。

GreenSock 文件包中并没有包含DrawSVGPlugin 插件,因此需要另外下载。

首先下载DrawSVGPlugin破解版文件。DrawSVGPlugin并非免费插件,商用时请注意版权。

下载DrawSVGPlugin

在页面中载入TweenMax.min.js和DrawSVGPlugin.min.js文件


制作SVG

以下例子制作一条用于365体育官网-ribo88_365手机体育投注_365体育在线国外网址的SVG polyline折线:








在SVG上应用TweenMax365体育官网-ribo88_365手机体育投注_365体育在线国外网址

以10%的长度从polyline的起始位置移动到结尾

TweenMax.fromTo("#path", 4, {drawSVG:"10%"},{drawSVG:"90% 100%"});
?
运行结果:
  • HTML
  • CSS
  • JS
  • 展示


myTween=TweenMax.fromTo("#path", 4, {drawSVG:"10%"},{drawSVG:"90% 100%"});
myTween.yoyo(true).repeat(-1);
重播

drawSVG可设置绝对像数值或者百分比,例如{30,60}或{10%,25%}。0为起始点100%为终点,如果只设置一个值如{100%}则等同于{0,100%}或者true。