DrawSVGPlugin使用方法

优质

小牛编辑

131浏览

2023-12-01

载入DrawSVGPlugin文件

DrawSVGPlugin是GreenSock 动画平台用于描绘SVG路径的插件。可以对SVG 的<path>, <line>, <polyline>, <polygon>, <rect>, <ellipse> 进行绘图动画。

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

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

下载DrawSVGPlugin

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

<script src="js/TweenMax.min.js"> </script>
<script src="js/DrawSVGPlugin.min.js"> </script>

制作SVG

以下例子制作一条用于动画的SVG polyline折线：






<svg  width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polyline id="path" points="50,0 50,50 100,50 100,100 150,100 150,150" style="fill:none;stroke:red;stroke-width:5"/>
</svg>

在SVG上应用TweenMax动画

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

TweenMax.fromTo("#path", 4, {drawSVG:"10%"},{drawSVG:"90% 100%"});

运行结果：

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。