您的位置: 首页  >  IT文章  >  【前端动画】实现动画的6种方式 javascript 直接实现动画 SVG CSS3 transition CSS3 animation Canvas动画 requestAnimationFrame 总结

【前端动画】实现动画的6种方式 javascript 直接实现动画 SVG CSS3 transition CSS3 animation Canvas动画 requestAnimationFrame 总结

分类: IT文章 • 2022-03-30 00:34:24

【前端动画】实现动画的6种方式 javascript 直接实现动画 SVG CSS3 transition CSS3 animation Canvas动画 requestAnimationFrame 总结

通常在前端中，实现动画的方案主要有6种：

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

其主要思想是通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的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()方法就是这种方式实现的。

存在的问题

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

Tip：为什么是16ms

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

SVG

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

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

示例

 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。

比较

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

CSS3 transition

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

注意

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

CSS3 animation

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

比较

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

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来渲染控制动画的执行。可用于实现较复杂动画。

requestAnimationFrame

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调用。

总结

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

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

相关推荐