Percentage of Tween Completed

Help & Support
1

Can anyone think of a way to find what percent of a tween is completed regardless of how long the tween is? I think this would be easy if the tween was 1 second because then you would just add the sum up the dt value on the update tick of the tween. How would you do this if the tween length was 0.9 though for example? I need a value that says a tween is at ā€œx%ā€ progress.

This is so I can spawn other entities and start them at a specific point in the tween later by using that percentage to calculate how long and how far things should be tweened to appear as if they were tweening with the original entity all along despite having been spawned part way during the original tween.

2

Hi @Jake_Johnson ,

You can find that easily by getting the interpolated value, between the start and end values.

For example in your tween update method do:

var progress = current / (end - start);
2 Likes
3

@Leonidas

Thanks for the response! Iā€™m not sure how I am accessing the current value though. Is there a method built into tween.js for that? Or do I need to be adding up the delta time as I go throughout the tween to be able to get current?

4

Good question, it depends on the type of the tween. Can share your code to check?

You can also do the following using the tween delta, not tested but I think it will work:

// example tween
var color = new pc.Color(0, 0, 0);
var material = this.entity.model.material;

var progress = 0;

this.app
.tween(color)
.to(new pc.Color(1, 1, 1), 1.0, pc.Linear)
.loop(true)
.yoyo(true)
.on('update', function (delta) {
    progress += delta;

    material.diffuse = color;
    material.update();
})
.start();
5

That worked great. This is what ended up inside the tween update function:

current += dt;
this.tweenAlpha = current/(this.tweenLength);

Thanks so much! Tween alpha now goes from 0-1 on every tween :slight_smile:

1 Like