From c5b4a9d6f8e99e39ecb82a13ec358a15ff454a70 Mon Sep 17 00:00:00 2001
From: ACERY1 <Y841034081@Gmail.com>
Date: Tue, 1 Jun 2021 22:10:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8A=A8=E7=94=BB=E6=9C=AA=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E5=AE=8C=E6=88=90=E6=97=B6=E5=86=8D=E6=AC=A1=E8=B0=83?=
 =?UTF-8?q?=E7=94=A8=E5=88=99=E6=B8=85=E9=99=A4=E8=AE=A1=E6=97=B6=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/canvas/animation/timelime.ts          | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/canvas/animation/timelime.ts b/packages/components/src/canvas/animation/timelime.ts
index 6c62a47e4..e95317d6a 100644
--- 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;