[4.0] 支持 shape 的 clip 动画

[simaQ]

G2 的折线图的动画采用的是给 shape 设置剪切区域的方案，代码如下：

  const clipCfg = getCoordinateClipCfg(coordinate); // 获取剪切区域图形配置
  const endState = clipCfg.endState;
  // 为 shape 设置剪切区域
  const clipShape = shape.setClip(clipCfg);

  // �对剪切图形做动画
  const { easing, duration, delay } = animateCfg;
  clipShape.animate(endState, duration, easing, () => {
    if (shape && !shape.get('destroyed')) {
      shape.set('clipShape', null); // 移除剪切图形
    }
  }, delay);

期望：

• 目前上述代码并没有达到预期，希望能够
• shape.setClip(clipCfg) 应该返回创建的 clipShape
• 用户调用 shape.set('clipShape', null) ，默认应该将 clipShape 销毁

[antv-bot]

Translation of this issue:

---

[4.0] Animation shape of support clip

Animation of the line graph G2 is employed to shape the cutout region setting program, as follows:

`` `Js
  const clipCfg = getCoordinateClipCfg (coordinate); // Get the shear area pattern configured
  const endState = clipCfg.endState;
  // set the shape of the clipping region
  const clipShape = shape.setClip (clipCfg);

  // do animation of the shear graphics
  const {easing, duration, delay} = animateCfg;
  clipShape.animate (endState, duration, easing, () => {
    if (shape &&! shape.get ( 'destroyed')) {
      shape.set ( 'clipShape', null); // remove cut pattern
    }
  }, Delay);
`` `

Expectations:

• The code currently does not meet expectations, hope
• Shape.setClip (clipCfg) should return clipShape created
• User calls shape.set ( 'clipShape', null), the default should be destroyed clipShape

[dengfuping]

• Closed by [email protected]