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

你的时间＆amp;持续时间参数不应与Date.now()相加。

如果您希望缓和时间为2000毫秒，请将2000（d）发送到缓动方程式中。

发送到宽松方程的时间是经过的时间，因此将Date.now()-startTime（t）发送到缓动方程中。

我假设您已正确设置了起始值（b）和值（c）的净变化。

在Canvas中简化动画

1 个答案: