G6: updateItem和addItem能不能实现动画渐变效果

[FISHers6]

updateItem现在版本能不能实现动画渐变效果，比如节点修改了stroke颜色，能不能类似设置duration执行过渡的样式修改的动画效果

  this.graph.updateItem(node, {
    // 节点的样式
    style: {
      stroke: 'blue'
    }
  })

• G6 Version:4.1.14
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

[Yanyan-Wang]

内置节点不支持，但是可以通过自定义节点实现。如果是 updateItem 的话，就是自定义节点的时候复写 update 函数，在里面加 shape.animate， addItem 就是复写 drawShape 函数加 shape.animate。参考 https://g6.antv.vision/zh/examples/scatter/node#node

对于数值型的属性都可以直接通过 shape.animate 做渐变，但是对于颜色这种属性，需要自己计算一下过度色，然后给到每一帧。计算过度色的方法网上有很多，例如 https://www.zhihu.com/question/38869928

[FISHers6]

内置节点不支持，但是可以通过自定义节点实现。如果是 updateItem 的话，就是自定义节点的时候复写 update 函数，在里面加 shape.animate， addItem 就是复写 drawShape 函数加 shape.animate。参考 https://g6.antv.vision/zh/examples/scatter/node#node

对于数值型的属性都可以直接通过 shape.animate 做渐变，但是对于颜色这种属性，需要自己计算一下过度色，然后给到每一帧。计算过度色的方法网上有很多，例如 https://www.zhihu.com/question/38869928

想问一下，有没有已经实现过的update函数能参考的案例~
自己按下面代码，目的是想修改节点的坐标时产生过渡的动画效果
实际产生的效果是：坐标没办法进行动画过渡，坐标秒修改完成后，又进行了一次动画；节点只能产生stroke的数据修改，是不是哪里写错了

G6.registerNode(
    'circle-animate',
    {
        update(cfg,node){
            let shape = node.get('keyShape')
            shape.animate(
                {
                    x : cfg.x, //节点又在坐标x方向上运动了cfg.x  但是实际上数据未修改
                    stroke: cfg.style.stroke //stroke产生动画 产生了修改
                },
                {
                    repeat: false,
                    duration: 3000,
                    easing: 'easeCubic',
                },
            );
            // node.x = cfg.x
            // node.style = cfg.style
        },
    },
    'circle',
);


graph.updateItem(node, {
    x: 150,
    style: {
        stroke: 'black'
    }
})

[Yanyan-Wang]

你这样复写 update 是正确的。不过节点的坐标不是由 keyShape 的 x 决定的，而是节点的图形分组的 matrix 决定的，这样才能保证整个节点内部元素的位置是相对固定的，如果你只移动 keyShape 的 x 的话，就会导致只有这个图形自己飘走了，其他图形比如 label 等就还在原地。matrix 的动画参考 https://g6.antv.vision/zh/examples/scatter/node#node 这个 demo 里面 inner-animate 对 img 图形的 matrix 操作，它是旋转，你是平移，比如 x 平移 1:

const toMatrix = Util.transform(
  [1, 0, 0, 0, 1, 0, 0, 0, 1],
  [['t', 1, 0]],
);

而且动画完成之后，还需要同步新的坐标到数据模型中。可以在 animate 的第二个参数中配置 callback，然后在里面设置 node.getModel().x = 最终的x。

另外，看了一下，颜色应该也是可以自动动画的：

shape.animate(
  {
    fill: '#F04864',
  },
  {
    delay: 0,
    duration: 2000,
    easing: 'easeLinear',
    callback: () => {},
  }
);

[FISHers6]

你这样复写 update 是正确的。不过节点的坐标不是由 keyShape 的 x 决定的，而是节点的图形分组的 matrix 决定的，这样才能保证整个节点内部元素的位置是相对固定的，如果你只移动 keyShape 的 x 的话，就会导致只有这个图形自己飘走了，其他图形比如 label 等就还在原地。matrix 的动画参考 https://g6.antv.vision/zh/examples/scatter/node#node 这个 demo 里面 inner-animate 对 img 图形的 matrix 操作，它是旋转，你是平移，比如 x 平移 1:

const toMatrix = Util.transform(
  [1, 0, 0, 0, 1, 0, 0, 0, 1],
  [['t', 1, 0]],
);

而且动画完成之后，还需要同步新的坐标到数据模型中。可以在 animate 的第二个参数中配置 callback，然后在里面设置 node.getModel().x = 最终的x。

另外，看了一下，颜色应该也是可以自动动画的：

shape.animate(
  {
    fill: '#F04864',
  },
  {
    delay: 0,
    duration: 2000,
    easing: 'easeLinear',
    callback: () => {},
  }
);

太感谢了~~，给group加animate实现了坐标移动

G6.registerNode(
    'circle-animate',
    {
        update(cfg,node){
            let shape = node.get('keyShape')
            let group = node.get('group')
            group.animate(
                {
                    matrix : cfg.matrix //坐标变换
                },
                {
                    repeat: false,
                    duration: 3000,
                    easing: 'easeCubic',
                }
            )
            shape.animate(
                {
                    stroke: cfg.style.stroke,
                    fill : cfg.style.fill
                },
                {
                    repeat: false,
                    duration: 3000,
                    easing: 'easeCubic',
                    callback: function(){
                        node.getModel().x = node.getModel().matrix[6] //修改横坐标
                        node.getModel().y = node.getModel().matrix[7] //修改纵坐标
                        node.getModel().style = cfg.style
                    }
                },
            );
        },
    },
    'circle',
);

//平移矩阵
const toMatrix = Util.transform(
    [1, 0, 0, 0, 1, 0, 0, 0, 1],
    [['t', 200, 100]], //平移到(200,100)坐标上
);
//更新节点样式和坐标
graph.updateItem(node, {
    matrix: toMatrix,
    style: {
        stroke: 'black'
    }
})

[Yanyan-Wang]

好，issue 就关掉了