juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
50.4k stars 3.68k forks source link

Weirdness in spring implementation #850

Open jakearchibald opened 1 year ago

jakearchibald commented 1 year ago

https://github.com/juliangarnier/anime/blob/master/src/index.js#L96 - t here is time, not progress, so returning 1 when time is 1 doesn't make sense.

https://github.com/juliangarnier/anime/blob/master/src/index.js#L115 - multiplying by frame here is an arbitary division by 6. elapsed already caters for frame time.

However, the divide by 6 sort-of works out, since the spring has usually mostly settled 1/6 of the way through the duration. Although, there are better ways of handling that, such as waiting for the solver to settle within a threshold of 1 (such as 0.001), rather than being equal 1.

jakearchibald commented 1 year ago

Here's an implementation that solves these issues https://gist.github.com/jakearchibald/9718d1b81fe62d1c9655de65df1a55a4. You'll probably want to re-add the caching for the duration.

juliangarnier commented 1 year ago

Great catch! I am currently in the process of rewriting most of the easing code in V4, so your feedback is timely. Thanks for pointing out this issue.