CodeGym/コース/Frontend SELF JA/高度なアニメーションテクニック

高度なアニメーションテクニック

使用可能

10.1 複合アニメーション

複雑なアニメーションはUIを大幅に改良し、よりインタラクティブで魅力的なものにすることができるよ。 こうしたアニメーションを作るには、CSSとJavaScriptの組み合わせがよく使われる。ここでは、 より高度なアニメーションテクニックを見ていくね。複雑なシナリオやインタラクティブ性を含むアニメーションがテーマだよ。

複数のアニメーションを組み合わせることで、CSSで凝ったエフェクトを作ることができる。一例として、 要素が同時にサイズを変えたり、回転したり、移動したりする場合を考えよう。

例: 複合アニメーション

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>複合アニメーション</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        animation: combined 4s infinite alternate;
      }

      @keyframes combined {
        0% {
          transform: scale(1) rotate(0deg) translateX(0);
        }

        50% {
          transform: scale(1.5) rotate(45deg) translateX(100px);
        }

        100% {
          transform: scale(1) rotate(0deg) translateX(0);
        }
      }
    </style>
  </head>
  <body>
    <div style="min-height: 250px; padding: 20px 0;">
      <div class="box"></div>
    </div>
  </body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>複合アニメーション</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        animation: combined 4s infinite alternate;
      }

      @keyframes combined {
        0% {
          transform: scale(1) rotate(0deg) translateX(0);
        }

        50% {
          transform: scale(1.5) rotate(45deg) translateX(100px);
        }

        100% {
          transform: scale(1) rotate(0deg) translateX(0);
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

コード解説:

  • .box: 複合アニメーションが適用される要素
  • @keyframes combined: 要素のスケール、回転、位置を変更するアニメーション

10.2 JavaScriptアニメーション

requestAnimationFrame 関数を使うと、高パフォーマンスでスムーズなアニメーションを作れる。 この関数は画面のリフレッシュレートに同期してアニメーションを動かすから、動きが自然になるよ。

例: requestAnimationFrameを使った移動アニメーション

HTML
<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>requestAnimationFrameでアニメーション</title>
        <style>
          .ball {
            width: 50px;
            height: 50px;
            background-color: #e74c3c;
            border-radius: 50%;
            position: absolute;
          }
        </style>
      </head>
      <body>
        <div class="ball"></div>
        <script>
// クラス "ball" の要素を選択して変数 ball に保存
const ball = document.querySelector('.ball');

// アニメーションの開始時間を記録する変数
let start = null;

// アニメーションの関数
function animate(time) {
  // 初回呼び出し時に現在の時間を記録
  if (!start) start = time;
  // アニメーション開始からの経過時間を計算
  let progress = time - start;
  // 経過時間に応じてボールの位置を更新 (最大移動距離200px)
  ball.style.left = Math.min(progress / 10, 200) + 'px';
  // アニメーションが2秒以内なら続ける
  if (progress < 2000) {
    requestAnimationFrame(animate);
  }
}

// アニメーションを開始
requestAnimationFrame(animate);
        </script>
      </body>
    </html>

コード解説:

  • requestAnimationFrame: アニメーションフレームを実行するために animate を呼び出す関数
  • animate: 要素 .ball を2秒間で200px右に移動させる関数

10.3 JavaScriptでCSSアニメーションを制御

JavaScriptを使って、要素のクラスやスタイルを変更することでCSSアニメーションを制御できるよ。

例: ボタンをクリックしてCSSアニメーションを開始

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ボタンクリックでアニメーション開始</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        position: relative;
      }

      .box.animate {
        animation: moveAndRotate 3s forwards;
      }

      @keyframes moveAndRotate {
        0% {
          transform: translateX(0) rotate(0deg);
        }

        100% {
          transform: translateX(200px) rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="box" id="box"></div>
    <button id="startButton">アニメーション開始</button>
    <script>
      document.getElementById('startButton').addEventListener('click', function() {
        document.getElementById('box').classList.toggle('animate');
      });
    </script>
  </body>
</html>

コード解説:

  • .box.animate: 要素 .box にアニメーション moveAndRotate を適用するクラス
  • JavaScript: ボタン #startButtonclick イベントが、クラス animate を 要素 #box に追加または削除し、アニメーションを開始または停止する

10.4 アニメーションイベントとの連動

animationstart, animationend, animationiteration などのイベントを使うと、 アニメーションを追跡したり、制御したりできるよ。

例: アニメーションイベントの追跡

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>アニメーションイベントの追跡</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #9b59b6;
        animation: scaleUp 2s infinite;
      }

      @keyframes scaleUp {
        0% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.5);
        }

        100% {
          transform: scale(1);
        }
      }
    </style>
  </head>
  <body>
    <div class="box" id="box"></div>
    <script>
      const box = document.getElementById('box');

      box.addEventListener('animationstart', () => {
        console.log('アニメーション開始');
      });

      box.addEventListener('animationend', () => {
        console.log('アニメーション終了');
      });

      box.addEventListener('animationiteration', () => {
        console.log('アニメーション繰り返し');
      });
    </script>
  </body>
</html>

コード解説:

  • animationstart: アニメーションが開始するときに発火するイベント
  • animationend: アニメーションが終了するときに発火するイベント
  • animationiteration: アニメーションが繰り返されるたびに発火するイベント
1
タスク
Frontend SELF JA,  レベル 24レッスン 4
ロック未解除
複雑なアニメーション
複雑なアニメーション
1
タスク
Frontend SELF JA,  レベル 24レッスン 4
ロック未解除
アニメーションの開始
アニメーションの開始
コメント
  • 人気
  • 新規
  • 古い
コメントを残すには、サインインしている必要があります
このページにはまだコメントがありません