Open Aarebecca opened 3 months ago
在 HTML 中,对元素执行动画时,会自动合并动画对象,例如执行下面的动画逻辑后,实际上 div.getAnimations() 中之存在一个动画对象,因为这两个动画被合并了。
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 会不断增长,导致内存溢出
activeAnimations
理论上应该需要在 packages/g-web-animations-api/src/dom/AnimationTimeline.ts play 方法中执行优化,对动画对象进行增量更新
packages/g-web-animations-api/src/dom/AnimationTimeline.ts
play
同时 canvas.document?.timeline?.animationsWithPromises 中持有的动画对象也无法及时得到释放
canvas.document?.timeline?.animationsWithPromises
在 HTML 中,对元素执行动画时,会自动合并动画对象,例如执行下面的动画逻辑后,实际上
div.getAnimations()
中之存在一个动画对象,因为这两个动画被合并了。但在 G 中,会分别创建两个动画对象。当创建动画数较多时,
activeAnimations
会不断增长,导致内存溢出理论上应该需要在
packages/g-web-animations-api/src/dom/AnimationTimeline.ts
play
方法中执行优化,对动画对象进行增量更新