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

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

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

環境

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

点滅する要素

点滅する要素を作成するには、
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」を使用してます。関数はアロー関数で記述してます。

<!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>

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