Tween.js动画算法使用示意实例页面

展示

代码

JS代码：

// zxx: 这里仅简单示意线性运动，完整代码（包括兼容性处理见demo页面源代码）
// 一些数据
// 当前时间
var start = 0;
// 初始值，因为一开始球在最左边，因此是0
var begin = 0;
// 容器宽度减去球的宽度
var end = (800 - 42);
// 持续时间
var during = 100;

// 运动
var step = function() {
    // 当前的运动位置
    var left = Math.tween.Linear(start, begin, end, during);
    // 位移
    eleBall.style.transform = 'translateX(' + left + 'px)';
    
    // 时间递增
    start++;
    // 如果还没有运动到位，继续
    if (start <= during) {
         requestAnimationFrame(step);
    } else {
        // 动画结束，这里可以插入回调...
        // callback()...
    }
};
// 开始执行动画
step();



// 这是使用更容易使用的封装后的示例代码
document.getElementById('mathBall').onclick = function () {
    var ball = this;
    Math.animation(0, 800 - 42, function (value) {
        if (history.pushState) {
            ball.style.transform = 'translateX(' + value + 'px)';
        } else {
            ball.style.left = value + 'px';    
        }
    }, 'Bounce.easeInOut', 600);    
};