Move.js

简单但强大的 JavaScript 动画曲线过渡库, 无任何依赖  github


匀速动画
move.linear([0, 800], , v => `translate3d(${v}px, 0, 0)`)

先加速后减速的动画
move.ease([0, 800], , v => `translate3d(${v}px, 0, 0)`)

ease2动画
move.ease2([0, 800], , v => `translate3d(${v}px, 0, 0)`)

控制点: (0, 0)、(1, 0)、(.5, 1)、(1, 1)
move.bezier([0, 800], , v => `translate3d(${v}px, 0, 0)`)
// 需手动添加, 首尾控制点(0,0)和(1,1)已锁定, 传入中间控制点坐标即可
move.extend({
  bezier: move.stdBezierCurve([1, 0], [.5, 1])
});

move.bezier([0, 800], v => {
  /*do something...*/
});

控制点: (0, 0)、(.5, -.5)、(0, 1)、(1, 1)
move.bezier2([0, 800], , v => `translate3d(${v}px, 0, 0)`)
// 需手动添加
move.extend({
  bezier2: move.stdBezierCurve([.5, -.5], [0, 1])
});

move.bezier2([0, 800], v => {
  /*do something...*/
});

控制点: (0, 0)、(.4, 1.5)、(.6, -1)、(.8, 1.5)、(1, 1)
move.bezier3([0, 800], , v => `translate3d(${v}px, 0, 0)`)
// 需手动添加
move.extend({
  bezier3: move.stdBezierCurve([.4, 1.5], [.6, -1], [.8, 1.5])
});

move.bezier3([0, 800], v => {
  /*do something...*/
});

初速度较大, 一直减速
move.easeOut([0, 800], , v => `translate3d(${v}px, 0, 0)`)

弹性动画
move.elastic([0, 800], , v => `translate3d(${v}px, 0, 0)`)

碰撞动画
move.collision([0, 800], , v => `translate3d(${v}px, 0, 0)`)

wave动画
move.wave([0, 800], , v => `translate3d(${v}px, 0, 0)`)

opposite动画
move.opposite([0, 800], , v => `translate3d(${v}px, 0, 0)`)

move.linear([0, 20], 20000, v => box.innerHTML = v.toFixed(2) )