juliangarnier / anime

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

Add playbackRate #818

Open xaviergonz opened 2 years ago

xaviergonz commented 2 years ago

This PR adds a playbackRate option to anime, which allows an animation to play faster/slower than originally intended.

Rationale: I have some css animations with keyframes with a user overridden duration, like this:

@keyframe 0% {...}
@keyframe 23% {...}
...
animation-duration: CHOSEN BY THE USER

Since animeJs does not support % keyframes, but only durations, in order to be able to override the duration I'd need to either: a) make a function that generates the animation by multiplying each duration by some amount b) make a function that goes over the animation object and multiplies durations, delays, endDelays, time offsets and so on keys by this amount.

Option a is not possible since animations need to be serialized and loaded from a JSON. Option b is possible, but annoying

Although perhaps the preferable way to solve this issue would be to allow keyframes to express their durations and delays in "x%" in addition to msecs, this PR would solve it by allowing an animation to have a "playbackRate", which would solve my case by making all the base animations 1 second, each % keyframe "0.%" seconds, and setting the playbackRate to the user overridden number of seconds he wants the animation to last.

xaviergonz commented 2 years ago

@juliangarnier FYI

juliangarnier commented 2 years ago

This will be possible in V4, but I'm thinking about using a similar concept as the pitch control on oldschool turntables https://en.wikipedia.org/wiki/Pitch_control (where 0 = no change of speed)

juliangarnier commented 2 years ago

I went with animation.setPlaybackRate() and animation.setFrameRate() in the current V4 beta. Also globalTimeline.setPlaybackRate() and globalTimeline.setFrameRate() to affect all animations timings. Will share soon !

d4rckh commented 1 year ago

This will be possible in V4, but I'm thinking about using a similar concept as the pitch control on oldschool turntables https://en.wikipedia.org/wiki/Pitch_control (where 0 = no change of speed)

There will be a V4?

juliangarnier commented 1 year ago

Yes I have everything ready for an early access, just need to finish the documentation and a migration guide.

d4rckh commented 1 year ago

Yes I have everything ready for an early access, just need to finish the documentation and a migration guide.

That is great