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插件的介绍。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!