feat: 保存

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@vueuse/core": "^10.7.2",
     "@vueuse/motion": "^2.0.0",
     "gsap": "^3.12.5",
     "mitt": "^3.0.1",

src/pages/section3.vue

@@ -164,14 +164,21 @@ onMounted(() => {
   player.on("updatePress", (p) => {
     emitter.emit("updatePress", p);
   });
+  let timer;
   player.on("scroll-prev", () => {
-    console.log("scroll-prev");
-    // props.fullpage.api.moveSectionDown()
+    console.warn("scroll-prev");
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      props.fullpage.api.moveSectionUp();
+    }, 600);
     // emitter.emit("scroll-prev", p);
   });
   player.on("scroll-next", () => {
-    console.log("scroll-next");
-    props.fullpage.api.moveSectionUp();
+    console.warn("scroll-next");
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      props.fullpage.api.moveSectionDown();
+    }, 600);
   });
   window.player = player;
 });

src/utils/canvasPlayer.js

@@ -1,4 +1,5 @@
 import { isMobile } from "./isMoblie";
+import { throttle, debounce } from "./fn";
 import gsap from "gsap";
 import mitt from "mitt";
 class Mitt {
@@ -22,6 +23,8 @@ export class CanvasPlayer extends Mitt {
     this.currentType = 0;
     this.frames = [];
     this.clips = [];
+    this.tmpDisArr = [];
+    this.tmpDis = "";
     this.canScroll = false;
     this.resize = this.resize.bind(this);
     this.watchScroll = this.watchScroll.bind(this);
@@ -123,6 +126,7 @@ export class CanvasPlayer extends Mitt {
   manualScroll(event, type) {
     if (!this.canScroll) {
       this.enableScroll(type);
+      this.initFirstFrame();
     }
     let lastKnownScrollPosition = 0;
     let deltaY = 0;
@@ -135,8 +139,19 @@ export class CanvasPlayer extends Mitt {
     );
     const deltaHeight = clip.total * 100 - window.innerHeight;
     const prcess = scrollY / deltaHeight;
-    const frame = Math.floor(clip.total * prcess);
+    const frame = Math.round(clip.total * prcess);
     this.currentFrame = frame;
+    // if (frame === 0) {
+    //   const toPrev = debounce(() => {
+    //     console.log("frame", frame);
+    //     this.emit("scroll-prev");
+    //     this.resetClipScrollTop();
+    //   }, 3000);
+    //   toPrev();
+    // }
+    // if (frame === clip.total) {
+    //   this.emit("scroll-next");
+    // }
     this.reDraw(this.currentFrame, this.currentType);
     // this.watchScroll(event);
   }
@@ -146,9 +161,9 @@ export class CanvasPlayer extends Mitt {
         this.currentFrame = 0;
       }
       if (event.deltaY > 0) {
-        this.autoIncrement(true);
+        // this.autoIncrement(true);
       } else {
-        this.autoIncrement(false);
+        // this.autoIncrement(false);
       }
     }
     this.initClipScrollheight();
@@ -156,6 +171,7 @@ export class CanvasPlayer extends Mitt {
   easeOutCubic(x) {
     return 1 - Math.pow(1 - x, 3);
   }
+  currentScollSafeDistance() {}
   initClipScrollheight() {
     if (this.currentType) {
       const bar = document.querySelector(`.scroll-bar-${this.currentType}`);
@@ -167,6 +183,12 @@ export class CanvasPlayer extends Mitt {
       bar.style.height = `${deltaHeight}px`;
     }
   }
+  resetClipScrollTop() {
+    if (this.currentType) {
+      const bar = document.querySelector(`.scroll-bar-${this.currentType}`);
+      bar.style.scrollTop = 0;
+    }
+  }
 
   autoIncrement(na = true) {
     if (this.currentFrame >= 0) {

src/utils/fn.js

@@ -0,0 +1,55 @@
+export function throttle(fn, wait) {
+  let callback = fn;
+  let timerId = null;
+
+  // 是否是第一次执行
+  let firstInvoke = true;
+
+  function throttled() {
+    let context = this;
+    let args = arguments;
+
+    // 如果是第一次触发，直接执行
+    if (firstInvoke) {
+      callback.apply(context, args);
+      firstInvoke = false;
+      return;
+    }
+
+    // 如果定时器已存在，直接返回。
+    if (timerId) {
+      return;
+    }
+
+    timerId = setTimeout(function () {
+      // 注意这里 将 clearTimeout 放到 内部来执行了
+      clearTimeout(timerId);
+      timerId = null;
+
+      callback.apply(context, args);
+    }, wait);
+  }
+
+  // 返回一个闭包
+  return throttled;
+}
+
+export function debounce(fn, wait) {
+  let callback = fn;
+  let timerId = null;
+
+  function debounced() {
+    // 保存作用域
+    let context = this;
+    // 保存参数，例如 event 对象
+    let args = arguments;
+
+    clearTimeout(timerId);
+    timerId = setTimeout(function () {
+      callback.apply(context, args);
+    }, wait);
+  }
+
+  // 返回一个闭包
+  return debounced;
+}