javascript - 从 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 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的“理论”。如果你有兴趣。