ramjet是一款可以实现DOM元素平滑过渡变形动画特效的js插件。该js插件可以从一个HTML DOM元素变形为另一种状态的DOM元素，在DOM元素变形的过程中会使用补间动画实现平滑过渡的动画效果。

Ramjet在视觉效果上像是DOM元素从一个状态变形为另一个状态。实际上它是使用克隆技术，通过复制元素及其子元素，改变第二个元素（目标元素）使它和第一个元素完全重叠起来，然后使两个元素一起动画直到第一个元素和第二个元素的大小和位置相同。

使用方法

使用该变形动画插件先要引入ramjet.js文件。

<script src='ramjet.js'></script>                
              

HTML结构

可以使用任意两个DOM元素来制作它们之间的变形过渡动画，例如使用两个<div>元素：

<div id='a' style='background-color: red; font-size: 4em; padding: 1em;'>a</div>
<div id='b' style='background-color: blue; font-size: 4em; padding: 1em;'>b</div>                
              

初始化插件

在页面加载之后，使用下面的方法来调用这两个<div>元素的变形动画。

<script>
    // to repeat, run this from the console!
    ramjet.transform( a, b );
</script>                
              

下面是在ISO 8上使用该插件的效果。

在现代浏览器中，动画的过渡效果使用CSS3来实现。

API

ramjet.transform( a, b[, options] )

• a：第一个DOM元素，变形过渡动画的开始状态元素。
• b：第二个DOM元素，变形过渡动画结束状态的元素。
• options：可以使用下面的参数：
• done：当过渡动画结束时的回调函数。
• duration：过渡动画的持续时间，单位毫秒，默认值400。
• easing：过渡动画的easing效果。可传入0-1之间的数值。
• useTimer：默认情况下，ramjet使用CSS3动画。如果使用SVG作为过渡动画元素，或在旧的浏览器上插件会回退到基于定时器的动画（例如requestAnimationFrame或setTimeout）。该选项设置为true可以使插件一直使用基于定时器的动画。

ramjet.hide( ...nodes )

该方法可以方便的将各个节点的透明度设置为0。

ramjet.show( ...nodes )

该方法和ramjet.hide相反。

ramjet.linear, ramjet.easeIn, ramjet.easeOut, ramjet.easeInOut

一些easing动画效果。

浏览器兼容

该插件已在下面的浏览器中进行了测试：

• IE9+
• Chrome (desktop 和 Android)
• Firefox
• Safari 6+
• mobile Safari

关于该插件的更多详细信息请参考：https://github.com/rich-harris/ramjet

在线预览    源码下载