在此之后，我如何为另一种颜色制作动画

how do i animate another colour after this?

本文关键字：颜色 动画 另一种 在此之后      更新时间：2023-09-26

我有一个 2x4 的盒子，使用 html 中的"div"并在 CSS 中格式化。

<body>
<div class="container">
<div class="box rightSpacing">
  <!--Box 1--->
</div>
<div class="box rightSpacing" id="green">
  <!--Box 2--->
</div>
<div class="box rightSpacing">
  <!--Box 3--->
</div>
<div class="box">
  <!--Box 4--->
</div>
<div class="box rightSpacing">
  <!--Box 5--->
</div>
<div class="box rightSpacing" id="yellow">
  <!--Box 6--->
</div>
<div class="box rightSpacing">
  <!--Box 7--->
</div>
<div class="box">
  <!--Box 8--->
</div>

</div>
</body>

我需要以类似的风格将"div id="green"'动画化为绿色，紧随其后的是类似的时间长度。这就是我需要帮助的地方，我被困住了。谢谢

这是我在 JavaScript 中已经拥有的动画代码。

                lerp = function(a, b, u) {
              return (1 - u) * a + u * b;
            };

            fade = function(element, property, start, end, duration) {
              var interval = 10;
              var steps = duration / interval;
              var step_u = 1.0 / steps;
              var u = 0.0;
              var theInterval = setInterval(function() {
                if (u >= 1.0) {
                  clearInterval(theInterval)
                }
                var r = parseInt(lerp(start.r, end.r, u));
                var g = parseInt(lerp(start.g, end.g, u));
                var b = parseInt(lerp(start.b, end.b, u));
                var colorname = 'rgb(' + r + ',' + g + ',' + b + ')';
                el.style.setProperty(property, colorname);
                u += step_u;
              }, interval);
            };
            el = document.getElementById('yellow');
            property = 'background-color';
            startColor = {
              r: 255,
              g: 255,
              b: 255,
            };
            endColor = {
              r: 255,
              g: 255,
              b: 0
            };
            fade(el, 'background-color', startColor, endColor, 10);

            setTimeout(function() {
              fade(el, 'background-color', endColor, startColor, 10);
            }, 1000);
  • 请裸露，因为我对此非常陌生！

你可以按照以下方式做。

el = document.getElementById('yellow');
el1 = document.getElementById('green');
setTimeout(function() {
    fade(el, 'background-color', endColor, startColor, 10);
    fade(el1, 'background-color', greeColor, startColor, 2000);
}, 1000);

和功能的变化 

el.style.setProperty(property, colorname);

自

element.style.setProperty(property, colorname);

工作小提琴

相关文章：