高級動畫技術

開放

10.1 組合動畫

複雜的動畫可以大幅提升用戶介面,使其更具互動性和吸引力。 要創建這些動畫,通常會結合使用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 style="min-height: 60px; padding: 20px 0;">
      <div class="ball"></div>
    </div>
    <script>
      const ball = document.querySelector('.ball');

      let start = null;

      function animate(time) {
        if (!start) start = time;
        let progress = time - start;
        ball.style.left = Math.min(progress / 10, 200) + 'px';
        if (progress < 2000) {
          requestAnimationFrame(animate);
        }
      }

      requestAnimationFrame(animate);
    </script>
  </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>使用requestAnimationFrame的動畫</title>
        <style>
          .ball {
            width: 50px;
            height: 50px;
            background-color: #e74c3c;
            border-radius: 50%;
            position: absolute;
          }
        </style>
      </head>
      <body>
        <div class="ball"></div>
        <script>
// 選擇 class 為 "ball" 的元素並儲存在變量 ball 中
const ball = document.querySelector('.ball');

// 用於存儲動畫開始時間的變量
let start = null;

// 動畫函數
function animate(time) {
  // 如果動畫首次啟動,則記錄當前時間
  if (!start) start = time;
  // 計算從動畫開始以來的時間
  let progress = time - start;
  // 根據經過的時間設置球的左側位置
  // 最大位移限制在200像素
  ball.style.left = Math.min(progress / 10, 200) + 'px';
  // 如果小於2000毫秒則繼續動畫
  if (progress < 2000) {
    requestAnimationFrame(animate);
  }
}

// 開始動畫
requestAnimationFrame(animate);
        </script>
      </body>
    </html>

代碼解釋:

  • requestAnimationFrame: 這個函數會調用 animate 來執行動畫幀
  • animate: 這個函數會在2秒內將元素 .ball 移動200像素向右

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 style="padding: 30px 0">
      <div class="box" id="box"></div>
    </div>
    <button id="startButton">Start Animation</button>
    <script>
      document.getElementById('startButton').addEventListener('click', function() {
        document.getElementById('box').classList.toggle('animate');
      });
    </script>
  </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: #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">Start Animation</button>
    <script>
      document.getElementById('startButton').addEventListener('click', function() {
        document.getElementById('box').classList.toggle('animate');
      });
    </script>
  </body>
</html>

代碼解釋:

  • .box.animate: 這個類會將moveAndRotate動畫應用到元素 .box
  • JavaScript: 按鈕 #startButton 上的事件 click 會在元素 #box 上添加或移除類 animate,從而啟動動畫

10.4 通過事件與動畫互動

動畫事件,例如 animationstart, animationendanimationiteration,允許跟蹤和管理動畫。

例子:追蹤動畫事件

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('Animation started');
      });

      box.addEventListener('animationend', () => {
        console.log('Animation ended');
      });

      box.addEventListener('animationiteration', () => {
        console.log('Animation iteration');
      });
    </script>
  </body>
</html>

代碼解釋:

  • animationstart: 在動畫開始時觸發的事件
  • animationend: 在動畫結束時觸發的事件
  • animationiteration: 每次動畫重複時觸發的事件
1
任務
Frontend SELF TW,  等級 24課堂 4
上鎖
複雜動畫
複雜動畫
1
任務
Frontend SELF TW,  等級 24課堂 4
上鎖
啟動動畫
啟動動畫
留言
  • 受歡迎
你必須登入才能留言
此頁面尚無留言