fix: 动画未播放完成时再次调用则清除计时器

antvis · Jun 1, 2021 · c5b4a9d · c5b4a9d
1 parent 26d15d9
commit c5b4a9d
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/packages/components/src/canvas/animation/timelime.ts b/packages/components/src/canvas/animation/timelime.ts
@@ -3,6 +3,10 @@ const requestAnimationFrame = typeof window === 'object' && window.requestAnimat
   return setTimeout(fn, 16);
 };
 
+const cancelAnimationFrame = typeof window === 'object' && window.cancelAnimationFrame ? window.cancelAnimationFrame : function(number) {
+  return clearTimeout(number);
+}; 
+
 const clock = typeof performance === 'object' && performance.now ? performance : Date;
 
 type UpdateCallback = (time: number) => void;
@@ -16,15 +20,17 @@ class Timeline {
   pausedTime = 0;
   // 动画持续时间
   duration: number;
+  // 计时器id
+  animationFrameNumber;
 
   play(duration: number, onUpdate: UpdateCallback, onEnd: EndCallback) {
     if (duration <= 0) {
       onEnd();
       return;
     }
-    // 上次动画未结束
+    // 上次动画未结束，则清除计时器,停止播放
     if (this.playing) {
-      return;
+      this.abort();
     }
     this.duration = duration;
     const {
@@ -57,9 +63,9 @@ class Timeline {
         return;
       }
       onUpdate(time);
-      requestAnimationFrame(play);
+      this.animationFrameNumber = requestAnimationFrame(play);
     };
-    requestAnimationFrame(play);
+    this.animationFrameNumber = requestAnimationFrame(play);
   }
 
   pause() {
@@ -69,6 +75,14 @@ class Timeline {
   stop() {
     this.playing = false;
   }
+
+  abort() {
+    if(!this.animationFrameNumber) {
+      return;
+    }
+    cancelAnimationFrame(this.animationFrameNumber);
+    this.animationFrameNumber = null;
+  }
 }
 
 export default Timeline;