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

Canvas 中的缓动动画

Easing animations in Canvas

html

javascript

animation

canvas

easing