fix: 渐变色无补间，直接赋值

packages/g-base/src/abstract/element.ts

@@ -17,8 +17,6 @@ const CLONE_CFGS = ['zIndex', 'capture', 'visible'];
 
 const RESERVED_PORPS = ['delay'];
 
-const COLOR_RELATED_PROPS = ['fill', 'fillStyle', 'stroke', 'strokeStyle'];
-
 // 需要考虑数组嵌套数组的场景
 // 数组嵌套对象的场景不考虑
 function _cloneArrayAttr(arr) {
@@ -46,9 +44,7 @@ function getFormatToAttrs(props, shape) {
   const toAttrs = {};
   const attrs = shape.attr();
   each(props, (v, k) => {
-    if (COLOR_RELATED_PROPS.indexOf(k) !== -1 && /^[r,R,L,l]{1}[\s]*\(/.test(v)) {
-      // Do nothing, 渐变色不支持动画
-    } else if (RESERVED_PORPS.indexOf(k) === -1 && !isEqual(attrs[k], v)) {
+    if (RESERVED_PORPS.indexOf(k) === -1 && !isEqual(attrs[k], v)) {
       toAttrs[k] = v;
     }
   });

packages/g-base/src/animate/timeline.ts

@@ -3,6 +3,7 @@ import * as d3Timer from 'd3-timer';
 import * as d3Ease from 'd3-ease';
 import { interpolate, interpolateArray } from 'd3-interpolate'; // 目前整体动画只需要数值和数组的差值计算
 import * as PathUtil from '../util/path';
+import { isColorProp, isGradientColor } from '../util/color';
 import { ICanvas, IElement } from '../interfaces';
 import { Animation } from '../types';
 
@@ -59,6 +60,8 @@ function _update(shape: IElement, animation: Animation, ratio: number) {
         const matrixFn = interpolateArray(fromAttrs[k], toAttrs[k]);
         const currentMatrix = matrixFn(ratio);
         shape.setMatrix(currentMatrix);
+      } else if (isColorProp(k) && isGradientColor(toAttrs[k])) {
+        cProps[k] = toAttrs[k];
       } else {
         interf = interpolate(fromAttrs[k], toAttrs[k]);
         cProps[k] = interf(ratio);

packages/g-base/src/util/color.ts

@@ -0,0 +1,3 @@
+export const isColorProp = (prop) => ['fill', 'stroke', 'fillStyle', 'strokeStyle'].includes(prop);
+
+export const isGradientColor = (val) => /^[r,R,L,l]{1}[\s]*\(/.test(val);

packages/g-base/tests/unit/animate-spec.js

@@ -615,4 +615,31 @@ describe('animate', () => {
       done();
     }, 1800);
   });
+
+  it('animate for gradient color should be correct', (done) => {
+    const gradientColor = 'l (90) 0:RGBA(39, 117, 255, 0.8) 1:rgba(255,255,255, 0)';
+    const shape = new Shape({
+      attrs: {
+        x: 50,
+        y: 50,
+        fill: 'red',
+      },
+    });
+    canvas.add(shape);
+    shape.animate(
+      {
+        fill: gradientColor,
+      },
+      {
+        duration: 500,
+      }
+    );
+    setTimeout(() => {
+      expect(shape.attr('fill')).eqls(gradientColor);
+    }, 200);
+    setTimeout(() => {
+      expect(shape.attr('fill')).eqls(gradientColor);
+      done();
+    }, 600);
+  });
 });