前端实现动画的6种方式详解

时间 2019-11-10

标签前端实现动画方式详解繁體版

原文原文链接

前端实现动画的6种方式详解

1、总结

一句话总结：通常是css样式改变加setInterval

2、【前端动画】实现动画的6种方式

一般在前端中，实现动画的方案主要有6种：javascript

javascript直接实现；
SVG（可伸缩矢量图形）；
CSS3 transition；
CSS3 animation；
Canvas动画；
requestAnimationFrame；

3、javascript 直接实现动画（setInterval+css改变，setInterval+transform）

transform也能够改变样式css

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

示例

<!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>

Jquery的animate()方法就是这种方式实现的。前端

存在的问题

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

Tip：为何是16ms

上面例子中，咱们设置的setInterval时间间隔是16ms。通常认为人眼能辨识的流畅动画为每秒60帧，这里16ms比(1000ms/60)帧略小一些，可是通常可仍为该动画是流畅的。
在不少移动端动画性能优化时，通常使用16ms来进行节流处理连续触发的浏览器事件。例如对touchmove、scroll事件进行节流等。经过这种方式减小持续事件的触发频率，能够大大提高动画的流畅性。css3

4、CSS3 transition（transform+transition）（纯css）

transition是过分动画。可是transition并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡，而不是立刻改变。web

注意

在移动端开发中，直接使用transition动画会让页面变慢甚至卡顿。因此咱们一般添加transform:translate3D(0,0,0)或transform:translateZ(0)来开启移动端动画的GPU加速，让动画过程更加流畅。canvas

一、设置transition设置过渡，添加transform设置形状，造成动画效果，以下：浏览器

.divadd {
	 transition: All 0.4s ease-in-out;
         -webkit-transition: All 0.4s ease-in-out;
         -moz-transition: All 0.4s ease-in-out;
         -o-transition: All 0.4s ease-in-out;

	 transform:rotate(360deg);
	-ms-transform:rotate(360deg); /* IE 9 */
	-webkit-transform:rotate(360deg); /* Safari and Chrome */
}

　　此种方式比较小众，不易控制性能优化

5、CSS3 animation（animation属性+@keyframes）（纯css）

animation 算是真正意义上的CSS3动画。经过对关键帧和循环次数的控制，页面标签元素会根据设定好的样式改变进行平滑过渡。并且关键帧状态的控制是经过百分比来控制的。

比较

CSS3最大的优点是摆脱了js的控制，而且能利用硬件加速以及实现复杂动画效果。

二、添加animation属性，设置动画效果，以下：

.a1 {
	position: absolute;
	animation: a1 3s;
	opacity: 0
}
@keyframes a1 {
	0% {left: 10px;opacity: 0}
	30% {left: 60px;background-color: pink;font-size:23px;opacity: 1}
	90% {left: 100px;background-color: red;opacity: 1}
	100% {left: 10px;opacity: 0}
}

以上百分比后的方括号内能够添加各类属性值，好比transform ratote、left。。。。。。添加left top等定位不要忘记设置position absolute。

全部属性有：

    animation-name: myfirst;  //动画名称，用于animation引用
    animation-duration: 5s;  //动画时长，
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;

animation-fill-mode
设置动画结束后的状态
none：默认值。不设置对象动画以外的状态，DOM未进行动画前状态
forwards：设置对象状态为动画结束时的状态，100%或to时，当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧
backwards：设置对象状态为动画开始时的状态,（测试显示DOM未进行动画前状态）
both：设置对象状态为动画结束或开始的状态，结束时状态优先

6、Canvas动画（`setInterval`+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来渲染控制动画的执行。可用于实现较复杂动画。

7、SVG（svg标签+animate标签）

SVG动画由SVG元素内部的元素属性控制，通常经过一下几个元素控制：

: 用于控制动画延时
：对属性的连续改变进行控制
：颜色变化，但用就能控制
：控制如缩放、旋转等几何变化
：控制SVG内元素的移动路径

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> *{ margin:0; padding:0; } </style>
</head>
<body>
    <svg id="box" width="800" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="" y="" width="100" height="100" fill="rgb(255,0,0);" stroke="" stroke-width="">
            <set attributeName="x" attributeType="XML" to="100" begin="4s"/>
            <animate attributeName="x" attributeType="XML" begin="0s" dur="4s" from="0" to="300"/>
            <animate attributeName="y" attributeType="XML" begin="0s" dur="4s" from="0" to="0"/>
            <animateTransform attributeName="transform" begin="0s" dur="4s" type="scale" from="1" to="2" repeatCount="1" />
            <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="4s" repeatCount="1" />

        </rect>     
    </svg>  

</body>
</html>

这里推荐一个在sublime text3中使用svg提示插件：svg snippet。

比较

SVG的一大优点是含有较为丰富的动画功能，原生绘制各类图形、滤镜和动画，而且能被js调用。html是对dom的渲染，那么svg就是对图形的渲染。
可是，另外一方面元素较多且复杂的动画使用svg渲染会比较慢，并且SVG格式的动画绘制方式必须让内容嵌入到HTML中使用。CSS3的出现让svg的应用变得相对少了。

8、requestAnimationFrame（相似setInterval）

requestAnimationFrame是另外一种Web API，原理与setTimeout和setInterval相似，都是经过javascript持续循环的方法调用来触发动画动做。可是requestAnimationFrame是浏览器针对动画专门优化造成的APi，在性能上比另二者要好。

一般，咱们将执行动画的每一步传到requestAnimationFrame中，在每次执行完后进行异步回调来连续触发动画效果。

示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css"> * { margin:0; padding:0; } div { width: 200px; height: 200px; background-color: #ccc; } </style>
</head>
<body>
    <div id="rect"></div>
    <script type="text/javascript"> window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; let elem = document.getElementById("rect"); let left = 0; //自动执行持续性回调 requestAnimationFrame(step); //持续该改变元素位置 function step() { if(left<window.innerWidth-200){ left+=1; elem.style.marginLeft = left+"px"; requestAnimationFrame(step); } } </script>
</body>
</html>

咱们注意到，requestAnimationFrame只是将回调的方法传入到自身的参数中执行，而不是经过setInterval调用。

9、总结

复杂的动画是经过一个个简单的动画组合实现的。基于兼容性问题，一般在项目中，通常在

桌面端浏览器推荐使用javascript直接实现动画或SVG方式；
移动端能够考虑使用CSS3 transition、CSS3 animation、Canvas或requestAnimationFrame方式**。

前端实现动画的6种方式详解

前端实现动画的6种方式详解

1、总结

一句话总结：通常是css样式改变加setInterval

2、【前端动画】实现动画的6种方式

3、javascript 直接实现动画（setInterval+css改变，setInterval+transform）

示例

存在的问题

Tip：为何是16ms

4、CSS3 transition（transform+transition）（纯css）

注意

5、CSS3 animation（animation属性+@keyframes）（纯css）

比较

6、Canvas动画（setInterval+canvas）

示例

比较

7、SVG（svg标签+animate标签）

示例

比较

8、requestAnimationFrame（相似setInterval）

示例

9、总结

6、Canvas动画（`setInterval`+canvas）