How to make an animation happen over a duration of time?

Help & Support
1

This project (Flappy Bird) uses an older version of the tween.js library, not the one encapsulated to be used with pc.Entities.

This project uses something similar to lerping (adding 1 degree per frame and clamping between two values) to animate the sprite. This makes the bird smoothly look down while falling.

The snapping happens because when you click the velocity is increased rapidly, making the animation follow that in an instant:

    // bird.js, line 73 on the original Flappy Bird codebase
    if (this.state === 'play') {
        app.fire('game:audio', 'Flap');
        this.velocity = this.flapVelocity;
    }

How do I change the way the flapping works, instead of adding the velocity on click at the same frame, do this in a duration e.g. 0.5 seconds?
(thanks to @leonidas also)