From 1d4fc48a99c25e49b62fb5e9c3aac3a921d32a16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AF=B8=E5=B2=B3?= <fuping.dfp@antfin.com>
Date: Tue, 25 Feb 2020 20:33:46 +0800
Subject: [PATCH] fix(g-base): delay and repeat should work in toAttrs for
 animate method

---
 packages/g-base/src/abstract/element.ts    | 11 +++++++----
 packages/g-base/tests/unit/animate-spec.js | 19 +++++++++----------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/g-base/src/abstract/element.ts b/packages/g-base/src/abstract/element.ts
index cf89f94a3..381342215 100644
--- a/packages/g-base/src/abstract/element.ts
+++ b/packages/g-base/src/abstract/element.ts
@@ -17,7 +17,7 @@ const ARRAY_ATTRS = {
 
 const CLONE_CFGS = ['zIndex', 'capture', 'visible', 'type'];
 
-const RESERVED_PORPS = ['delay'];
+const RESERVED_PORPS = ['delay', 'repeat'];
 
 const DELEGATION_SPLIT = ':';
 const WILDCARD = '*';
@@ -468,16 +468,19 @@ abstract class Element extends Base implements IElement {
       onFrame = toAttrs as OnFrame;
       toAttrs = {};
     } else if (isObject(toAttrs) && (toAttrs as any).onFrame) {
-      // 兼容 3.0 中的写法，onFrame 可在 toAttrs 中设置
+      // 兼容 3.0 中的写法，onFrame、delay 和 repeat 可在 toAttrs 中设置
       onFrame = (toAttrs as any).onFrame as OnFrame;
+      delay = (toAttrs as any).delay;
+      repeat = (toAttrs as any).repeat;
     }
     // 第二个参数，既可以是执行时间 duration，也可以是动画参数 animateCfg
     if (isObject(duration)) {
       animateCfg = duration as AnimateCfg;
       duration = animateCfg.duration;
       easing = animateCfg.easing || 'easeLinear';
-      delay = animateCfg.delay || 0;
-      repeat = animateCfg.repeat || false;
+      // animateCfg 中的设置优先级更高
+      delay = animateCfg.delay || delay || 0;
+      repeat = animateCfg.repeat || repeat || false;
       callback = animateCfg.callback || noop;
       pauseCallback = animateCfg.pauseCallback || noop;
       resumeCallback = animateCfg.resumeCallback || noop;
diff --git a/packages/g-base/tests/unit/animate-spec.js b/packages/g-base/tests/unit/animate-spec.js
index a28b53607..5017ba53e 100644
--- a/packages/g-base/tests/unit/animate-spec.js
+++ b/packages/g-base/tests/unit/animate-spec.js
@@ -62,7 +62,7 @@ describe('animate', () => {
   });
 
   // 兼容 3.0 中的写法，onFrame 可在 toAttrs 中设置
-  it('animate(toAttrs, duration, easing, callback, delay) and toAttrs has onFrame property', (done) => {
+  it.only('animate(toAttrs, duration, easing, callback, delay) and toAttrs has onFrame, delay and repeat property', (done) => {
     const shape = new Shape({
       attrs: {
         x: 50,
@@ -79,26 +79,25 @@ describe('animate', () => {
             y: 50 + ratio * (100 - 50),
           };
         },
+        delay: 100,
+        repeat: true,
       },
       500,
       'easeLinear',
       () => {
         flag = true;
-      },
-      100
+      }
     );
     expect(shape.attr('x')).eqls(50);
     expect(shape.attr('y')).eqls(50);
     expect(flag).eqls(false);
     setTimeout(() => {
-      expect(flag).eqls(false);
-    }, 550);
-    setTimeout(() => {
-      expect(shape.attr('x')).eqls(100);
-      expect(shape.attr('y')).eqls(100);
-      expect(flag).eqls(true);
+      expect(shape.attr('x')).not.eqls(100);
+      expect(shape.attr('y')).not.eqls(100);
+      expect(shape.get('animating')).eqls(true); // 动画仍然在执行
+      expect(flag).eqls(false); // callback 回调一直得不到执行
       done();
-    }, 1200);
+    }, 700);
   });
 
   it('animate(onFrame, duration, easing, callback, delay)', (done) => {