javascript - 从tween.js中提取补间值

如果我的补间动画的运行时间为2000毫秒，而我想提取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页面上的第一个FAQ问题暗示了这种能力，但我似乎无法使其正常工作。

谢谢!

最佳答案

快速浏览tween.js source会发现它将所有tweening functions保留在Tween.Easing“namespace”中，默认的缓动函数是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的“理论”。

关于javascript - 从tween.js中提取补间值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8935638/