CSS3 动画库:move.js

Move.js是一款简单小巧的模拟CSS3动画的js插件。该插件可以完成CSS3的各种动画效果:移动、变形、倾斜、背景色渐变、旋转等。并且可以在动画中使用各种easing效果。

官网GitHubjQuery Leaf

使用方法

先画一个简单的盒子

.box {
  width: 200px;
  height: 200px;
  background-color: #f00;
}
<div class="box"></div>

属性值设置

使用 move.set(prop, val) 对属性进行修改。

属性值相加

使用 move.add(prop, val) 对指定属性的属性值进行相加。

move('.box')
  .add('margin-left', 300)
  .set('background', '#0f0')
  .end()

属性值相减

使用 move.sub(prop, val) 对指定属性的属性值进行相减。

move('.box')
  .sub('margin-left', 300)
  .set('background', '#0f0')
  .end()

动画结束

动画结束可以使用 move.end(callback),可选择性传入 callback。

move('.box')
    .set('background-color', 'green')
    .duration(1000)
    .end(() => {
      move('.box')
        .set('background-color', 'red')
        .duration(1000)
        .end();
    })

[warning] 注意: 动画结束必须使用 end() 方法结束动画,否则动画将无效。


then([fn])

设置异步动画,在前面的动画执行完成后调用 then,可以选择性传入回调。

let moveBack = move('.box')
  .set('background-color', 'red')
  .x(0);
move('.box')
  .set('background-color', 'green')
  .x(500)
  .then(moveBack)
  .end();
move('.box2')
  .set('background-color', 'red')
  .x(500)
  .scale(.5)
  .rotate(60)
    .then()
      .rotate(30)
      .scale(1.5)
      .set('border-radius', 5)
      .set('background-color', 'white')
      .then()
        .set('opacity', 0)
        .pop()
      .pop()
  .end();

设置动画时间

使用 move.duration(val) 设置动画时间。

move('.box')
  .add('margin-left', 100)
  .duration('2s')
  .end()

参数也可以是数值,毫秒

move('.box')
  .rotate(180)
  .duration(1000)
  .end()

设置延时动画

使用 move.delay(val) 设置延时动画。

move('.box')
  .set('background-color', 'blue')
  .delay('2s')
  .end();

位移

使用 move.to(x[, y]) 对元素进行位移,实际上是使用 css 中的 transform: translate3d(x, y, 0) 对元素进行移动,单位是 px。

move('.box')
  .to(500, 200)
  .end()

move.translate(x[, y])move.to(x[, y]) 的别名。

可以使用 move.x()move.y() 对位移进行分解。

move('.box')
  .x(500)
  .y(200)
  .end();

旋转

使用 move.rotate(deg) 对元素进行旋转,实际上是使用 css 中的 transform: rotate(deg) 对元素进行旋转。

move('.box')
  .rotate(180)
  .end()

拉伸

使用 move.skew(x[, y]) 对元素进行拉伸变形,实际上是使用 css 中的 transform: skew(x, y) 对元素进行拉伸。

move('.box')
  .skew(50)
  .end()

缩放

使用 move.scale(x[, y]) 对元素进行缩放,实际上是使用 css 中的 transform: scale(x, y) 对元素进行缩放。

move('.box')
  .scale(.5, .8)
  .end()

过渡

使用 move.ease() 设置过渡。

<div id="example">
    <!-- .box.box$*6 -->
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
    <div class="box box5"></div>
    <div class="box box6"></div>
</div>
move('.box1').x(400).end();
move('.box2').ease('in').x(400).end();
move('.box3').ease('out').x(400).end();
move('.box4').ease('in-out').x(400).end();
move('.box5').ease('snap').x(400).end();
move('.box6').ease('cubic-bezier(0,1,1,0)').x(400).end();
setTimeout(function(){
  move('.box1').x(0).end();
  move('.box2').x(0).end();
  move('.box3').x(0).end();
  move('.box4').x(0).end();
  move('.box5').x(0).end();
  move('.box6').x(0).end();
}, 1200);

内置的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)'

参考资料

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress