antvis / antvis/G6

[Bug]: 如果在自定义节点的情况下,给fill动画,原始node中的style参数fill会有一些很奇怪的行为

Open
#7,575 1 comment 0 reactions 0 assignees View on GitHub
bug 🐛 question 💬
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.