前端实现动画有哪些方式？- 题目详情

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

css3的transition 属性
css3的animation 属性
原生JS动画
使用canvas绘制动画
SVG动画
Jquery的animate函数
使用gif图片

1. css3的`transition`

transition属性：

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

语法：

1transition: 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	定义过渡效果何时开始。

演示代码：

1<div></div>
2

1div{
2  width:50px;
3  height: 50px;
4  background-color: pink;
5}
6
7div:hover{
8  width:200px;
9}

效果图：

预览

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

添加transition: 1s;后

1div{
2  width:50px;
3  height: 50px;
4  background-color: pink;
5  transition: 1s;
6}
7div:hover{
8  width:200px;
9}

效果图：

预览

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属性的区别：

transition只需指定动画的开始和结束状态，整个动画的过程是由特定的函数控制,你不用管它。
animation可以对动画过程中的各个关键帧进行设置

演示代码：

1<div></div>
2

1div{
2	width:50px;
3	height:50px;
4	background-color: pink;
5}
6div:hover{
7	animation: change1 5s;
8}
9@keyframes change1{
10	25%  {width:130px;background-color: red;}
11	50%  {width:170px;background-color: blue;}
12	75%  {width:210px;background-color: green;}
13	100% {width:250px;background-color: yellow;}
14}
15

效果图：

预览

3. 原生`JS`动画

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

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

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <style type="text/css">
6        #rect {
7            width: 200px;
8            height: 200px;
9            background: #ccc;
10        }
11    </style>
12</head>
13<body>
14    <div id="rect"></div>
15    <script>
16        let elem = document.getElementById('rect');
17        let left = 0;
18        let timer = setInterval(function(){
19            if(left<window.innerWidth-200){
20                elem.style.marginLeft = left+'px';
21                left ++;
22            }else {
23                clearInterval(timer);
24            }
25        },16);
26    </script>
27</body>
28</html>
29

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

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

4. 使用`canvas`绘制动画

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

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Document</title>
6    <style>
7    *{
8        margin:0;
9        padding:0;
10    }
11    </style>
12</head>
13<body>
14    <canvas id="canvas" width="700" height="550"></canvas>
15    <script type="text/javascript">
16        let canvas = document.getElementById("canvas");
17        let ctx = canvas.getContext("2d");
18        let left = 0;
19        let timer = setInterval(function(){
20            ctx.clearRect(0,0,700,550);
21            ctx.beginPath();
22            ctx.fillStyle = "#ccc";
23            ctx.fillRect(left,0,100,100);
24            ctx.stroke();
25            if(left>700){
26                clearInterval(timer);
27            }
28            left += 1;
29        },16);
30    </script>
31</body>
32</html>

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

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

5. SVG 动画

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

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

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

SVG动画的优势：

优化 SEO 和无障碍的利器，因为 SVG 图像是使用XML(可扩展标记语言【英语：Extensible Markup Language，简称：XML】标记指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种信息的文章等)来标记构建的，浏览器通过绘制每个点和线来打印它们，而不是用预定义的像素填充某些空间。这确保 SVG 图像可以适应不同的屏幕大小和分辨率。
由于是在 XML 中定义的，SVG 图像比 JPG 或 PNG 图像更灵活，而且我们可以使用 CSS 和 JavaScript 与它们进行交互。SVG 图像设置可以包含 CSS 和 JavaScript。在 react、vue 这种数据驱动视图的框架下，对于 SVG 操作就更加如鱼得水了。（下文会跟大家分享一些小的 SVG 动画在我们项目中的实践）
在运用层面上，SVG 提供了一些图像编辑效果，比如屏蔽和剪裁、应用过滤器等等。并且 SVG 只是文本，因此可以使用 GZip 对其进行有效压缩。

6. Jquery的`animate()`方法

animate() 方法执行 CSS 属性集的自定义动画。
该方法通过 CSS 样式将元素从一个状态改变为另一个状态。
CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

代码演示：

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

1$(document).ready(function(){
2    $("#btn1").click(function(){
3        $("#box").animate({height:"300px"});
4    });
5    $("#btn2").click(function(){
6        $("#box").animate({height:"100px"});
7    });
8});
9

效果图：

预览

7. 使用`gif`图片

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

总结：

代码复杂度方面简单动画：css代码实现会简单一些，js复杂一些。复杂动画的话：css代码就会变得冗长，js实现起来更优。
动画运行时，对动画的控制程度上 js 比较灵活，能控制动画暂停，取消，终止等css动画不能添加事件，只能设置固定节点进行什么样的过渡动画。
兼容方面 css 有浏览器兼容问题js大多情况下是没有的。
性能方面 css动画相对于优一些，css 动画通过GUI解析js动画需要经过js引擎代码解析，然后再进行 GUI 解析渲染。

问答题【162/402】前端实现动画有哪些方式？

1. css3的`transition`

2. css3的`animation`

3. 原生`JS`动画

4. 使用`canvas`绘制动画

5. SVG 动画

6. Jquery的`animate()`方法

7. 使用`gif`图片

总结：

赞赏支持

问答题【162/402】前端实现动画有哪些方式？

1. css3的transition

2. css3的animation

3. 原生JS动画

4. 使用canvas绘制动画

5. SVG 动画

6. Jquery的animate()方法

7. 使用gif图片

总结：

赞赏支持

1. css3的`transition`

2. css3的`animation`

3. 原生`JS`动画

4. 使用`canvas`绘制动画

6. Jquery的`animate()`方法

7. 使用`gif`图片