fix: save

src/components/Viewer.jsx

@@ -6,15 +6,27 @@ export default class Viewer extends Component {
   constructor() {
     super();
     console.log("hello constructor");
+    //ref
+    this.containerRef = createRef(null);
+    this.viewerRef = createRef(null);
+    this.canvasContainerRef = createRef(null);
+    this.loadingWrap = createRef(null);
+    this.viewerOffsetRef = createRef(null);
+    this.canvasRef = createRef();
+
     this.sequence = [];
+    this.loadedRenderPool = [];
     this.enterTimeline = false;
     this.exitTimeline = false;
+    this.loadComplete = false;
+
+    this.loadedCount = 0;
     this.progress = 0;
-    this.viewerRef = createRef();
-    this.canvasContainerRef = createRef();
-    this.loadingWrap = createRef();
-    this.viewerOffsetRef = createRef();
-    this.canvasRef = createRef();
+    this.lastFrame = -1;
+    this.floatFrame = 0;
+    this.loadedRenderTimeout = null;
+    this.poolAnimateDelay = 40;
+
     this.context = null;
     this.width = 1552;
     this.height = 873;
@@ -35,6 +47,19 @@ export default class Viewer extends Component {
 
   state = {};
 
+  componentWillUnmount() {
+    this.timeline && this.timeline.kill(true);
+  }
+
+  componentDidMount() {
+    this.loadAssets();
+    this.canvasRef.current && this.initializeCanvas();
+    if (!this.timeline) {
+      this.initializeTimeline();
+      this.setTimeline();
+    }
+  }
+
   loadImage(index) {
     const img = new Image();
     // console.log("index", this.getSourcePath(index));
@@ -43,7 +68,16 @@ export default class Viewer extends Component {
     img.ogSrc = img.src;
     this.sequence.push(img);
 
-    img.onload = () => {};
+    img.onload = () => {
+      index === 1 && this.renderImageToCanvas(0);
+      if (this.frame > index && this.timeline.scrollTrigger.isActive) {
+        this.poolNewFrames(index - 1);
+      }
+      this.loadedCount += 1;
+      if (this.loadedCount === parseFloat(this.props.frameCount) - 1) {
+        this.loadingComplete();
+      }
+    };
   }
 
   getSourcePath(index) {
@@ -60,13 +94,12 @@ export default class Viewer extends Component {
       }
     }, 60);
   }
-
-  componentDidMount() {
-    console.log("componentDidMount", this.props.name);
-    this.loadAssets();
-    this.canvasRef.current && this.initializeCanvas();
-    // this.initializeTimeline();
+  loadingComplete() {
+    console.log(this.props.path, "loading complete");
+    this.loadComplete = true;
+    this.isAbove && this.renderImageToCanvas(this.loadedCount - 1);
   }
+
   initializeCanvas() {
     this.context = this.canvasRef.current.getContext("2d", {
       alpha: false,
@@ -97,30 +130,81 @@ export default class Viewer extends Component {
         end: "bottom bottom",
         ease: "none",
         markers: true,
-        onUpdate: function (n) {},
-        onScrubComplete: function () {
-          //   e.justScrolled = !1;
+        onUpdate: function (n) {
+          //处理processloading
         },
-        onEnter: function () {
-          //   n(), (e.isAbove = !1);
+        onScrubComplete: () => {
+          this.justScrolled = true;
         },
-        onEnterBack: function () {
-          //   n(), (e.isBelow = !1);
+        onEnter: () => {
+          closeLoading();
+          this.isAbove = false;
+          console.log("onEnter");
         },
-        onLeave: function () {
-          //   r(), (e.isAbove = !0);
+        onEnterBack: () => {
+          openLoading();
+          console.log("onEnterBack");
+          this.isBelow = false;
         },
-        onLeaveBack: function () {
-          //   r(), (e.isBelow = !0);
+        onLeave: () => {
+          console.log("onLeave");
+          this.isAbove = true;
+          openLoading();
+        },
+        onLeaveBack: () => {
+          console.log("onLeaveBack");
+          openLoading();
+          this.isBelow = true;
         },
       },
     });
   }
+  setTimeline() {
+    console.log("this.fullFrameCount", this.fullFrameCount);
+    this.timeline.to(this, {
+      floatFrame: this.fullFrameCount - 1,
+      ease: "none",
+      onUpdate: () => {
+        this.frame = Math.floor(this.floatFrame);
+        if (this.lastFrame === this.frame || this.loadedRenderPool.length) {
+          this.renderImageToCanvas(this.frame);
+        }
+      },
+    });
+  }
 
+  initializeEnterTween() {}
+
+  poolNewFrames(index) {
+    console.log("poolNewFrames", index);
+    this.loadedRenderPool.unshift(index);
+    this.loadedRenderPool.sort(function (e, t) {
+      return t - e;
+    });
+    this.animatePool();
+  }
+  animatePool() {
+    if (!this.loadedRenderTimeout && this.loadedRenderPool.length) {
+      this.loadedRenderTimeout = setTimeout(() => {
+        this.loadedRenderTimeout = true;
+        var poolFrame = this.loadedRenderPool[this.loadedRenderPool.length - 1];
+        if (poolFrame <= this.frame) {
+          var remainFrame = this.loadedRenderPool.pop();
+          this.renderImageToCanvas(remainFrame);
+          this.animatePool();
+        }
+        if (this.frame < poolFrame) {
+          this.loadedRenderPool = [];
+        }
+      }, this.poolAnimateDelay);
+    }
+  }
   renderImageToCanvas(index) {
     if (this.sequence[index]) {
       if (this.context.drawImage) {
-        console.log("hey");
+        console.log("renderImageToCanvas", index);
+        this.context.drawImage(this.sequence[index], 0, 0);
+        this.lastFrame = index;
       } else {
         this.initializeCanvas();
       }
@@ -128,13 +212,20 @@ export default class Viewer extends Component {
   }
 
   render() {
+    // process props
+    this.fullFrameCount = this.props.frameCount;
     return (
-      <div ref={this.containerRef} >
+      <div ref={this.containerRef}>
         <div ref={this.viewerRef} style={{ height: this.props.height }}>
           <div>{this.props.name}</div>
           <div className="loading-wrap" ref={this.loadingWrap}></div>
           <div className="canvas-container" ref={this.canvasContainerRef}>
-            <canvas className="sequence-canvas" ref={this.canvasRef}></canvas>
+            <canvas
+              className="sequence-canvas"
+              ref={this.canvasRef}
+              width={500}
+              height={500}
+            ></canvas>
           </div>
 
           <>{this.props.children}</>