自定义节点,执行path路径动画;
- Dominant language
- TypeScript
- Stars
- 12.3k
- Forks
- 1.6k
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug / 问题描述
registerNode 中怎么配置动画
### Reproduction link / 重现链接
_No response_
### Steps to Reproduce the Bug or Issue / 重现步骤
代码一
```
G6.registerNode('car-circle', {
afterDraw(cfg, group) {
const avatar = group?.addShape('image', {
attrs: {
id:cfg.id,
x: 15,
y:15,
width: 30,
height: 30,
img: cfg.img,
clipCfg: {
show: true,
type: 'circle',
r: 15
}
},
name: 'avatar'
});
avatar?.animate({
// path:"M 460 195 L 494 314"
},
3000,
'easeLinear',
// 动画结束后的回调
(data:any)=>{
console.log('动画结束',data)
},
100
);
},
update:undefined
}, 'circle');
```
代码二
```
....code.....
useMount(() => {
if (!graphRef.current && flowRef.current) {
graphRef.current = new G6.Graph({
renderer: 'svg',
....othercode...
})
const node1 = graphRef.current.addItem('node', {
id: 'car-00200',
x: 0,
y: 0,
type: 'car-circle',
img:'01.png'
})
}
})
....othercode....
```
```
希望node1 节点通过path轨迹运动 ; 我看源码中 有animate重载写法. 请问toAttrs 这个应该怎么弄??
/**
* 执行动画 源码的里面的类型声明
* @param {ElementAttrs} toAttrs 动画最终状态
* @param {number} duration 动画执行时间
* @param {string} easing 动画缓动效果
* @param {function} callback 动画执行后的回调
* @param {number} delay 动画延迟时间
*/
animate(toAttrs: ElementAttrs, duration: number, easing?: string, callback?: Function, delay?: number);
```
### G6 Version / G6 版本
4.x
### Operating System / 操作系统
Windows
### Browser / 浏览器
Chrome
### Additional context / 补充说明
_No response_
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the G6 4.x registerNode afterDraw hook and the element animate(toAttrs, duration, easing, callback, delay) declaration shown in the issue. Check the animation implementation and related examples or tests for path handling, then verify whether a custom node can follow the requested path and whether the completion callback behaves as expected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100