zrender icon indicating copy to clipboard operation
zrender copied to clipboard

Resume method is invalid in the version 5.3.2

Open userxiong opened this issue 3 years ago • 1 comments

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); };

userxiong avatar Aug 01 '22 12:08 userxiong

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).

image


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?

wang1212 avatar Aug 02 '22 07:08 wang1212