前端实现动画有哪些方式？

Posted on:2024年8月10日 at 17:06

前端常用的动画实现方式有以下种：

  1. css3的transition 属性
  2. css3的animation 属性
  3. 原生JS动画
  4. 使用canvas绘制动画
  5. SVG动画
  6. Jquery的animate函数
  7. 使用gif图片

1. css3的transition

transition属性：

用来设置样式的属性值是如何从一种状态平滑过渡到另外一种状态

语法：

transition: property duration timing-function delay;

transition是一种简写属性,它可以拆分为四个过渡属性。你可以 transition: 值1，值2，值3，值4 这样写，也可以：transition-property: 值1;，transition-duration:值2;，transition-timing-function:值2;，transition-delay:值4;这样写。

值描述
transition-property规定设置过渡效果的 CSS 属性的名称。
transition-duration规定完成过渡效果需要多少秒或毫秒。
transition-timing-function规定速度效果的速度曲线。
transition-delay定义过渡效果何时开始。

演示代码：

<div></div>

div {
  width: 50px;
  height: 50px;
  background-color: pink;
}

div:hover {
  width: 200px;
}

效果图：

在这里插入图片描述

由上图可看出：鼠标移入移出时,width状态的变化是瞬间完成的。

添加transition: 1s;后

div {
  width: 50px;
  height: 50px;
  background-color: pink;
  transition: 1s;
}
div:hover {
  width: 200px;
}

效果图：

在这里插入图片描述

transition: 1s; 设置了width属性状态变化的过渡时间为1秒。

transition属性默认为：transition: all 0 ease 0;

transition:1s; 等价于 transition: all 1s ease 0;

2. css3的animation

animation属性：比较类似于 flash 中的逐帧动画。学习过 flash的同学知道，这种逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画在 CSS3 中是由属性keyframes来完成逐帧动画的。

animation属性与transition属性的区别：

演示代码：

<div></div>

div {
  width: 50px;
  height: 50px;
  background-color: pink;
}
div:hover {
  animation: change1 5s;
}
@keyframes change1 {
  25% {
    width: 130px;
    background-color: red;
  }
  50% {
    width: 170px;
    background-color: blue;
  }
  75% {
    width: 210px;
    background-color: green;
  }
  100% {
    width: 250px;
    background-color: yellow;
  }
}

效果图：

在这里插入图片描述

3. 原生JS动画

其主要思想是通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。

javascript 实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style type="text/css">
      #rect {
        width: 200px;
        height: 200px;
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <div id="rect"></div>
    <script>
      let elem = document.getElementById("rect");
      let left = 0;
      let timer = setInterval(function () {
        if (left < window.innerWidth - 200) {
          elem.style.marginLeft = left + "px";
          left++;
        } else {
          clearInterval(timer);
        }
      }, 16);
    </script>
  </body>
</html>

上面的例子中，我们设置的setInterval时间间隔是16ms。一般认为人眼能辨识的流畅动画为每秒60帧，这里16ms比(1000ms/60)帧略小一些，但是一般可仍为该动画是流畅的。

在很多移动端动画性能优化时，一般使用16ms来进行节流处理连续触发的浏览器事件。例如对touchmove、scroll事件进行节流等。通过这种方式减少持续事件的触发频率，可以大大提升动画的流畅性。

4. 使用canvas绘制动画

canvas作为H5新增元素，是借助Web API来实现动画的。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="700" height="550"></canvas>
    <script type="text/javascript">
      let canvas = document.getElementById("canvas");
      let ctx = canvas.getContext("2d");
      let left = 0;
      let timer = setInterval(function () {
        ctx.clearRect(0, 0, 700, 550);
        ctx.beginPath();
        ctx.fillStyle = "#ccc";
        ctx.fillRect(left, 0, 100, 100);
        ctx.stroke();
        if (left > 700) {
          clearInterval(timer);
        }
        left += 1;
      }, 16);
    </script>
  </body>
</html>

注释：通过getContext()获取元素的绘制对象，通过clearRect不断清空画布并在新的位置上使用fillStyle绘制新矩形内容实现页面动画效果。

Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况，完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画。

5. SVG 动画

SVG是一种基于XML的图像格式，非常类似于HTML的工作方式。它为许多熟悉的几何形状定义了不同的元素，这些元素可以在标记中组合以产生二维图形。

同样高清的质地，矢量图不畏惧放大，体积小。

这里要说明一点就是，因为 SVG 中保存的是点、线、面的信息，与分辨率和图形大小无关，只是跟图像的复杂程度有关，所以图像文件所占的存储空间通常会比 png 小。

SVG动画的优势：

6. Jquery的animate()方法

代码演示：

<button id="btn1">使用动画放大高度</button>
<button id="btn2">重置高度</button>
<div
  id="box"
  style="background:#98bf21;height:100px;width:100px;margin:6px;"
></div>

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#box").animate({height:"300px"});
    });
    $("#btn2").click(function(){
        $("#box").animate({height:"100px"});
    });
});

效果图：

在这里插入图片描述

7. 使用gif图片

gif图想必大家都接触过，前端使用也非常简单。

总结：

原文转自：https://fe.ecool.fun/topic/8b516cb7-fa94-4d68-929f-d3c628d1b7a2