优化动画调用

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

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

Start in packages/g-web-animations-api/src/dom/AnimationTimeline.ts, focusing on the play method and how activeAnimations is updated. Reproduce the issue with repeated sequential animate calls like the example, then compare the number of animation objects and activeAnimations growth. Done means repeated animations are incrementally updated or merged without unbounded activeAnimations growth.

Written by the indexing model from the issue text.