css - 为多个图像角度应用程序设置动画时提高性能

Question

普朗克

https://next.plnkr.co/edit/GDHFwA4osgrGaq9y?open=lib%2Fapp.ts&deferRun=1

注释：这是一个非常基本的 plunker，只是为了模拟 Boombox，记住最终的应用程序有更多的元素，如按钮和部分

语境

你好，

我正在做一个有角度的音乐应用程序，该应用程序将模拟一个带有多个图像的 Boombox，它们会随着音乐的节奏改变它们的不透明度。图像通过 ngFor 加载，大小约为 35-40，它们的大小和动画是通过 angular 定义的。

我面临的问题与我拥有的图像数量有关（或者这就是我的想法）。

情况1

我在构建应用程序时的第一种方法是使用单个 SVG，结果是 SVG 在某些位置被随机剪切（例如：Circle #10、Circle #15 和 Circle #25 的一半消失了），动画滞后并且页面的按钮动画真的很慢，最后，图像顶部的文字随机“闪烁”。

案例#2

其次，我制作并使用了35张不同大小的PNG图片，结果是页面第一次加载很慢，网站的动画和交互更好，但是网站消耗的资源真的很高，而且在 Chrome 中更改选项卡时，图像已从浏览器缓存中“删除”，因此当您返回网站时，它看起来空白几秒钟

案例#3

第三，也是我最后的尝试，是使用单个 PNG 图像，结果与案例 #1 相同，只是在更改选项卡时页面看起来是空白的。

侧面解决方案

我做了一些代码性能改进，例如：

• changeDetection：组件上的ChangeDetectionStrategy.OnPush

• ngFor 上的 trackBy:circleTrack

• will-change：不透明度；在 CSS 上

尽管如此，这些方法都没有对性能产生重大影响。

最后的笔记

• 我必须使用图像，我团队的设计师正在制作不同的样式，稍后将进入应用程序
• 我使用路由角度动画，当我在组件之间切换时，动画总是滞后，有时甚至不做动画

对于如何提高性能或采用何种方法，我将不胜感激。

标签： cssangularimageperformanceangular6