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

本文介绍了如何使用Javascript在控制台中调用start（）和stop（）时启动和停止多步动画？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have written following code for multistep animation.

<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之外的任何外部框架/库。）

Now by default the animation should be in stop mode. On the run of start() in console of web browser it should start the animation and stop() in console should again stop the animation. How will I proceed for this using simple JavaScript (I am recommended to not to use any external frameworks/libraries except simple HTML,CSS and JAVASCRIPT).

推荐答案

您可以将 rect 元素 .style.animationPlayState 设置为已暂停 或正在运行

You can set rect elements .style.animationPlayState to "paused" or "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>

要播放，请在控制台中暂停动画可以使用

To play, pause animations at console you can use

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

这篇关于如何使用Javascript在控制台中调用start（）和stop（）时启动和停止多步动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！