Open xaviergonz opened 2 years ago
@juliangarnier FYI
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)
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 !
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?
Yes I have everything ready for an early access, just need to finish the documentation and a migration guide.
Yes I have everything ready for an early access, just need to finish the documentation and a migration guide.
That is great
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:
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.