js快速制作css3动画效果插件,一款模拟CSS3动画的js插件-move.js

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

安装方法

$ component install visionmedia/move.js

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

使用方法

下面是一个例子：我们将一个矩形移动到(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插件的介绍。