Javascript 在画布中缓和动画

Javascript 在画布中缓和动画,javascript,html,animation,canvas,easing,Javascript,Html,Animation,Canvas,Easing,尝试创建一个可以使用给定的缓和函数为任意数量的数值属性设置动画的函数,但它不太管用。。。调用它不会导致任何运动。所有设置都是正确的,当我改变值的变化时,它会显示出来,这意味着这里的问题是方程。它要么没有给出正确的值,要么没有得到正确的值 function animate(obj, props, options) { var start = Date.now(), total = start + options.duration, diff = total - start,

尝试创建一个可以使用给定的缓和函数为任意数量的数值属性设置动画的函数,但它不太管用。。。调用它不会导致任何运动。所有设置都是正确的,当我改变值的变化时,它会显示出来,这意味着这里的问题是方程。它要么没有给出正确的值,要么没有得到正确的值

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. ;(
  }
});
函数动画(对象、道具、选项){
var start=Date.now(),
总计=开始+选项。持续时间,
差异=总启动,
VAL={},
身份证件
用于(道具中的变量v){
VAL[v]=道具[v];
}
(函数更新(){
var curr=Date.now(),
进度=Math.min((options.duration-(total-curr))/options.duration,1);
for(道具中的var p){
console.log(obj[p]=options.equation(curr,vals[p],obj[p]-vals[p],total));
}
如果(进度<1){
id=requestAnimationFrame(更新);
}否则{
id=取消动画帧(id);
if(typeof options.callback==='function'){
options.callback();
}
}
}());
}
动画(矩形{
x:map.width/2,
y:地图高度/2
}, {
期限:2000年,
方程:函数(t,b,c,d){
返回c*(t/=d)*t+b;
},
回调:函数(){
console.log(‘哇……它工作了’);/…是的,没有(
}
});
t=时间,b=起始值,c=值的变化,d=持续时间


我给它的参数是错误的吗?我该怎么做呢?

您的时间和持续时间参数不应与
Date.now()相加

如果您希望您的放松时间为2000毫秒,则将
2000
(d)发送到放松等式中

发送到缓和方程中的时间是经过的时间,因此将
Date.now()-startTime
(t)发送到缓和方程中


我假设你已经正确地设置了起始值(b)和净变化值(c)。

部分是的。但我自己计算了其余部分——对于值的变化,我传递的是从当前值中减去的原始值,而它实际上应该是从目标值中减去的原始值。