feat: 保存

src/utils/canvasPlayer.js

@@ -18,11 +18,12 @@ export class CanvasPlayer extends Mitt {
     this.imageW = null;
     this.imageH = null;
     this.setting = setting;
-    this.currentFrame = 0;
+    this.currentFrame = 0; // 当前真正
+    this.movingFrame = 0; // 当前前进
     this.scrollFrame = 0;
-    this.movingFrame = 0;
     this.lastScroll = 0;
     this.isRendering = false;
+    this.localRender = [];
     this.currentType = 0;
     this.frames = [];
     this.clips = [];
@@ -160,44 +161,41 @@ export class CanvasPlayer extends Mitt {
       clearTimeout(timer);
       timer = null;
     }
-    if (completeTimer) {
-      clearTimeout(completeTimer);
-      completeTimer = null;
-    }
+
+    this.currentFrame = startFrame;
+    const matchDis = 10;
+
+    const dynamicDistance = na
+      ? this.currentFrame + matchDis
+      : this.currentFrame - matchDis;
+    //  少于frame
+
+    const dis = clamp(dynamicDistance, 0, clip.total);
+    console.log("startFrame", this.currentFrame, dis, this.movingFrame);
 
     if (this.scrollAni) {
+      // console.log("11", this.scrollAni.duration());
       this.scrollAni.kill();
       this.scrollAni = null;
     }
-    if (startFrame > 0) {
-      this.isRendering = true;
-    }
 
-    const dynamicDistance = na
-      ? this.currentFrame + 10
-      : this.currentFrame - 10;
-    const dis = clamp(dynamicDistance, 0, clip.total);
-    console.log("startFrame", startFrame, this.currentFrame, dis, scrollY);
     timer = setTimeout(() => {
       this.scrollAni = gsap.timeline();
       this.isRendering = true;
       this.scrollAni.to(this, {
         movingFrame: dis,
-        ease: "none",
+        // ease: "power1.inOut",
+        // duration: 0.6,
         yoyo: true,
         onUpdate: () => {
           this.isRendering = true;
           const mFrame = Math.floor(this.movingFrame);
-          this.currentFrame = mFrame;
           this.reDraw(mFrame, this.currentType);
         },
+        onStart: () => {},
         onComplete: () => {
+          completeTimer = setTimeout(this.toRunPatch, 0);
           this.scrollAni && this.scrollAni.pause();
-          // const actualHeight = this.currentFrame * 100 + window.innerHeight;
-          // event.target.scrollTop =
-          //   actualHeight > window.innerHeight ? actualHeight : 0;
-          this.isRendering = false;
-          this.toRunPatch(event);
         },
       });
     }, 40);
@@ -213,7 +211,6 @@ export class CanvasPlayer extends Mitt {
         // this.autoIncrement(false);
       }
     }
-    this.initClipScrollheight();
   }
 
   getframeByHeight(height) {
@@ -323,14 +320,20 @@ export class CanvasPlayer extends Mitt {
       );
       this.context.clearRect(0, 0, this.vw, this.vh);
       this.context.drawImage(frameItem.image, 0, 0, this.vw, this.vh);
+      this.initClipScrollheight();
       this.scrollAni = gsap.timeline();
-      let doneScroll = (event) => {
-        const height = this.getFrameScrollTop(this.currentFrame);
-        // event.target.scrollTop = height;
-        console.warn("scroll done", this.currentFrame, height);
-        document.querySelector(".scroll-bar-3").scroll();
+      let doneScroll = () => {
+        this.isRendering = false;
+
+        if (this.currentFrame === 0) {
+          this.emit("scroll-prev");
+        }
+        if (this.currentFrame === frameItem.total) {
+          this.emit("scroll-next");
+        }
+        console.warn("scroll done", this.currentFrame, this.movingFrame);
       };
-      this.toRunPatch = debounce(doneScroll, 500);
+      this.toRunPatch = debounce(doneScroll, 400);
       console.log("initFirstFrame");
     }
   }