优化动画调用

[Aarebecca]

在 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 方法中执行优化，对动画对象进行增量更新

[Aarebecca]

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