CodeGym/课程/Frontend SELF ZH/高级动画技术

高级动画技术

可用

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>
// 选择带有"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: 函数将元素.ball在2秒内向右移动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: 为元素.box添加动画moveAndRotate的类
  • JavaScript: 在按钮#startButton上触发click事件,添加或移除元素#boxanimate类,启动动画

10.4 通过事件与动画互动

animationstartanimationendanimationiteration这样的动画事件允许你跟踪和管理动画。

示例:跟踪动画事件

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 ZH,  第 24 级课程 4
已锁定
复杂动画
复杂动画
1
任务
Frontend SELF ZH,  第 24 级课程 4
已锁定
启动动画
启动动画
评论
  • 受欢迎
你必须先登录才能发表评论
此页面还没有任何评论