zrender
zrender copied to clipboard
Resume method is invalid in the version 5.3.2
In this version, the resume method is called to restore the animation, and the method fails. It seems that there are some problems with the step method.
Animation.prototype._startLoop = function () { var self = this; this._running = true; function step() { if (self._running) { requestAnimationFrame$1(step); !self._paused && self.update(); } } requestAnimationFrame$1(step); };
According to the source code, the v5 version seems to have optimized the animation loop. When the number of empty loop frames reaches a certain number of times (_sleepAfterStill), the animation loop stops and enters the sleep state. Any subsequent animation api calls need to synchronously call the wakeUp() API of the zr instance to wake up the animation (restart the animation loop).

It is no problem to directly call the animation control api of the animation of the zr instance:
zr.animation.pause();
setTimeout(() => {
zr.animation.resume();
zr.wakeUp();
}, 1e2);
But there seems to be a problem here, when you call the animation control function of the animator object returned by the element's animate(), the animation time is not right:
const animator = elem.animate();
animator.pause();
setTimeout(() => {
animator.resume(); // wrong animation time
zr.wakeUp();
}, 1e2);
According to the source code, zr.wakeUp() calls zr.animation.start(), which sets _pausedTime to 0, so when animator.resume() is called, the animation time does not start from The paused state is resumed, but the playback is restarted.
Looking forward to the repository maintainer to clarify this issue.
@Ovilia Are you free to answer this question?