如何在使用 Javascript 在控制台中调用 start() 和 stop() 时启动和停止多步动画？答案

【问题标题】：How to start and stop a multistep animation while calling start() and stop() in the console using Javascript?如何在使用 Javascript 在控制台中调用 start() 和 stop() 时启动和停止多步动画？
【发布时间】：2016-09-24 19:12:22
【问题描述】：

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

<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）。

【问题讨论】：

由于动画是由绑定到 bar 类的关键帧执行的，您是否只需删除该类并添加另一个样式为静态粉色条的类。

标签： javascript html css

【解决方案1】：

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

<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>

使用<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();

【讨论】：

你的意思是for (var rect of bar) { ... }？该变量声明与任何其他变量声明相同，并且应该限定范围 - 这是一个好习惯。此外，ES5/6 的奇怪组合。
我不想在网页上包含任何额外的按钮。在控制台上，如果我运行 start() 它应该会自动启动动画。同样适用于 stop() 来停止动画。我将如何做到这一点？
@Sounak 您正尝试仅在 console 处开始、停止动画？
是的。但是一旦我在控制台运行 start()，它应该在网页上显示动画。
@guest271314 我已经使用javascript在控制台stackoverflow.com/questions/39684019/…链接中发布了我的要求。希望这篇文章能让你更容易理解我想要实现的内容。

【解决方案2】：

我想，最好的方法是编写这些函数，在其中添加/删除附加动画的类。

【讨论】：