[Bug]: 如果在自定义节点的情况下,给fill动画,原始node中的style参数fill会有一些很奇怪的行为
- Dominant language
- TypeScript
- Stars
- 12.3k
- Forks
- 1.6k
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug / 问题描述
```js
import { Rect, Circle, ExtensionCategory, Graph, register } from '@antv/g6';
class BreathingCircle extends Rect {
onCreate() {
const halo = this.shapeMap.halo;
halo.animate([{ fill: '#ff0000' }, { fill: '#3875f6' }], {
duration: 1000,
iterations: Infinity,
direction: 'alternate',
});
}
}
register(ExtensionCategory.NODE, 'breathing-circle', BreathingCircle);
const graph = new Graph({
container: 'container',
data: {
nodes: [
{ id: 'node-0',
style: {
fill: 'ff0000', // 如果改成 '#ff0000' 动画就是不生效的
x: 100,
y: 100
}
}
],
},
node: {
type: 'breathing-circle',
style: {
size: 50,
halo: true,
},
state:{
}
//palette: ['#3875f6', '#efb041', '#ec5b56', '#72c240'],
},
// layout: {
// type: 'grid',
// },
});
graph.render();
```
[官网案例](https://g6.antv.antgroup.com/examples/animation/persistence/#breathing-circle)
以官网上的例子,现在我打算做一个fill填充色的闪烁效果,即使上当我在node节点中,给style的fill属性 使用`#ff0000`, 那么动画是不生效的,如果去掉这个`#`号动画就是生效的?这个是符合预期的吗?
### Reproduction link / 复现链接
_No response_
### Steps to Reproduce the Bug or Issue / 重现步骤
_No response_
### Version / 版本
🆕 5.x
### OS / 操作系统
- [ ] macOS
- [x] Windows
- [ ] Linux
- [ ] Others / 其他
### Browser / 浏览器
- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the linked breathing-circle example and the supplied custom-node reproduction in G6 5.x. Trace how node style fill values and animated fill values are normalized, then verify the expected behavior for '#ff0000' and 'ff0000' in Chrome; done means the behavior is corrected or clearly documented and covered by a regression check.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 43/100