antvis / antvis/G6

[Bug]: G6的动画性能问题 大概一百多条边的蚂蚁线就掉帧严重

Open
#7,337 2 comments 0 reactions 0 assignees View on GitHub
performance
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug / 问题描述

写法就按示例中的https://g6.antv.antgroup.com/examples/animation/persistence/#ant-line
在自定义边里添加动画:onCreate() {
    const shape = this.shapeMap.key;
    shape.animate([{ lineDashOffset: -20 }, { lineDashOffset: 0 }], {
      duration: 500,
      iterations: Infinity,
    });
  }
大概140条边就很卡 页面反应很慢

### Reproduction link / 复现链接

_No response_

### Steps to Reproduce the Bug or Issue / 重现步骤

Image

### Version / 版本

🆕 5.x

### OS / 操作系统

- [ ] macOS
- [x] Windows
- [ ] Linux
- [ ] Others / 其他

### Browser / 浏览器

- [x] Chrome
- [x] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the G6 persistence ant-line example linked in the issue and reproduce the custom edge animation from its onCreate() method in Chrome or Edge on Windows. Measure responsiveness and frame performance with roughly 140 animated edges; the issue is resolved when this case no longer causes severe frame drops or a documented limitation is established.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.