Extract tween values from tween.js

Question

If i had a tween with a running duration of 2000ms and i wanted to extract the tweened value at 1000ms, how would i go about doing this? I am using 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

now, from what i can gather, i should be able to to .update(tValue) and have it log the correct tweened value at the given tValue onUpdate. Instead, position.y only outputs the starting position value.

The first FAQ question of the Github page hints of this ability, but i can't seem to get it to work.

Thanks!

score 4 · Accepted Answer · edited May 23 '17 at 12:04

A quick look at the tween.js source reveals that it keeps all of its tweening functions in a Tween.Easing "namespace", and the default easing function is TWEEN.Easing.Linear.EaseNone.

Its easing functions are a little different than what I was expecting, but are pretty easy to use independent of the rest of the architecture, once you know what you want to do.

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

Something like that should work.

I just remembered I also had a related answer a while ago that talks more about the "theory" of easing/tweening functions if you are interested.

What were you expecting the easing functions to look like? This works great for my purposes. Thanks! — Casey Yee, Jan 20 '12 at 01:56
@CaseyYee a lot of easing frameworks have signature interfaces that look more like my helper `getTweenedValue`, the other answer talks about it a bit more as well. — J. Holmes, Jan 20 '12 at 01:59

score 0 · Answer 2 · answered Jan 20 '12 at 01:17

0

Just use setTimeout() and make a timer run after 1000 ms:

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

answered Jan 20 '12 at 01:17

Blender

289,723
53
439
496

i don't actually want to run the tween, just extract the value at a given time. – Casey Yee Jan 20 '12 at 01:20
Ah. What happens when you replace `t.start()` with `t.update(1000)`? – Blender Jan 20 '12 at 01:23
it runs .onUpdate, but the position.y value is unchanged. i can run .update() many times with different time values and it responds exactly the same. – Casey Yee Jan 20 '12 at 01:29
I looked through the source. Try this: `t._easingFunction(1000)`. What does it spit out? – Blender Jan 20 '12 at 01:33

Extract tween values from tween.js

2 Answers2