<!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>
存在的问题
javascript 实现动画通常会导致页面频繁性重排重绘,消耗性能,一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。Tip:为什么是16ms 上面例子中,我们设置的setInterval时间间隔是16ms。一般认为人眼能辨识的流畅动画为每秒60帧,这里16ms比(1000ms/60)帧略小一些,但是一般可仍为该动画是流畅的。在很多移动端动画性能优化时,一般使用16ms来进行节流处理连续触发的浏览器事件。例如对touchmove、scroll事件进行节流等。通过这种方式减少持续事件的触发频率,可以大大提升动画的流畅性。
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>
```
SVG的一大优势是含有较为丰富的动画功能,原生绘制各种图形、滤镜和动画,并且能被js调用。html是对dom的渲染,那么svg就是对图形的渲染。 但是,另一方面元素较多且复杂的动画使用svg渲染会比较慢,而且SVG格式的动画绘制方式必须让内容嵌入到HTML中使用。CSS3的出现让svg的应用变得相对少了。
.ani { transition: width 1s .4s linear; }.ani:hover { width: 200px; }
注意
在移动端开发中,直接使用transition动画会让页面变慢甚至卡顿。所以我们通常添加transform:translate3D(0,0,0)或transform:translateZ(0)来开启移动端动画的GPU加速,让动画过程更加流畅。.icon{ -webkit-animation:move 1s cubic-bezier(.62,-0.91,.45,1.97); animation:move 1s cubic-bezier(.62,-0.91,.45,1.97); } @-webkit-keyframes move { from { opacity:0; -webkit-transform:translateY(100%); } to { opacity:1; -webkit-transform:translateY(0%); } } @keyframes move { from { opacity:0; transform:translateY(100%); } to { opacity:1; transform:translateY(0%); } }
比较
CSS3最大的优势是摆脱了js的控制,并且能利用硬件加速以及实现复杂动画效果。
复杂动画间补,推荐使用 贝塞尔函数 (http://cubic-bezier.com/#.23,1.61,.54,.28)<!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>
比较
Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况,完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画。
注释
通过getContext()获取元素的绘制对象,通过clearRect不断清空画布并在新的位置上使用fillStyle绘制新矩形内容实现页面动画效果。<!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调用。