我有许多我正在制作动画的元素,我开发的方式不应该导致任何浏览器绘制。如果我在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>
发布于 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
复制相似问题