html图标动画效果,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、元素必须有id属性。

1、必须有图形元素(,circle, rect, ellipse, polygon, line)。

Shape elements

Shape elements