fix: Realistic spring behavior at low framerates #11337
Conversation
|
There was a problem hiding this comment.
Review and Explanation:
Delta Time Calculation:
Old Code: Calculates dt as (now - last_time) * 60 / 1000. This calculates the time difference in milliseconds and scales it for use in a spring animation or simulation.
New Code: Introduces a limitation using Math.min(now - last_time, 1000 / 24). This ensures that dt does not exceed 1000 / 24 milliseconds (approximately 41.67 milliseconds), effectively capping the delta time to maintain realistic spring behavior at low frame rates (24 frames per second).
Purpose of Limitation:
The limitation (1000 / 24) ensures that even if the time between frames (now - last_time) is larger than expected (e.g., due to a slow frame rate), the simulation does not overly advance the spring animation in one frame. This helps in maintaining smooth and realistic motion in animations across different devices and frame rates.
Functionality:
Both versions effectively use the tick_spring function to update the next value based on spring physics calculations (tick_spring(ctx, last_value, value, target_value)).
The update to last_time (last_time = now) ensures that subsequent calculations of dt in the next frame correctly measure the time elapsed since the last update.
Considerations:
Ensure that 1000 / 24 is appropriate for your specific use case. This value is chosen to balance smooth animation with responsiveness. Adjust this value based on the desired animation behavior and performance considerations.
By implementing this change, you're enhancing the reliability and visual quality of your spring-based animations, especially under varying frame rate conditions.
Fix for bug described here: #7010
This is a fix for a bug caused by too long deltaTime between requestAnimationFrame callbacks; the spring physics calculation is not designed for such a long “prediction”. Since requestAnimationFrame does not fire callback while the page tab is invisible or the cpu is heavily loaded, deltaTime becomes too large.
I added deltaTime limit to 24fps