从tween.js中提取补间数值

Question

如果我有一个运行时间为2000ms的补间，我想提取1000ms的补间数值，我该怎么做呢？我正在使用Tween.js @ http://github.com/sole/tween.js

var position = {y: 0};  

t = new TWEEN.Tween(position)
    .to({ y: 300 })
    .onUpdate( function() {
      console.log(position.y);
    });

t.start(); // correctly runs the tween and logs tweened position.y values

现在，根据我收集到的信息，我应该能够连接到.update( tValue )，并让它在给定的tValue onUpdate处记录正确的补间后的值。相反，position.y仅输出起始位置值。

Github页面的第一个常见问题提示了这种能力，但我似乎不能让它工作。

谢谢!

Answer 1

快速浏览一下tween.js source就会发现，它将所有的tweening functions都保存在一个Tween.Easing“名称空间”中，并且默认的宽松函数是TWEEN.Easing.Linear.EaseNone。

它的轻松功能与我预期的略有不同，但一旦你知道你想要做什么，它就很容易独立于架构的其余部分使用。

function getTweenedValue(startVal, endVal, currentTime, totalTime, tweener) {
    var delta = endVal - startVal;
    var percentComplete = currentTime/totalTime;
    tweener ||= TWEEN.Easing.Linear.EaseNone;

    return tweener(percentComplete) * delta + startVal
}

var val = getTweenedValue(0,300,1000,2000);

像这样的东西应该是可行的。

我想起来了，如果你感兴趣的话，我之前也有一个相关的答案，它更多地讨论了easing/tweening functions的“理论”。

Answer 2

只需使用setTimeout()并在1000 ms之后运行一个计时器

setTimeout(function() {
  console.log(position.y);
}, 1000);