前端实现动画的6种方式详解 |
您所在的位置:网站首页 › js设置动画效果在哪里 › 前端实现动画的6种方式详解 |
前端实现动画的6种方式详解
一、总结
一句话总结:一般是css样式改变加setInterval
二、【前端动画】实现动画的6种方式 通常在前端中,实现动画的方案主要有6种: javascript直接实现; SVG(可伸缩矢量图形); CSS3 transition; CSS3 animation; Canvas动画; requestAnimationFrame;三、javascript 直接实现动画(setInterval+css改变,setInterval+transform) transform也可以改变样式 其主要思想是通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。 示例 #rect { width: 200px; height: 200px; background: #ccc; } let elem = document.getElementById('rect'); let left = 0; let timer = setInterval(function(){ if(left700){ clearInterval(timer); } left += 1; },16);注释:通过getContext()获取元素的绘制对象,通过clearRect不断清空画布并在新的位置上使用fillStyle绘制新矩形内容实现页面动画效果。 比较Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况,完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画。
七、SVG(svg标签+animate标签) SVG动画由SVG元素内部的元素属性控制,一般通过一下几个元素控制: : 用于控制动画延时 :对属性的连续改变进行控制 :颜色变化,但用就能控制 :控制如缩放、旋转等几何变化 :控制SVG内元素的移动路径 示例 Document *{ margin:0; padding:0; }这里推荐一个在sublime text3中使用svg提示插件:svg snippet。 比较SVG的一大优势是含有较为丰富的动画功能,原生绘制各种图形、滤镜和动画,并且能被js调用。html是对dom的渲染,那么svg就是对图形的渲染。 但是,另一方面元素较多且复杂的动画使用svg渲染会比较慢,而且SVG格式的动画绘制方式必须让内容嵌入到HTML中使用。CSS3的出现让svg的应用变得相对少了。
八、requestAnimationFrame(类似setInterval) requestAnimationFrame是另一种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 |