javascript animateを停止する
- 作成日 2023.01.07
- javascript
- javascript
javascriptで、animateを停止するサンプルコードを記述してます。「animate」を停止させるにはanimateを生成したオブジェクトを「cancel」することで可能です。一時停止は「pause」となります。
環境
- OS windows11 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 108.0.5359.125
animateを停止
animateを停止するには、
1. 生成した「animate」を変数に代入
2. 代入した変数に「cancel()」を使用
することで可能です。
※停止したものを開始させるには「play()」を使用します。
<style>
.box {
width: 80px;
height: 80px;
background: #37B507;
margin: 5px;
position:absolute;
}
</style>
<div class="box"></div>
<button id="btnStart">start</button>
<button id="btnEnd">end</button>
<script>
let obj = document.getElementsByClassName('box')[0].animate(
// 変化させるスタイル
[
{ width: '0px' },
{ width: '500px' }
],
// プロパティ
{
duration: 1000,
iterations: Infinity,
direction: 'alternate'
}
);
// 停止処理
document.getElementById('btnEnd').addEventListener('click', function() {
obj.cancel();
});
// 開始処理
document.getElementById('btnStart').addEventListener('click', function() {
obj.play();
});
</script>
実行結果を見ると停止していることが確認できます。
一時停止
一時停止させる場合は「pause()」を使用します。
<script>
let obj = document.getElementsByClassName('box')[0].animate(
// 変化させるスタイル
[
{ width: '0px' },
{ width: '500px' }
],
// プロパティ
{
duration: 1000,
iterations: Infinity,
direction: 'alternate'
}
);
document.getElementById('btnEnd').addEventListener('click', () => {
obj.pause();
});
document.getElementById('btnStart').addEventListener('click', () => {
obj.play();
});
</script>
実行結果
初期状態に戻す
初期状態に戻す場合は「currentTime」に「0」を指定します。
<script>
let obj = document.getElementsByClassName('box')[0].animate(
// 変化させるスタイル
[
{ width: '0px' },
{ width: '500px' }
],
// プロパティ
{
duration: 1000,
iterations: Infinity,
direction: 'alternate'
}
);
document.getElementById('btnEnd').addEventListener('click', () => {
obj.currentTime = 0;
});
document.getElementById('btnStart').addEventListener('click', () => {
obj.play();
});
</script>
実行結果
サンプルコード
以下は、
「実行」ボタンをクリックすると、要素を点滅させる「animate」を起動して「停止」ボタンをクリックすると停止する
サンプルコードとなります。
※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mebeeサンプル</title>
<!-- MDB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>
<body>
<div class="container text-center w-25" style="margin-top:150px">
<h2><span class="badge badge-info">要素</span></h2>
<button id="btnStrat" type="button" class="btn btn-raised btn-info">
実行
</button>
<button id="btnStop" type="button" class="btn btn-raised btn-danger">
停止
</button>
</div>
<script>
// animateのイベント用の変数
let aevent;
// 開始のクリックイベントを登録
btnStrat.onclick = () => {
aevent = document.getElementsByClassName('badge')[0].animate(
// 変化させるスタイル
[
{ opacity: 1 },
{ opacity: 0 }
],
// プロパティ
{
duration: 500,
iterations: Infinity
}
);
};
// 停止のクリックイベントを登録
btnStop.onclick = () => {
aevent.cancel();
}
</script>
</body>
</html>
停止ボタンで停止していることが確認できます。
-
前の記事
Rust 日時に時間を加算・減算する 2023.01.07
-
次の記事
SQL Server テスト用のデータを作成する 2023.01.07
コメントを書く