如何使用Javascript在控制檯中調用start（）和stop（）時啓動和停止多步動畫？

我已經爲多步動畫編寫了以下代碼。如何使用Javascript在控制檯中調用start（）和stop（）時啓動和停止多步動畫？

<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（）時，它應該啓動動畫並在控制檯中停止（）應該再次停止動畫。我將如何繼續使用簡單的JavaScript（我建議不要使用任何外部框架/庫，除了簡單的HTML，CSS和JAVASCRIPT）。

來源

2016-09-24 Sounak

由於動畫是通過關鍵幀綁在欄類，你怎麼樣只是刪除這個類，並添加另一種風格只是一個靜態的粉紅色條執行。 – Jecoms

我可以假設，最好的方法是在添加/刪除類中附加動畫的地方編寫這些函數。

來源

2016-09-24 19:30:27

您可以設置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>

要播放暫停動畫，在暫停動畫你可以使用

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

來源

2016-09-24 19:37:24 guest271314

當然你的意思是，（for酒吧的變種）{...}'？該變量聲明與其他任何聲明相同，並且應該有作用域 - 這是個好習慣。另外，ES5/6的組合很奇怪。 – Oka

我不想在網頁上添加任何其他按鈕。而在控制檯上，如果我運行start（）它應該會自動啓動動畫。同樣適用於stop（）以停止動畫。我將如何做到這一點？ – Sounak

@Sounak你正在嘗試啓動，僅在'console'停止動畫？ – guest271314

如何使用Javascript在控制檯中調用start（）和stop（）時啓動和停止多步動畫？

回答

相關問題