How To Start And Stop A Multistep Animation While Calling Start() And Stop() In The Console Using Javascript?
I have written following code for multistep animation. Now by default the animation should be in stop mode. On the run of start() in console of web browser it should start the ani
Solution 1:
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>To play, pause animations using a <button> element
<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();
Solution 2:
I can suppose, the best way is to write these functions where you add/remove class with the animation attached to it.
Post a Comment for "How To Start And Stop A Multistep Animation While Calling Start() And Stop() In The Console Using Javascript?"