从tween.js中提取补间值

Question

如果我有一个运行时间为2000ms的tween，而我想在1000ms时提取tweened值，我该如何操作？ 我正在使用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 页面的第一个常见问题提示有这个功能，但我似乎无法使其正常工作。

谢谢！

- Casey Yee

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);

类似这样的应该可以工作。

---

我刚刚想起来，我之前也回答过一个相关问题，更深入地讲解了缓动函数/插值函数的“理论”，如果你感兴趣的话。

- J. Holmes

---

你对缓动函数的期望是什么样子的？这对我的目的非常有效。谢谢！ - Casey Yee

@CaseyYee 很多缓动框架都有类似于我的辅助函数 getTweenedValue 的签名接口，另一个答案也稍微提到了这一点。 - J. Holmes

Answer 2

只需使用setTimeout()，并在1000毫秒后启动计时器：

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

- Blender

---

我实际上并不想运行补间动画，只是想提取给定时间的值。 - Casey Yee

啊。如果你用t.update(1000)替换t.start()会发生什么？ - Blender

它运行了.onUpdate，但是position.y值没有改变。我可以使用不同的时间值多次运行.update()，它的响应完全相同。 - Casey Yee

我查看了源代码。尝试这个：t._easingFunction(1000)。它会输出什么？ - Blender