【前端动画】实现动画的6种方式 |
您所在的位置：网站首页 › css实现动画方式 › 【前端动画】实现动画的6种方式 |
|
通常在前端中，实现动画的方案主要有6种： javascript直接实现；SVG（可伸缩矢量图形）；CSS3 transition；CSS3 animation；Canvas动画；requestAnimationFrame； javascript 直接实现动画其主要思想是通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。 #rect { width: 200px; height: 200px; background: #ccc; } let elem = document.getElementById('rect'); let left = 0; let timer = setInterval(function(){ if(left clearInterval(timer); } },16);Jquery的animate()方法就是这种方式实现的 存在的问题javascript 实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。 Tip：为什么是16ms上面例子中，我们设置的setInterval时间间隔是16ms。一般认为人眼能辨识的流畅动画为每秒60帧，这里16ms比(1000ms/60)帧略小一些，但是一般可仍为该动画是流畅的。 在很多移动端动画性能优化时，一般使用16ms来进行节流处理连续触发的浏览器事件。例如对touchmove、scroll事件进行节流等。通过这种方式减少持续事件的触发频率，可以大大提升动画的流畅性。 SVGSVG动画由SVG元素内部的元素属性控制，一般通过以下几个元素控制： 用于控制动画延时对属性的连续改变进行控制颜色变化，单用就能控制控制如缩放、旋转等几何变化控制SVG内元素的移动路径 示例： Document *{ margin:0; padding:0; } 比较SVG的一大优势是含有较为丰富的动画功能，原生绘制各种图形、滤镜和动画，并且能被js调用。html是对dom的渲染，那么svg就是对图形的渲染。 但是，另一方面元素较多且复杂的动画使用svg渲染会比较慢，而且SVG格式的动画绘制方式必须让内容嵌入到HTML中使用。CSS3的出现让svg的应用变得相对少了。 CSS3 transitiontransition是过度动画。但是transition并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡，而不是马上改变。 注意 在移动端开发中，直接使用transition动画会让页面变慢甚至卡顿。所以我们通常添加transform:translate3D(0,0,0)或transform:translateZ(0)来开启移动端动画的GPU加速，让动画过程更加流畅。 CSS3 animationanimation 算是真正意义上的CSS3动画。通过对关键帧和循环次数的控制，页面标签元素会根据设定好的样式改变进行平滑过渡。而且关键帧状态的控制是通过百分比来控制的。 比较 CSS3最大的优势是摆脱了js的控制，并且能利用硬件加速以及实现复杂动画效果。 Canvas动画canvas作为H5新增元素，是借助Web API来实现动画的。 Document *{ margin:0; padding:0; } 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);注释：通过getContext()获取元素的绘制对象，通过clearRect不断清空画布并在新的位置上使用fillStyle绘制新矩形内容实现页面动画效果。 比较Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况，完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画。 requestAnimationFramerequestAnimationFrame是另一种Web API，原理与setTimeout和setInterval类似，都是通过javascript持续循环的方法调用来触发动画动作。但是requestAnimationFrame是浏览器针对动画专门优化形成的APi，在性能上比另两者要好。 通常，我们将执行动画的每一步传到requestAnimationFrame中，在每次执行完后进行异步回调来连续触发动画效果。 示例 * { margin:0; padding:0; } div { width: 200px; height: 200px; background-color: #ccc; } window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; let elem = document.getElementById("rect"); let left = 0; //自动执行持续性回调 requestAnimationFrame(step); //持续该改变元素位置 function step() { if(left |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |