一款模拟CSS3动画的js插件-move.js_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

Move.js是一款简单小巧的模拟CSS3动画的js插件。它可以完成CSS3的各种动画效果：移动、变形、倾斜、背景色渐变、旋转等。并且可以在动画中使用各种easing效果。类似插件可参考：可替代CSS3 transition和transform的jQuery插件

安装方法

可以通过component来安装：

$ component install visionmedia/move.js

也可以直接在页面中引入：

<script src='move.min.js'></script>

使用方法

下面是一个例子：我们将一个矩形移动到(500px, 200px)处，并将它旋转180deg，缩小.5，并倾斜它，在2秒钟内改变它的背景颜色。当上门的动画完成后，我们将它它的透明度设置为0，制作淡入淡出的效果，最后将它收缩0.1。

move('.square')
  .to(500, 200)
  .rotate(180)
  .scale(.5)
  .set('background-color', '#888')
  .set('border-color', 'black')
  .duration('2s')
  .skew(50, -10)
  .then()
    .set('opacity', 0)
    .duration('0.3s')
    .scale(0.1)
    .pop()
  .end();

可用Easing函数

以下是内置的easing函数定义：

'in':                'ease-in'
'out':               'ease-out'
'in-out':            'ease-in-out'
'snap':              'cubic-bezier(0,1,.5,1)'
'linear':            'cubic-bezier(0.250, 0.250, 0.750, 0.750)'
'ease-in-quad':      'cubic-bezier(0.550, 0.085, 0.680, 0.530)'
'ease-in-cubic':     'cubic-bezier(0.550, 0.055, 0.675, 0.190)'
'ease-in-quart':     'cubic-bezier(0.895, 0.030, 0.685, 0.220)'
'ease-in-quint':     'cubic-bezier(0.755, 0.050, 0.855, 0.060)'
'ease-in-sine':      'cubic-bezier(0.470, 0.000, 0.745, 0.715)'
'ease-in-expo':      'cubic-bezier(0.950, 0.050, 0.795, 0.035)'
'ease-in-circ':      'cubic-bezier(0.600, 0.040, 0.980, 0.335)'
'ease-in-back':      'cubic-bezier(0.600, -0.280, 0.735, 0.045)'
'ease-out-quad':     'cubic-bezier(0.250, 0.460, 0.450, 0.940)'
'ease-out-cubic':    'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
'ease-out-quart':    'cubic-bezier(0.165, 0.840, 0.440, 1.000)'
'ease-out-quint':    'cubic-bezier(0.230, 1.000, 0.320, 1.000)'
'ease-out-sine':     'cubic-bezier(0.390, 0.575, 0.565, 1.000)'
'ease-out-expo':     'cubic-bezier(0.190, 1.000, 0.220, 1.000)'
'ease-out-circ':     'cubic-bezier(0.075, 0.820, 0.165, 1.000)'
'ease-out-back':     'cubic-bezier(0.175, 0.885, 0.320, 1.275)'
'ease-out-quad':     'cubic-bezier(0.455, 0.030, 0.515, 0.955)'
'ease-out-cubic':    'cubic-bezier(0.645, 0.045, 0.355, 1.000)'
'ease-in-out-quart': 'cubic-bezier(0.770, 0.000, 0.175, 1.000)'
'ease-in-out-quint': 'cubic-bezier(0.860, 0.000, 0.070, 1.000)'
'ease-in-out-sine':  'cubic-bezier(0.445, 0.050, 0.550, 0.950)'
'ease-in-out-expo':  'cubic-bezier(1.000, 0.000, 0.000, 1.000)'
'ease-in-out-circ':  'cubic-bezier(0.785, 0.135, 0.150, 0.860)'
'ease-in-out-back':  'cubic-bezier(0.680, -0.550, 0.265, 1.550)'

在演示页面有更详细walk.js插件的介绍。