CSS动画性能较差-没有浏览器绘制
我有许多我正在制作动画的元素，我开发的方式不应该导致任何浏览器绘制。如果我在Chrome Devtools中打开“油漆闪烁”，我根本看不到任何油漆闪烁。然而，如果我记录下性能，那么图表显示有很多时间花在绘画上。FPS有时低至15fps。
我实际上是在Vue中构建的，编译后的代码导致太多代码无法粘贴到这里。我意识到动画有点问题，我仍然需要做一些计时等工作-但对于这个问题的目的，我只关心性能。
我已经在CodePen上发布了编译后的代码：
https://codepen.io/IOIIOOIO/pen/gjBqyg
似乎StackOverflow需要我在这里发布一些代码，所以这里只有一个元素的编译代码：
.circle {
position: relative;
width: 100%;
padding-top: 100%;
border-radius: 50%;
overflow: hidden;
}
.circle::before {
content: "";
background-color: black;
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
animation-name: switch;
animation-iteration-count: infinite;
animation-timing-function: steps(1);
animation-duration: 3s;
animation-delay: inherit;
}
.rotating-circle {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
}
.rotating-circle--first-cycle {
background-color: black;
animation-name: rotate, toggle-first;
animation-duration: 3s, 3s;
animation-iteration-count: infinite, infinite;
animation-timing-function: linear, steps(1);
animation-delay: 1800ms;
}
.rotating-circle--second-cycle {
opacity: 0;
animation-name: rotate, toggle-second;
animation-duration: 3s, 3s;
animation-iteration-count: infinite, infinite;
animation-timing-function: linear, steps(1);
animation-delay: 1800ms;
}
@keyframes rotate {
0% {
transform: rotate3d(0, 1, 0, 0deg);
}
50% {
transform: rotate3d(0, 1, 0, 180deg);
}
}
@keyframes toggle-first {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
75% {
opacity: 1;
}
}
@keyframes toggle-second {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 0;
}
}
@keyframes switch {
0% {
transform: translatex(0);
}
50% {
transform: translatex(100%);
}
100% {
transform: translatex(0);
}
}<div class="circle" style="background-color: rgb(255, 0, 0); animation-delay: 0ms;">
<div class="rotating-circle rotating-circle--first-cycle" style="animation-delay: 0ms;">
</div>
<div class="rotating-circle rotating-circle--second-cycle" style="background-color: rgb(255, 0, 0); animation-delay: 0ms;">
</div>
</div>
回答 1
Stack Overflow用户
发布于 2018-08-08 18:31:50
似乎所有的工作都是在Composite Layers上完成的，而不一定只在Painting上完成。我发现，将transform: translateZ(0)或will-change添加到正在进行动画处理的单个元素并没有多大帮助。但是，如果我将transform: translateZ(0)添加到父.circle元素中，那么在Composite Layers和Painting上花费的时间就会大大减少。
它的运行速度仍然相当慢，但我认为这可能是因为我的电脑有板载显卡和4 4GB的RAM。
因此，我认为这是它将得到的最好的，但如果有任何进一步的建议，将不胜感激。
下面是我将transform: translateZ(0)添加到父元素的示例：
https://codepen.io/IOIIOOIO/pen/gjBqyg
编辑
通过删除父级上的border-radius，我发现了一个显著的改进，我将其设置为overflow: hidden以创建掩码：
之前的：
.circle {
border-radius: 50%;
overflow: hidden;
}相反，我使用clip-path作为掩码：
之后的
transform: translateZ(0);
clip-path: circle(49% at 50% 50%);我相信你马上就会注意到这要好得多：
https://codepen.io/IOIIOOIO/pen/OwBBJV
任何进一步了解为什么这样做的人都将不胜感激。
https://stackoverflow.com/questions/51741818
复制相似问题