The issue has been closed
问题描述
力导布局中，改变 node size 尺寸时，如何添加尺寸变化的动画
重现链接
https://antv-g6.gitee.io/zh/examples/net/forceDirected#forceBubbles
重现步骤
-
预期行为
在改变node size后，node有变大变小的动画
平台
- 操作系统: macOS
- 网页浏览器: Google Chrome
- G6 版本: 4.8.23
屏幕截图或视频（可选）
No response
补充说明（可选）
尝试 graph.animate = true 并配置相应参数，无效，猜测这个应该是针对全局布局的，也在预期之中
尝试添加元素动画 自定义节点，但是 afterDraw 好像只有第一次渲染时调用，后续更新并没有触发
posted by github-actions[bot] over 1 year ago Hi @SageKwun, Please star this repo if you find it useful! Thanks :star:!
你好 @SageKwun。如果该仓库对你有用，可以 star 一下，感谢你的 :star:!
你好，可以参考这个案例 https://g6.antv.antgroup.com/examples/scatter/node/#node 中
G6.registerNode(
'circle-animate',
{
afterDraw(cfg, group) {
const shape = group.get('children')[0];
shape.animate(
(ratio) => {
const diff = ratio <= 0.5 ? ratio * 10 : (1 - ratio) * 10;
return {
r: cfg.size / 2 + diff,
};
},
{
repeat: true,
duration: 3000,
easing: 'easeCubic',
},
);
},
},
'circle',
);
注册节点时重写 draw 方法以在更新节点尺寸时调用动画
IssueHunt