zhanhongtao/fx.js

JavaScript 动画基础库

动画骨架

动画基础库支持根据时间或步数来控制动画进度 - (js 不可避免丢帧问题), 回调函数简单, 仅返回进度百分比, 开发者可根据百分比做任意动画.

使用代码

demo 元素在 500ms 内, 向右移动 260px 距离.

var duration = 500; // 500ms
var delta = 260;
var dom = document.getElementById('demo');
FX(duration, function(percentage) {
  dom.style.transform = 'translateX(' + delta * percentage + 'px)';
});

API

• var fx = FX(duration, handler[, byStep]);
• fx.play();
• fx.pause( boolean );
• fx.resume();

其它

可使用 generateBezier.js 生成需要使用的缓动函数(二次贝塞尔曲线); 两个控制点可以在 http://cubic-bezier.com/ 生成!

注: generateBezier.js 来自 velocity.js update: 2015-02-3

fx.js's Issues

ease

[
  [ "ease", [ 0.25, 0.1, 0.25, 1.0 ] ],
  [ "ease-in", [ 0.42, 0.0, 1.00, 1.0 ] ],
  [ "ease-out", [ 0.00, 0.0, 0.58, 1.0 ] ],
  [ "ease-in-out", [ 0.42, 0.0, 0.58, 1.0 ] ],
  [ "easeInSine", [ 0.47, 0, 0.745, 0.715 ] ],
  [ "easeOutSine", [ 0.39, 0.575, 0.565, 1 ] ],
  [ "easeInOutSine", [ 0.445, 0.05, 0.55, 0.95 ] ],
  [ "easeInQuad", [ 0.55, 0.085, 0.68, 0.53 ] ],
  [ "easeOutQuad", [ 0.25, 0.46, 0.45, 0.94 ] ],
  [ "easeInOutQuad", [ 0.455, 0.03, 0.515, 0.955 ] ],
  [ "easeInCubic", [ 0.55, 0.055, 0.675, 0.19 ] ],
  [ "easeOutCubic", [ 0.215, 0.61, 0.355, 1 ] ],
  [ "easeInOutCubic", [ 0.645, 0.045, 0.355, 1 ] ],
  [ "easeInQuart", [ 0.895, 0.03, 0.685, 0.22 ] ],
  [ "easeOutQuart", [ 0.165, 0.84, 0.44, 1 ] ],
  [ "easeInOutQuart", [ 0.77, 0, 0.175, 1 ] ],
  [ "easeInQuint", [ 0.755, 0.05, 0.855, 0.06 ] ],
  [ "easeOutQuint", [ 0.23, 1, 0.32, 1 ] ],
  [ "easeInOutQuint", [ 0.86, 0, 0.07, 1 ] ],
  [ "easeInExpo", [ 0.95, 0.05, 0.795, 0.035 ] ],
  [ "easeOutExpo", [ 0.19, 1, 0.22, 1 ] ],
  [ "easeInOutExpo", [ 1, 0, 0, 1 ] ],
  [ "easeInCirc", [ 0.6, 0.04, 0.98, 0.335 ] ],
  [ "easeOutCirc", [ 0.075, 0.82, 0.165, 1 ] ],
  [ "easeInOutCirc", [ 0.785, 0.135, 0.15, 0.86 ] ]
]