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

当前位置:主页 > Html5库 > HTML5动画 > html5 svg炫酷图标变形动画特效
html5 svg炫酷图标变形动画特效
分享:

    插件介绍

    这是一款效果非常炫酷的html5 svg图标变形动画特效插件。该svg图标变形特效可以使各种svg图标进行来回的变形转换,变形过渡效果非常的平滑,效果非常不错。

    浏览器兼容性

    浏览器兼容性
    时间:2015-01-08
    阅读:
简要教程

这是一款效果非常炫酷的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