New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

优化动画调用 #1731

Open

Aarebecca opened this issue Jul 11, 2024 · 1 comment

Contributor

Aarebecca commented Jul 11, 2024 •

edited

Loading

在 HTML 中，对元素执行动画时，会自动合并动画对象，例如执行下面的动画逻辑后，实际上 div.getAnimations() 中之存在一个动画对象，因为这两个动画被合并了。

await div.animate(
  [
    { width: '100px', height: '100px' },
    { width: '300px', height: '300px' },
  ],
  {
    duration: 1000,
    fill: 'both',
  }
).finished;

await div.animate([
    { width: '200px', height: '100px', background: 'green' },
    { width: '300px', height: '300px', background: 'pink' },
], {
    duration: 1000,
    fill: 'both'
}).finished;

但在 G 中，会分别创建两个动画对象。当创建动画数较多时，activeAnimations 会不断增长，导致内存溢出

理论上应该需要在 packages/g-web-animations-api/src/dom/AnimationTimeline.ts play 方法中执行优化，对动画对象进行增量更新

The text was updated successfully, but these errors were encountered:

Aarebecca mentioned this issue

perf(animation): optimize animation object memory antvis/G6#6025

Merged

Contributor Author

Aarebecca commented Jul 11, 2024

同时 canvas.document?.timeline?.animationsWithPromises 中持有的动画对象也无法及时得到释放

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment