柱塞
https://next.plnkr.co/edit/GDHFwA4osgrGaq9y?open=lib%2Fapp.ts&deferRun=1
注释：这是一个非常基本的插件，只是为了模拟Boombox，请记住最终应用程序具有更多元素，例如按钮和区域
上下文
嗨，
我正在制作一个带有角度的音乐应用程序，该应用程序将模拟Boombox，其中的多个图像会根据音乐的节奏更改其不透明度。图片是通过ngFor加载的，大约为35-40，它们的大小和动画是通过角度定义的。
我所面临的问题与我拥有的图像数量有关（或者就是我所想的那样）。
案例1
构建应用程序时，我的第一种方法是使用单个SVG，其结果是SVG在某些位置被随机切割（例如：圆环10的一半，圆环15和圆环25的一半消失了），动画太懒了，页面的按钮动画真的很慢，最后，图像顶部的文本随机“闪烁”。
案例2
其次，我制作并使用了35张不同大小的PNG图片，结果是页面的第一次加载确实很慢，网站的动画和交互效果更好，但是网站消耗的资源确实很丰富。高，并且在Chrome中更改标签页时，图像已从浏览器缓存中“删除”，因此当您返回网站时，图像看上去空白了几秒钟
案例3
第三次也是我最后的尝试，是使用单个PNG图像，结果与案例1相同，只是在更改标签页时页面看上去空白。
侧面解决方案
我对代码性能进行了一些改进，例如：
changeDetection：组件上的ChangeDetectionStrategy.OnPush
trackBy：ngFor上的circleTrack
将更改：不透明；在CSS上
尽管如此，所有方法均未对性能产生重大影响。
最终提示
我将非常感谢您在改善性能或采用哪种方法方面的帮助。