html5 svg炫酷图标变形动画特效

这是一款效果非常炫酷的html5 svg炫酷图标变形动画特效。类似的效果有：html5 svg和css3超酷图标动画特效。

使用方法

1、添加一组SVG图标到你的HTML文件中。

2、通过调用new SVGMorpheus(element)方法来创建一个SVG Morpheus对象。SVG图标可以包含在Object/IFrame/Inline中。可以是一个DOM元素或CSS选择器，例如：

var myIcons = new SVGMorpheus('#myIconSet');
                

3、在初始化之后，你得到一个带有to(ID)方法的SVGMorpheus对象。ID是图标集中的图标id，使用它来从一个图标变形到另一个图标。

myIcons.to('icon1');
                

可用参数

SVGMorpheus构造函数

var myIcons = new SVGMorpheus(element, options, callback);
                

• element：Object/IFrame/SVG元素包含的一个图标集。可以是一个DOM元素或一个CSS选择器。
• options：可选，对象指定的默认参数。
• options.iconId：可选，初始化后显示的SVG图标的id。默认值为图标集中的最后一个图标的id。
• options.duration：可选，设置一个默认的transition动画的duration。单位毫秒，默认值为750。
• options.easing：可选，设置一个默认的transition动画的easing效果。默认值为quad-in-out。
• options.rotation：可选，设置一个默认SVG图标旋转方式。clock = clockwise, counterclock = counterclockwise, random = 随机设置clock/counterclock, none = 不旋转，默认值为clock（顺时针）。
• callback：可选，设置SVG图标旋转结束后的回调事件。

SVGMorpheus.to()

myIcons.to(iconId, options, callback);
                

• iconId：下一个变形图标的id。
• options：可选，对象指定的默认参数。
• options.duration：可选，设置一个默认的transition动画的duration，单位毫秒。
• options.easing：可选，设置一个默认的transition动画的easing效果。
• options.rotation：可选，设置一个默认SVG图标旋转方式。clock = clockwise, counterclock = counterclockwise, random = 随机设置clock/counterclock, none = 不旋转，默认值为clock（顺时针）。
• callback：可选，设置SVG图标旋转结束后的回调事件。

支持的Easings效果

circ-in, circ-out, circ-in-out, cubic-in, cubic-out, cubic-in-out, elastic-in, elastic-out, elastic-in-out, expo-in, expo-out, expo-in-out, linear, quad-in, quad-out, quad-in-out, quart-in, quart-out, quart-in-out, quint-in, quint-out, quint-in-out, sine-in, sine-out, sine-in-out

图标集的html结构

SVG图标集要具有下面的html结构：

• 1、<g>元素必须有id属性。
• 1、必须有图形元素（<path>,circle, rect, ellipse, polygon, line）。

<svg>
  <g id="icon1">
    Shape elements
  </g>
  <g id="icon2">
    Shape elements
  </g>
</svg>
                

更多关于SVG图标变形的信息请参考：https://github.com/alexk111/SVG-Morpheus