feat: add restore methods of svg animation

src/animation.ts

@@ -8,13 +8,13 @@ export class SvgAnimation extends Renderer {
   public ms: number
   private _stop: (() => void) | null
   private _anim: FrameAnimation | null
-  private _restore: Path[]
+  private _restorePath: Path[]
   constructor(el: HTMLElement, { background, ms }: AnimationOption) {
     super(el, { background })
     this.ms = ms ?? 60
     this._stop = null
     this._anim = null
-    this._restore = []
+    this._restorePath = []
   }
 
   public setAnimation(fn: FrameAnimation): void {
@@ -27,33 +27,32 @@ export class SvgAnimation extends Renderer {
     }
   }
 
+  public restore() {
+    this.replacePaths(this._restorePath)
+    this.update()
+  }
+
   public frame() {
     if (!this._anim) return
-    const updPaths = this._anim(this._restore.map(p => p.clone()))
+    const updPaths = this._anim(this._restorePath.map(p => p.clone()))
     this.replacePaths(updPaths)
     this.update()
   }
 
   public play(): void {
     this.stop()
     const ms = this.ms
-    this._restore = this.clonePaths()
+    this._restorePath = this.clonePaths()
     const frame = () => {
       if (ms !== this.ms) {
         this.play()
         return
       }
       this.frame()
     }
-
-    const sceneChildrenRestore = () => {
-      this.replacePaths(this._restore)
-      this.update()
-    }
     const stopId = setInterval(frame, ms)
     this._stop = () => {
       clearInterval(stopId)
-      sceneChildrenRestore()
       this._stop = null
     }
   }

src/example/app.tsx

@@ -255,6 +255,10 @@ const Example = () => {
     if (!animationRef.current) return
     animationRef.current.stop()
   }, [])
+  const handleClickRestore = useCallback(() => {
+    if (!animationRef.current) return
+    animationRef.current.restore()
+  }, [])
   // TODO: fix
   // useEffect(() => {
   //   if (!divRef.current) return
@@ -394,6 +398,7 @@ const Example = () => {
         <button onClick={handleClickShake}>SHAKING ANIMATION</button>
         <button onClick={handleClickStrokeAnimation}>STROKE ANIMATION</button>
         <button onClick={handleClickStop}>STOP</button>
+        <button onClick={handleClickRestore}>RESTORE</button>
         <div>
           ANIMATION MS
           <input