从 tween.js 中提取补间值

Question

如果我有一个运行时间为 2000 毫秒的补间，并且我想在 1000 毫秒时提取补间值，我将如何执行此操作？ 正在使用 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 源就会发现它保留了所有的 补间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 的“理论” /补间函数（如果您有兴趣）。

Answer 2

只需使用 setTimeout() 并让计时器在 1000 毫秒后运行：

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