Fatal编程技术网
  • translate3d/
  • 使用translate3d在CSS中平滑设置大图像动画

使用translate3d在CSS中平滑设置大图像动画

使用translate3d在CSS中平滑设置大图像动画,translate3d,Translate3d,下面的问题是关于在大型图像上使用GPU加速渲染来解决jank的问题 我在用translate3d制作大图像、使用合成器线程绘制时遇到问题。 我已将问题简化为以下问题： div{ 位置：相对位置； 宽度：1500px； 溢出：隐藏； 边框：1px实心； 高度：800px； } img{ 宽度：100%； 位置：绝对位置； 顶部：0px； -webkit动画：SJBGFore1 10s无限线性； } @-webkit关键帧SJBGFERE1{ 0%{-webkit转换：转换（0%，0em）；} 1

下面的问题是关于在大型图像上使用GPU加速渲染来解决jank的问题

我在用translate3d制作大图像、使用合成器线程绘制时遇到问题。 我已将问题简化为以下问题：


div{
位置：相对位置；
宽度：1500px；
溢出：隐藏；
边框：1px实心；
高度：800px；
}
img{
宽度：100%；
位置：绝对位置；
顶部：0px；
-webkit动画：SJBGFore1 10s无限线性；
}
@-webkit关键帧SJBGFERE1{
0%{-webkit转换：转换（0%，0em）；}
100%{-webkit转换：translate（-100%，0em）；}
}
使用Firefox开发者版，我可以看到Firefox何时在合成器线程上运行动画。当图像有几百个像素宽时，它可以根据需要工作。但是，图像需要相当大，因为它是一个动画背景图像

发现较小的图像合成正确，我尝试将动画图像拆分为7个块，按顺序进行动画： Firefox DE现在在合成器线程上运行它们。万岁

<html>

<head>

<style>

div {
    position:relative;
    width:400px;
    overflow:hidden;
    border:1px solid;
    height:800px;
}


img {
    width:100%;
    position:absolute;
    top:0px;
}

img:nth-of-type(1){-webkit-animation: SJBGFore1 10s infinite linear;}
@-webkit-keyframes SJBGFore1 {
    0%  {-webkit-transform: translate3d(0%, 0em, 0em);}
    10%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
    100%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
}

img:nth-of-type(2){-webkit-animation: SJBGFore2 10s infinite linear;}
@-webkit-keyframes SJBGFore2 {
    0%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    10%  {-webkit-transform: translate3d(0%, 0em, 0em);}
    20%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
    100%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
}

img:nth-of-type(3){-webkit-animation: SJBGFore3 10s infinite linear;}
@-webkit-keyframes SJBGFore3 {
    0%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    10%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    20%  {-webkit-transform: translate3d(0%, 0em, 0em);}
    30%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
    100%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
}

img:nth-of-type(4){-webkit-animation: SJBGFore4 10s infinite linear;}
@-webkit-keyframes SJBGFore4 {
    0%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    20%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    30%  {-webkit-transform: translate3d(0%, 0em, 0em);}
    40%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
    100%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
}

img:nth-of-type(5){-webkit-animation: SJBGFore5 10s infinite linear;}
@-webkit-keyframes SJBGFore5 {
    0%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    30%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    40%  {-webkit-transform: translate3d(0%, 0em, 0em);}
    50%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
    100%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
}

img:nth-of-type(6){-webkit-animation: SJBGFore6 10s infinite linear;}
@-webkit-keyframes SJBGFore6 {
    0%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    40%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    50%  {-webkit-transform: translate3d(0%, 0em, 0em);}
    60%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
    100%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
}

img:nth-of-type(7){-webkit-animation: SJBGFore7 10s infinite ease-out;}
@-webkit-keyframes SJBGFore7 {
    0%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    50%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    60%  {-webkit-transform: translate3d(0%, 0em, 0em);}
    70%  {-webkit-transform: translate3d(0%, 0em, 0em);}
    100%  {-webkit-transform: translate3d(0%, 0em, 0em);}
}

</style>

</head>

<body><div>
    <img src="http://www.storyjam.co.uk/fiddleresources/ground1.svg">
    <img src="http://www.storyjam.co.uk/fiddleresources/ground2.svg">
    <img src="http://www.storyjam.co.uk/fiddleresources/ground3.svg">
    <img src="http://www.storyjam.co.uk/fiddleresources/ground4.svg">
    <img src="http://www.storyjam.co.uk/fiddleresources/ground5.svg">
    <img src="http://www.storyjam.co.uk/fiddleresources/ground6.svg">
    <img src="http://www.storyjam.co.uk/fiddleresources/ground7.svg">
</div></body>

</html>


div{
位置：相对位置；
宽度：400px；
溢出：隐藏；
边框：1px实心；
高度：800px；
}
img{
宽度：100%；
位置：绝对位置；
顶部：0px；
}
img:n类型（1）{-webkit动画：SJBGFore1 10s无限线性；}
@-webkit关键帧SJBGFERE1{
0%{-webkit转换：translate3d（0%，0em，0em）；}
10%{-webkit转换：translate3d（-100%，0em，0em）；}
100%{-webkit转换：translate3d（-100%，0em，0em）；}
}
img:n类型（2）{-webkit动画：SJBGFore2 10s无限线性；}
@-webkit关键帧SJBGFERE2{
0%{-webkit转换：translate3d（100%，0em，0em）；}
10%{-webkit转换：translate3d（0%，0em，0em）；}
20%{-webkit转换：translate3d（-100%，0em，0em）；}
100%{-webkit转换：translate3d（-100%，0em，0em）；}
}
img:n类型（3）{-webkit动画：SJBGFore3 10s无限线性；}
@-webkit关键帧SJBGFore3{
0%{-webkit转换：translate3d（100%，0em，0em）；}
10%{-webkit转换：translate3d（100%，0em，0em）；}
20%{-webkit转换：translate3d（0%，0em，0em）；}
30%{-webkit转换：translate3d（-100%，0em，0em）；}
100%{-webkit转换：translate3d（-100%，0em，0em）；}
}
img:n类型（4）{-webkit动画：SJBGFore4 10s无限线性；}
@-webkit关键帧SJBGFore4{
0%{-webkit转换：translate3d（100%，0em，0em）；}
20%{-webkit转换：translate3d（100%，0em，0em）；}
30%{-webkit转换：translate3d（0%，0em，0em）；}
40%{-webkit转换：translate3d（-100%，0em，0em）；}
100%{-webkit转换：translate3d（-100%，0em，0em）；}
}
img:n类型（5）{-webkit动画：SJBGFore5 10s无限线性；}
@-webkit关键帧SJBGFore5{
0%{-webkit转换：translate3d（100%，0em，0em）；}
30%{-webkit转换：translate3d（100%，0em，0em）；}
40%{-webkit转换：translate3d（0%，0em，0em）；}
50%{-webkit转换：translate3d（-100%，0em，0em）；}
100%{-webkit转换：translate3d（-100%，0em，0em）；}
}
img:n类型（6）{-webkit动画：SJBGFore6 10s无限线性；}
@-webkit关键帧SJBGFore6{
0%{-webkit转换：translate3d（100%，0em，0em）；}
40%{-webkit转换：translate3d（100%，0em，0em）；}
50%{-webkit转换：translate3d（0%，0em，0em）；}
60%{-webkit转换：translate3d（-100%，0em，0em）；}
100%{-webkit转换：translate3d（-100%，0em，0em）；}
}
img:n类型（7）{-webkit动画：SJBGFore7 10s无限放松；}
@-webkit关键帧SJBGFore7{
0%{-webkit转换：translate3d（100%，0em，0em）；}
50%{-webkit转换：translate3d（100%，0em，0em）；}
60%{-webkit转换：translate3d（0%，0em，0em）；}
70%{-webkit转换：translate3d（0%，0em，0em）；}
100%{-webkit转换：translate3d（0%，0em，0em）；}
}
然而，我无法在Chrome中复制改进后的性能。无论我做什么，我都会得到很多janky帧，每个帧中都有一系列的事件，这会导致整个lotta jank： （重新计算样式->更新图层树->更新图层树->复合图层）

令人困惑的是：Chrome正在进行“合成层”操作，这表明它使用的是GPU加速。在这种情况下，为什么它必须重新计算样式，为什么它要更新图层树，为什么我会得到如此讨厌的jank

我尝试过的事情：

  • 使用“左”设置动画以避免GPU加速。导致了更糟糕的表现
  • 使用“translate”而不是“translate3d”。对流程/性能没有显著影响
    • <html>

<head>

<style>

div {
    position:relative;
    width:400px;
    overflow:hidden;
    border:1px solid;
    height:800px;
}


img {
    width:100%;
    position:absolute;
    top:0px;
}

img:nth-of-type(1){-webkit-animation: SJBGFore1 10s infinite linear;}
@-webkit-keyframes SJBGFore1 {
    0%  {-webkit-transform: translate3d(0%, 0em, 0em);}
    10%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
    100%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
}

img:nth-of-type(2){-webkit-animation: SJBGFore2 10s infinite linear;}
@-webkit-keyframes SJBGFore2 {
    0%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    10%  {-webkit-transform: translate3d(0%, 0em, 0em);}
    20%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
    100%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
}

img:nth-of-type(3){-webkit-animation: SJBGFore3 10s infinite linear;}
@-webkit-keyframes SJBGFore3 {
    0%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    10%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    20%  {-webkit-transform: translate3d(0%, 0em, 0em);}
    30%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
    100%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
}

img:nth-of-type(4){-webkit-animation: SJBGFore4 10s infinite linear;}
@-webkit-keyframes SJBGFore4 {
    0%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    20%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    30%  {-webkit-transform: translate3d(0%, 0em, 0em);}
    40%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
    100%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
}

img:nth-of-type(5){-webkit-animation: SJBGFore5 10s infinite linear;}
@-webkit-keyframes SJBGFore5 {
    0%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    30%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    40%  {-webkit-transform: translate3d(0%, 0em, 0em);}
    50%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
    100%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
}

img:nth-of-type(6){-webkit-animation: SJBGFore6 10s infinite linear;}
@-webkit-keyframes SJBGFore6 {
    0%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    40%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    50%  {-webkit-transform: translate3d(0%, 0em, 0em);}
    60%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
    100%  {-webkit-transform: translate3d(-100%, 0em, 0em);}
}

img:nth-of-type(7){-webkit-animation: SJBGFore7 10s infinite ease-out;}
@-webkit-keyframes SJBGFore7 {
    0%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    50%  {-webkit-transform: translate3d(100%, 0em, 0em);}
    60%  {-webkit-transform: translate3d(0%, 0em, 0em);}
    70%  {-webkit-transform: translate3d(0%, 0em, 0em);}
    100%  {-webkit-transform: translate3d(0%, 0em, 0em);}
}

</style>

</head>

<body><div>
    <img src="http://www.storyjam.co.uk/fiddleresources/ground1.svg">
    <img src="http://www.storyjam.co.uk/fiddleresources/ground2.svg">
    <img src="http://www.storyjam.co.uk/fiddleresources/ground3.svg">
    <img src="http://www.storyjam.co.uk/fiddleresources/ground4.svg">
    <img src="http://www.storyjam.co.uk/fiddleresources/ground5.svg">
    <img src="http://www.storyjam.co.uk/fiddleresources/ground6.svg">
    <img src="http://www.storyjam.co.uk/fiddleresources/ground7.svg">
</div></body>

</html>