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“命名空间”中,默认的缓动功能是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的“理论”.

标签：tween,javascript
来源： https://codeday.me/bug/20191101/1986291.html