Ослабление анимации в холсте

Question

Пытается создать function, который позволяет анимировать любое число числовых свойств с заданной функцией ослабления, но это не совсем работает ... вызов этого не приводит к какому-либо движению. Все правильно настроено, когда я меняю то, что меняет значение, оно показывает, так что это означает, что это проблема в этом уравнении. Это либо не дает правильного значения, либо не дает правильных результатов.

function animate(obj, props, options) { 
    var start = Date.now(), 
    total = start + options.duration, 
    diff = total - start, 
    vals = {}, 
    id; 
    for (var v in props) { 
    vals[v] = props[v]; 
    } 
    (function update() { 
    var curr = Date.now(), 
     progress = Math.min((options.duration - (total - curr))/options.duration, 1); 
    for (var p in props) { 
     console.log(obj[p] = options.equation(curr, vals[p], obj[p] - vals[p], total)); 
    } 
    if (progress < 1) { 
     id = requestAnimationFrame(update); 
    } else { 
     id = cancelAnimationFrame(id); 
     if (typeof options.callback === 'function') { 
     options.callback(); 
     } 
    } 
    }()); 
} 

animate(rect, { 
    x: map.width/2, 
    y: map.height/2 
}, { 
    duration: 2000, 
    equation: function(t, b, c, d) { 
    return c * (t /= d) * t + b; 
    }, 
    callback: function() { 
    console.log('Whoa... it works.'); // ...yeah, nope. ;(
    } 
}); 

t = время, b = начальное значение, c = изменение значения, d = продолжительность.

Я предлагаю неправильные аргументы? Как я могу сделать эту работу?

Answer 1

Ваше время & аргументы продолжительности не должны суммироваться с Date.now().

Если вы хотите, чтобы ваше ослабление потребовалось 2000 мс, отправьте 2000 (d) в уравнение ослабления.

Время отправки в уравнение ослабления - это прошедшее время, поэтому отправьте Date.now()-startTime (t) в уравнение ослабления.

Предполагаю, что вы правильно установили начальное значение (b) и чистое изменение значения (c).