feat: 保存

src/utils/canvasPlayer.js

@@ -44,6 +44,7 @@ export class CanvasPlayer extends Mitt {
     this.imageW = isMobile() ? 750 : 1920;
     this.imageH = isMobile() ? 1334 : 1080;
     this.proload();
+    this.initClipAnimate();
     this.loadEvent();
   }
 
@@ -138,28 +139,29 @@ export class CanvasPlayer extends Mitt {
     // this.reDraw(frame, type);
   }
   initClipAnimate() {
-    Array.from(this.clips).forEach((item) => {
-      const time = "";
-
-      // const anmi = gsap.to(this.clips[0], 1, {
-      //   x: this.clips[0].total - 1,
-      //   repeat: 0,
-      //   duration: (this.clips[0].total / 2) * 1000,
-      //   ease: "none",
-      //   yoyo: true,
-      //   onComplete: () => {
-      //     console.log("done");
-      //   },
-      //   onUpdate: () => {
-      //     const frame = Math.floor(this.clips[0].x);
-      //     console.log("x", frame);
-      //     this.reDraw(frame, this.currentType);
-      //   },
-      // });
+    Array.from(this.clips).forEach((item, key) => {
+      const duration = this.clips[key].total / 15;
+      const anmi = gsap.to(this.clips[key], duration, {
+        x: this.clips[0].total - 1,
+        repeat: 0,
+        duration: (this.clips[key].total / 2) * 1000,
+        ease: "none",
+        yoyo: true,
+        onComplete: () => {
+          console.log("done");
+        },
+        onUpdate: () => {
+          const frame = Math.floor(this.clips[key].x);
+          this.reDraw(frame, this.currentType);
+        },
+      });
+      anmi.pause();
+      this.clips[key].animation = anmi;
     });
   }
   autoPlay() {
-    console.log("this.clips[0]", (this.clips[0].total / 2) * 1000);
+    console.log("this.clips[0]", this.clips[0].animation);
+    this.clips[0].animation.restart();
   }
 
   reDraw(frame, type) {