高性能的字体图标变形动画特效js插件

iconate是一款非常神奇的高性能的字体图标变形动画特效js插件。该字体图标变形动画特效可以将一个图标以炫酷的过渡动画方式转换为另一个图标。它支持Font-Awesome图标和Glyphicons图标，内置有19种过渡动画。

安装

可以通过NPM和Bower来安装该图标变形插件。

npm install iconate
bower install iconate                
              

该js插件同样也支持AMD 和 commonJS模块模式。

使用方法

使用这个字体图标变形动画特效先要引入iconate.min.css和iconate.min.js文件。

<link rel="stylesheet" href="iconate.min.css">
<script type="text/javascript" src="iconate.min.js">                
              

HTML结构

字体图标按正常的方式引入即可。例如使用一个Font-Awesome图标：

<i id="icon" class="fa fa-bars fa-lg"></i>                
              

初始化插件

在页面加载完毕之后，可以通过下面的方法来初始化该js插件。参数from表示原始的图标，to表示要变形的图标，animation是过渡动画效果。

var iconElement = document.getElementById('icon');
var options = {
    from: 'fa-bars',
    to: 'fa-arrow-right',
    animation: 'rubberBand'
};

iconate(iconElement, options);                
              

过渡动画

该字体图标变形动画特效内置了19种过渡动画类型：

• rollOutRight
• rollOutLeft
• rubberBand
• zoomOut
• zoomIn
• fadeOut
• fadeOutRight
• fadeOutLeft
• fadeOutTop
• fadeOutBottom
• horizontalFlip
• verticalFlip
• bounceOutBottom
• bounceOutTop
• bounceOutLeft
• bounceOutRight
• rotateClockwise
• rotateAntiClockwise
• tada

公共API

iconate(element, [, options] [, callback] )

• element：执行图标变形动画的图标元素。
• options：用于控制过渡动画的参数对象。
  • from：当前图标的class名称。
  • to：最终变形图标的class名称。
  • animation：上面提到的19种过渡动画类型中的一种。默认为"zoomOut"。
• callback：在图标变形完成之后的可选回调函数。

浏览器兼容

该字体图标变形动画特效已经在下面的浏览器中做过测试：

• chrome 4+
• ie 10+
• firefox 16+
• safari 6+
• opera 15+