缓动 Canvas 中的动画

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)。