Question

我为多步动画编写了以下代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
   $max: 100px;

.equilizer {
  height: $max;
  width: $max;
  transform: rotate(180deg);
}

.bar {
  fill: DeepPink;
  width: 18px;
  animation: equalize 1.25s steps(25, end) 0s infinite;
}

.bar:nth-child(1) { 
  animation-duration: 1.9s;
}

.bar:nth-child(2) { 
  animation-duration: 2s;
}

.bar:nth-child(3) { 
  animation-duration: 2.3s;
}

.bar:nth-child(4) { 
  animation-duration: 2.4s;
}

.bar:nth-child(5) { 
  animation-duration: 2.1s;
}

@keyframes equalize {
  0% {
    height: 60px;
  }
  4% {
    height: 50px;
  }
  8% {
    height: 40px;
  }
  12% {
    height: 30px;
  }
  16% {
    height: 20px;
  }
  20% {
    height: 30px;
  }
  24% {
    height: 40px;
  }
  28% {
    height: 10px;
  }
  32% {
    height: 40px;
  }
  36% {
    height: 60px;
  }
  40% {
    height: 20px;
  }
  44% {
    height: 40px;
  }
  48% {
    height: 70px;
  }
  52% {
    height: 30px;
  }
  56% {
    height: 10px;
  }
  60% {
    height: 30px;
  }
  64% {
    height: 50px;
  }
  68% {
    height: 60px;
  }
  72% {
    height: 70px;
  }
  76% {
    height: 80px;
  }
  80% {
    height: 70px;
  }
  84% {
    height: 60px;
  }
  88% {
    height: 50px;
  }
  92% {
    height: 60px;
  }
  96% {
    height: 70px;
  }
  100% {
    height: 80px;
  }
}
</style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" class="equilizer" viewBox="0 0 128 128">
  <g>
    <title>Audio Equilizer</title>
    <rect class="bar" transform="translate(0,0)" y="15"></rect>
    <rect class="bar" transform="translate(25,0)" y="15"></rect>
    <rect class="bar" transform="translate(50,0)" y="15"></rect>
    <rect class="bar" transform="translate(75,0)" y="15"></rect>
    <rect class="bar" transform="translate(100,0)" y="15"></rect>
  </g>
</svg>
</body>
</html>

现在默认情况下，动画应处于停止模式。在web浏览器的控制台中运行start（）时，它应该启动动画并且控制台中的stop（）应该再次停止动画。我将如何使用简单的JavaScript继续（我建议不要使用任何外部框架/库，除了简单的HTML，CSS和JAVASCRIPT）。

Answer 1

您可以将rect元素.style.animationPlayState设置为"paused"或"running"

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <style>
    .equilizer {
      height: 100px;
      width: 100px;
      transform: rotate(180deg);
    }
    .bar {
      fill: DeepPink;
      width: 18px;
      animation: equalize 1.25s steps(25, end) 0s infinite;
      animation-play-state: paused;
    }
    .bar:nth-child(1) {
      animation-duration: 1.9s;
    }
    .bar:nth-child(2) {
      animation-duration: 2s;
    }
    .bar:nth-child(3) {
      animation-duration: 2.3s;
    }
    .bar:nth-child(4) {
      animation-duration: 2.4s;
    }
    .bar:nth-child(5) {
      animation-duration: 2.1s;
    }
    @keyframes equalize {
      0% {
        height: 60px;
      }
      4% {
        height: 50px;
      }
      8% {
        height: 40px;
      }
      12% {
        height: 30px;
      }
      16% {
        height: 20px;
      }
      20% {
        height: 30px;
      }
      24% {
        height: 40px;
      }
      28% {
        height: 10px;
      }
      32% {
        height: 40px;
      }
      36% {
        height: 60px;
      }
      40% {
        height: 20px;
      }
      44% {
        height: 40px;
      }
      48% {
        height: 70px;
      }
      52% {
        height: 30px;
      }
      56% {
        height: 10px;
      }
      60% {
        height: 30px;
      }
      64% {
        height: 50px;
      }
      68% {
        height: 60px;
      }
      72% {
        height: 70px;
      }
      76% {
        height: 80px;
      }
      80% {
        height: 70px;
      }
      84% {
        height: 60px;
      }
      88% {
        height: 50px;
      }
      92% {
        height: 60px;
      }
      96% {
        height: 70px;
      }
      100% {
        height: 80px;
      }
    }
  </style>
</head>

<body>
  <button>play/pause</button>
  <svg xmlns="http://www.w3.org/2000/svg" class="equilizer" viewBox="0 0 128 128">
    <g>
      <title>Audio Equilizer</title>
      <rect class="bar" transform="translate(0,0)" y="15"></rect>
      <rect class="bar" transform="translate(25,0)" y="15"></rect>
      <rect class="bar" transform="translate(50,0)" y="15"></rect>
      <rect class="bar" transform="translate(75,0)" y="15"></rect>
      <rect class="bar" transform="translate(100,0)" y="15"></rect>
    </g>
  </svg>
  <script>
    var button = document.querySelector("button");
    var bar = document.querySelectorAll(".bar");
    for (let rect of bar) {
      rect.style.animationPlayState = "paused";
    }
    button.addEventListener("click", function(e) {
      var state = bar[0].style.animationPlayState;
      for (let rect of bar) {
        rect.style.animationPlayState = state === "paused" ? "running" : "paused"
      }
    });
  </script>
</body>

</html>

＆＃13;

要播放，请使用<button>元素暂停动画

  <script>
    var button = document.querySelector("button");
    var bar = document.querySelectorAll(".bar");
    for (let rect of bar) {
      rect.style.animationPlayState = "paused";
    }
    button.addEventListener("click", function(e) {
      var state = bar[0].style.animationPlayState;
      for (let rect of bar) {
        rect.style.animationPlayState = state === "paused" ? "running" : "paused"
      }
    });
  </script>

要播放，请在console暂停动画，您可以使用

var bar = document.querySelectorAll(".bar");


function start() {
  for (let rect of bar) {
    rect.style.animationPlayState = "running"
  }
}

function stop() {
  for (let rect of bar) {
    rect.style.animationPlayState = "paused"
  }    
}

// run animations 
start();

// pause animations
stop();

Answer 2

我可以想，最好的方法是在添加/删除带有附加动画的类的地方编写这些函数。

如何使用Javascript在控制台中调用start（）和stop（）时启动和停止多步动画？

2 个答案: