fix(g-base): delay and repeat should work in toAttrs for animate method

antvis · Feb 25, 2020 · 1d4fc48 · 1d4fc48
1 parent 4d2695f
commit 1d4fc48
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git 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
@@ -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) => {