javascript animateを使用して点滅する要素を作成する

作成日 2023.02.26
javascript
javascript

javascriptで、animateを使用して点滅する要素を作成するサンプルコードを記述してます。「animate」で「opacity」で不透明度を指定することで可能です。

1. 環境
2. 点滅する要素
3. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 108.0.5359.72

Javascript サンプル集はこちら

点滅する要素

点滅する要素を作成するには、
1.　「animate」で変化させるstyleに「opacity」を「0～1」に指定
することで可能です。

<style>
  .box {
    width: 250px;
    height: 250px;
    background: #37B507;
    margin: 5px;
    position:absolute;
  }
</style>

<div class="box"></div>

<script>

document.getElementsByClassName('box')[0].animate(
  [
    { transform: 'translateY(-500px)' },
		{ transform: 'translateY(1000px)' }
  ],
  {
		duration: 1500,
		iterations: Infinity
  }
);

</script>

実行結果

「animate」のプロパティに設定できる値は、以下となります。

プロパティ名	内容	値
duration	再生時間（ミリ秒）	ミリ秒を指定
delay	再生までの待機時間（ミリ秒）	ミリ秒を指定(デフォルトは0)
direction	再生方向	“normal” 0%から100%へ(デフォルト) “reverse” 100%から0%へ “alternate” 0%から100%→100%から0%で再生 “alternate-reverse” alternateの逆方向
easing	アニメーション変化方法	“linear” 一定の速度で変化(デフォルト) “ease” 開始時と終了時は緩やかに変化 “ease-in” 最初はゆっくり、だんだん速く “ease-in-out” 最初は速く、だんだんゆっくり “ease-out” 開始時と終了時はかなり緩やか “step-start”最初に100%の状態に変化 “steps( 引数1 , 引数2 )” 数値により段階的 “step-end” 0%の状態から、最後に100% “cubic-bezier( 引数1 , 引数2 , 引数3 , 引数4)” ベジエ曲線の座標で変化
endDelay	再生終了後の待機時間	ミリ秒(規定値は0)
fill	アニメーション前後の状態	“none” cssのみ(デフォルト) “forwards” 終了状態を維持 “backwards” 開始時の状態を適用 “both” forwardsとbackwardsの両方
iterationStart	再生開始タイミング「0.5」だと 50% の位置から始まり1周	0以上の小数(デフォルトは0)
iterations	再生回数	0以上の小数(デフォルトは1) 無限ループは「Infinity」
id	識別ID	文字列で指定
composite	アニメーションの状態と処理	“replace” 現在の状態で置き換え(デフォルト) “add” 状態にアニメーションの状態を追加 “accumulate” 状態にアニメーションの状態を累積
iterationComposite	繰り返し時の状態	“replace” 現在の状態で置き換え “accumulate” これまでの状態を累積

サンプルコード

以下は、
「実行」ボタンをクリックすると、要素を点滅させて「停止」ボタンで「animate」を停止する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

<!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.pause();

    }
  </script>
</body>

</html>

点滅していることが確認できます。