一般在前端中,实现动画的方案主要有6种:javascript
其主要思想是经过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。css
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>
Jquery的animate()方法就是这种方式实现的。html
javascript 实现动画一般会致使页面频繁性重排重绘,消耗性能,通常应该在桌面端浏览器。在移动端上使用会有明显的卡顿。前端
上面例子中,咱们设置的setInterval时间间隔是16ms。通常认为人眼能辨识的流畅动画为每秒60帧,这里16ms比(1000ms/60)帧略小一些,可是通常可仍为该动画是流畅的。
在不少移动端动画性能优化时,通常使用16ms来进行节流处理连续触发的浏览器事件。例如对touchmove、scroll事件进行节流等。经过这种方式减小持续事件的触发频率,能够大大提高动画的流畅性。java
SVG动画由SVG元素内部的元素属性控制,通常经过一下几个元素控制:css3
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 <svg id="box" width="800" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1"> 15 <rect x="" y="" width="100" height="100" fill="rgb(255,0,0);" stroke="" stroke-width=""> 16 <set attributeName="x" attributeType="XML" to="100" begin="4s"/> 17 <animate attributeName="x" attributeType="XML" begin="0s" dur="4s" from="0" to="300"/> 18 <animate attributeName="y" attributeType="XML" begin="0s" dur="4s" from="0" to="0"/> 19 <animateTransform attributeName="transform" begin="0s" dur="4s" type="scale" from="1" to="2" repeatCount="1" /> 20 <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="4s" repeatCount="1" /> 21 22 </rect> 23 </svg> 24 25 </body> 26 </html>
这里推荐一个在sublime text3中使用svg提示插件:svg snippet。web
SVG的一大优点是含有较为丰富的动画功能,原生绘制各类图形、滤镜和动画,而且能被js调用。html是对dom的渲染,那么svg就是对图形的渲染。
可是,另外一方面元素较多且复杂的动画使用svg渲染会比较慢,并且SVG格式的动画绘制方式必须让内容嵌入到HTML中使用。CSS3的出现让svg的应用变得相对少了。canvas
transition是过分动画。可是transition并不能实现独立的动画,只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡,而不是立刻改变。浏览器
在移动端开发中,直接使用transition动画会让页面变慢甚至卡顿。因此咱们一般添加transform:translate3D(0,0,0)或transform:translateZ(0)来开启移动端动画的GPU加速,让动画过程更加流畅。性能优化
animation 算是真正意义上的CSS3动画。经过对关键帧和循环次数的控制,页面标签元素会根据设定好的样式改变进行平滑过渡。并且关键帧状态的控制是经过百分比来控制的。
CSS3最大的优点是摆脱了js的控制,而且能利用硬件加速以及实现复杂动画效果。
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来渲染控制动画的执行。可用于实现较复杂动画。
requestAnimationFrame是另外一种Web API,原理与setTimeout和setInterval相似,都是经过javascript持续循环的方法调用来触发动画动做。可是requestAnimationFrame是浏览器针对动画专门优化造成的APi,在性能上比另二者要好。
一般,咱们将执行动画的每一步传到requestAnimationFrame中,在每次执行完后进行异步回调来连续触发动画效果。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 * { 7 margin:0; 8 padding:0; 9 } 10 div { 11 width: 200px; 12 height: 200px; 13 background-color: #ccc; 14 } 15 </style> 16 </head> 17 <body> 18 <div id="rect"></div> 19 <script type="text/javascript"> 20 window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || 21 window.msRequestAnimationFrame; 22 23 let elem = document.getElementById("rect"); 24 let left = 0; 25 //自动执行持续性回调 26 requestAnimationFrame(step); 27 //持续该改变元素位置 28 function step() { 29 if(left<window.innerWidth-200){ 30 left+=1; 31 elem.style.marginLeft = left+"px"; 32 requestAnimationFrame(step); 33 } 34 } 35 </script> 36 </body> 37 </html>
咱们注意到,requestAnimationFrame只是将回调的方法传入到自身的参数中执行,而不是经过setInterval调用。
复杂的动画是经过一个个简单的动画组合实现的。基于兼容性问题,一般在项目中,通常在