每天一点前端动画(2020-05-12)

开言

我喜欢动画，喜欢看动画片。虽然工作中较少能接触到动画的工作，但是每次看到牛人的动画效果都很心动。人生在世，岁月蹉跎，多做一些自己喜欢的事情吧。希望能在这边每天学一点前端动画的相关知识。每个工作日都要写一篇，学一点。内容可能某天多一些，某天少一些，自己随心记录了。我的初衷是无关内容多少，无关内容品质有多高，只要尝试坚持就可以了。事不宜迟，从今天开始吧。

正式内容

目前在前端，实现动画有以下几种方案：
（1）javascript
（2）SVG
（3）canvas
（4）CSS3
（5）WebGL
1、js动画
使用setInterval、setTimeout、requestAnimationFrame来实现动画效果
对于setInterval，一般设置间隔是16ms，一般认为人眼能辨识的流畅动画为每秒16帧，这里16ms比(1000ms/16)帧略小一些，但是仍可认为是流畅的。
位置相关：
window.innerHeight:返回窗口的文档显示区的高度。
widow.innerWidth:返回窗口的文档显示区的宽度。
requestAnimationFrame是一个新的API,作用与setTimeInterval一样，不同的是它会根据浏览器的刷新频率自动调整动画的时间间隔
requestAnimationFrame例子：

<div id="rect"></div>
    <script>
       let elm = document.getElementById('rect');
       let left = 0
       requestAnimationFrame(step)
       function step(){
           if(left<window.innerWidth-200){
               left +=1
               elm.style.marginLeft = left + 'px'
               requestAnimationFrame(step)
           }
       }
    </script>

2、svg
SVG的一大优势是含有较为丰富的动画功能，原生绘制各种图形、滤镜和动画，并且能被js调用。html是对dom的渲染，那么svg就是对图形的渲染。 
但是，另一方面元素较多且复杂的动画使用svg渲染会比较慢，而且SVG格式的动画绘制方式必须让内容嵌入到HTML中使用。
3、css3
在移动端开发中，直接使用transition动画会让页面变慢甚至卡顿。所以通常添加transform:translate3D(0,0,0)或transform:translateZ(0)来开启移动端动画的GPU加速，让动画过程更加流畅。
CSS3最大的优势是摆脱了js的控制，并且能利用硬件加速以及实现复杂动画效果。

代码示例

1、倒计时圆圈

var canvas = document.getElementById('canvas'),  //获取canvas元素
    context = canvas.getContext('2d'),           //获取画图环境，指明为2d
    centerX = canvas.width/2,                    //Canvas中心点x轴坐标
    centerY = canvas.height/2,                   //Canvas中心点y轴坐标
    rad = Math.PI*2/100,                         //将360度分成100份，那么每一份就是rad度
    speed = 0.1;                                  //加载的快慢就靠它了
             
    //绘制蓝色外圈
    function blueCircle(n){
        context.save();
        context.beginPath();
        context.strokeStyle = "#49f";
        context.lineWidth = 12;
        context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 + n*rad, false);
        context.stroke();
        context.restore();
    }
         
    //绘制白色外圈
    function whiteCircle(){
        context.save();
        context.beginPath();
        context.strokeStyle = "#A5DEF1";
        context.lineWidth = 12;
        context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
        context.stroke();
        context.closePath();
        context.restore();
    }
         
    //百分比文字绘制
    function text(n){
        context.save();
        context.fillStyle = "#F47C7C";
        context.font = "40px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillText(n.toFixed(0)+"%", centerX, centerY);
        context.restore();
   }
         
    //动画循环
    (function drawFrame(){
         window.requestAnimationFrame(drawFrame, canvas);
         context.clearRect(0, 0, canvas.width, canvas.height);
             
         whiteCircle();
         text(speed);
         blueCircle(speed);
                
         if(speed > 100) speed = 0;
         speed += 0.1;
    }());
 </script>
</body>
</html>

2、黑客文字

var canvas = document.querySelector('canvas'),
    context = canvas.getContext('2d'),
    w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight;
           
     //初始化
    var clearColor = 'rgba(0, 0, 0, .1)',             //用于绘制渐变阴影
        wordColor = "#33ff33",                         //文字颜色
        words = "0123456789qwertyuiopasdfghjklzxcvbnm,./;'\[]QWERTYUIOP{}ASDFGHJHJKL:ZXCVBBNM<>?",
        wordsArr = words.split(''),                 //将文字拆分进一个数组
        font_size = 16,  //字体大小
        clumns = w / font_size,                     //文字降落的列数
        drops = [];

     for(var i=0; i<clumns; i++){
         drops[i] = 1;
     }

   function draw(){
       context.save();
       context.fillStyle = wordColor;
       context.font = font_size + "px arial";
       //核心
       for (var i = 0; i < drops.length; i++){
            var text = wordsArr[Math.floor(Math.random() * wordsArr.length)];
                context.fillText(text, i * font_size, drops[i] * font_size);
                if (drops[i] * font_size > h && Math.random() > 0.98){
                        drops[i] = 0;
                }
                    drops[i]++;
        }
       context.restore();
  }
           
    //动画循环
  (function drawFrame(){
        window.requestAnimationFrame(drawFrame, canvas);
        context.fillStyle = clearColor;
        context.fillRect(0, 0, w, h);  //注意这
        draw();
   }())