1

我正在使用一个名为Intuiface的程序创建一个交互式触摸屏显示器，并创建了一些背景图块/正方形，我想通过在颜色之间缓慢转换来使它们看起来“生动”。

我在 CSS 中使用了线性渐变过渡来做到这一点，但问题是过渡看起来不连贯。该程序正在运行 12 个可见图块（它是一个非常大的触摸屏）。

我尝试过使用更少的颜色并在更强大的 GPU 上运行（我认为它无论如何都是 CPU 运行的），但这并没有帮助。

body {
    width: 100wh;
    height: 90vh;
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    animation: Gradient 15s ease infinite;
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

目前动画明显断断续续。我希望过渡更加顺利。有谁知道我怎么能做到这一点？

这是代码片段。

body {
  width: 100wh;
  height: 90vh;
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  background-size: 400% 400%;
  animation: Gradient 15s ease infinite;
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}
<html>

<body>
</body>

</html>

4

2 回答 2

2

动画background-*属性可能会占用大量资源 - 您可以尝试制作动画transform以获得相对更好的性能 - 请参阅下面的演示，使用traslate制作动画：

body {
  margin: 0;
}

div {
  height: 100vh;
  overflow: hidden;
}

div:after {
  content: '';
  display: block;
  width: 400vw;
  height: 400vh;
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  50% {
    transform: translate(-300vw, -300vh);
  }
}
<div></div>

于 2019-04-19T10:57:34.920 回答
0

由于您的动画持续 15 秒，因此尝试以 60fps 的全速运行它意味着计算 15*60 = 900 帧。

由于一帧和下一帧之间的差异非常小，因此您可以减少 CPU 的工作来要求步进动画，例如使用steps(75)

在动画之间设置轻微的延迟也可能很好，这样它们就不会同时执行

body {
  width: 100wh;
  height: 90vh;
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  background-size: 400% 400%;
  animation: Gradient 15s infinite steps(75);
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}
<html>

<body>
</body>

</html>

于 2019-04-19T18:22:08.397 回答