MorphSVGPlugin使用方法

载入MorphSVGPlugin文件

MorphSVGPlugin是GreenSock 365体育官网-ribo88_365手机体育投注_365体育在线国外网址平台用于SVG变形的插件,可以在各形状之间进行平滑的变形365体育官网-ribo88_365手机体育投注_365体育在线国外网址。

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

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

下载MorphSVGPlugin

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


制作初始SVG

准备一只鸡:

制作变化后的SVG

准备一只兔子

处理SVG

将鸡和兔子放在一起并隐藏兔子






使用TweenMax对SVG进行变形365体育官网-ribo88_365手机体育投注_365体育在线国外网址

将鸡变成兔子

TweenMax.to("#cock", 3, {morphSVG:"#rabbit" });
?
运行结果:
  • HTML
  • CSS
  • JS
  • 展示



#rabbit{
display:none;
}
TweenMax.to("#cock", 2, {morphSVG:"#rabbit" ,delay:1 });
重播