RoastDuck

主题

前端动画的实现 ​

而在说 7 种方式前，我们其实可以总结一下，基本也就是 4 种，分别是图片式、绘制式、CSS 式和 JS 式。

动图式 ​

很简单，就是GIF图片，让设计人员给我们一个动图，让我们直接采用img标签src属性的形式加进去。

优化策略 ​

先拿到gif的第一帧图片，同时拿到gif动图的路径。因为第一帧图片相对来说就会小很多很多了，可以快速展示。这个时候可以采用预加载gif的方式。这样的方式，同样可以使用户无感知的看到连贯的gif大图的渲染。

  • 示例代码：
js
var newImage = new Image();
newImage.src = "aa.gif";
newImage.load = function () {
  图片DOM.setAttribute("src", "aa.gif");
};

绘制式 ​

绘制式呢，又可以区分为SVG 绘制和Canvas 绘制

SVG 实现动画 ​

SVG 本身支持动画元素，如<animate>、<animateTransform>等。专门为SVG设计的动画元素，使用简单，但不如CSS和JavaScript灵活。

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>SVG Animation with <animate></title>
  </head>
  <body>
    <svg
      width="100"
      height="100"
      viewBox="0 0 100 100">
      <circle
        cx="50"
        cy="50"
        r="40"
        stroke="black"
        stroke-width="3"
        fill="red">
        <animateTransform
          attributeName="transform"
          type="rotate"
          from="0 50 50"
          to="360 50 50"
          dur="2s"
          repeatCount="indefinite" />
      </circle>
    </svg>
  </body>
</html>

Canvas 实现动画 ​

在HTML5中，使用Canvas可以实现丰富的动画效果。Canvas动画的基本原理是通过反复清除和重绘画布中的内容来创建动画效果。具体步骤包括：

  1. 创建一个Canvas元素并获取其绘图上下文。

  2. 编写绘图函数以绘制帧内容。

  3. 使用requestAnimationFrame循环调用绘图函数，以实现平滑的动画效果。

CSS 式 ​

CSS 式基本都是CSS3的实现方式，包括 动画 和 过渡 两种情况。

动画 ​

CSS动画允许你通过关键帧（keyframes）定义一系列的动画效果，并在指定的时间内逐帧播放这些效果。

  • 使用方法

    • @keyframes：定义动画的关键帧。

    • animation-name：指定要应用的动画名称。

    • animation-duration：指定动画的持续时间。

    • animation-timing-function：指定动画的速度曲线。

    • animation-delay：指定动画的延迟时间。

    • animation-iteration-count：指定动画的播放次数。

    • animation-direction：指定动画的播放方向。

  • 示例

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>CSS Animations</title>
    <style>
      @keyframes slide {
        0% {
          transform: translateX(0);
        }
        50% {
          transform: translateX(100px);
        }
        100% {
          transform: translateX(0);
        }
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        animation: slide 2s infinite;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

CSS 过渡（Transitions） ​

CSS 过渡允许你在指定的时间内平滑地改变 CSS 属性的值。

  • 使用方法

    • transition-property：指定要过渡的 CSS 属性。

    • transition-duration：指定过渡效果的持续时间。

    • transition-timing-function：指定过渡效果的速度曲线。

    • transition-delay：指定过渡效果的延迟时间。

  • 示例：

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>CSS Transitions</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        transition: background-color 0.5s ease, transform 0.5s ease;
      }
      .box:hover {
        background-color: lightcoral;
        transform: scale(1.2);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

JS 式 ​

使用 setInterval 和 setTimeout ​

在这个示例中，setTimeout 函数用于创建一个简单的动画效果，使.box元素从左向右移动。

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Animation</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div
      class="box"
      id="box"></div>
    <script>
      const box = document.getElementById("box");
      let position = 0;

      function animate() {
        position += 1;
        box.style.left = position + "px";
        if (position < 300) {
          setTimeout(animate, 10);
        }
      }

      animate();
    </script>
  </body>
</html>

使用 requestAnimationFrame ​

requestAnimationFrame是一个更高效的动画实现方法，它告诉浏览器你希望执行一个动画，并在下一次重绘之前调用指定的回调函数。

在这个示例中，requestAnimationFrame 函数用于创建一个更高效的动画效果，使.box元素从左向右移动。

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Animation</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div
      class="box"
      id="box"></div>
    <script>
      const box = document.getElementById("box");
      let position = 0;

      function animate() {
        position += 1;
        box.style.left = position + "px";
        if (position < 300) {
          requestAnimationFrame(animate);
        }
      }

      animate();
    </script>
  </body>
</html>

使用 CSS 动画和 JavaScript 控制 ​

可以结合CSS动画和JavaScript控制来实现复杂的动画效果。通过JavaScript动态添加和移除CSS类，控制动画的开始和结束。

  • 示例 在这个示例中，点击按钮时，通过JavaScript动态添加animate类，使.box元素从左向右移动。
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>JavaScript and CSS Animation</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        position: absolute;
        transition: transform 1s ease;
      }
      .animate {
        transform: translateX(300px);
      }
    </style>
  </head>
  <body>
    <div
      class="box"
      id="box"></div>
    <button onclick="startAnimation()">Start Animation</button>
    <script>
      function startAnimation() {
        const box = document.getElementById("box");
        box.classList.add("animate");
      }
    </script>
  </body>
</html>

使用动画库（如 GSAP） ​

GSAP（GreenSock Animation Platform）是一个强大的 JavaScript 动画库，可以用来创建复杂和高性能的动画效果。

如有转载或 CV 的请标注本站原文地址

Copyright © 2024-present RoastDuck