Updating animation smoothly

Phaser 3
1

Hi everyone,
I am doing a spin animation but I need to wait for a backend call to determine some of its parameters. So I first start the animation with some params and then when I got the response from backend I update the animation (changing the angle param). Doing so is working but I have a “bump/glitch” when it is updated. Would there be any way to make the update smooth as in you can’t notice the change watching the animation ?
Here is the code of the animation :

const anim = scene.tweens.add({
    targets: [targetContainer],
    angle: angle, // this is calculated, 360 * rounds => rounds = random(2,5)
    duration: WHEEL_ROTATION_DURATION, //6500
    ease: 'Cubic.easeOut',
})

to update the animation I do :

anim.data[0].end += newAngle // newAngle is calculated
2

Best way to make it smooth would be to manually update the angle in update, using constant speed (so something like container.angle += angleSpeed * dt).
Then afterwards, when you get the backend response, just start the easeOut tween with the correct end position, and specify speed rather than the duration.

1 Like
3

Works very nicely, thanks for the advice. Didn’t think about that but it’s quite logical and works very well.