animation实现

var winwidth = $(window).width();
    $(".barrage p").each(function (index, value) {
        var width = $(value).width()
        $(value).css({ 'right': -width})
        var keyframes = `
                    @keyframes ani${index} {
                        0%{
                              right:${-width}px
                        }
                        100%{
                              right:${winwidth}px
                        }
                    }
                `
        $("<style>").attr("type", "text/css").html(keyframes).appendTo($("head"));
        var aniList = [5, 7, 9, 8];
        var aniTime = Math.floor(Math.random() * 4);
        $(value).css({  "top": `${index * 0.6}rem`;"animation": `ani${index} ${aniList[aniTime]}s linear ${index * 1.5+1}s infinite`, "-webkit-animation": `ani${index} ${aniList[aniTime]}s linear ${index * 1.5+1}s infinite` });
    });

有个弊端，会掉帧。

为什么会卡顿？

有一个前提必须要提，前端开发者们都知道，浏览器是单线程运行的。但是我们要明确以下几个概念：单线程，主线程和合成线程。

虽然说浏览器执行js是单线程执行（注意，是执行，并不是说浏览器只有1个线程，而是运行时，runing），但实际上浏览器的2个重要的执行线程，这 2 个线程协同工作来渲染一个网页：主线程和合成线程。

一般情况下，主线程负责：运行 JavaScript；计算 HTML 元素的 CSS 样式；页面的布局；将元素绘制到一个或多个位图中；将这些位图交给合成线程。

相应地，合成线程负责：通过 GPU 将位图绘制到屏幕上；通知主线程更新页面中可见或即将变成可见的部分的位图；计算出页面中哪部分是可见的；计算出当你在滚动页面时哪部分是即将变成可见的；当你滚动页面时将相应位置的元素移动到可视区域。

那么为什么会造成动画卡顿呢？

原因就是主线程和合成线程的调度不合理。

下面来详细说一下调度不合理的原因。

在使用height，width，margin，padding作为transition的值时，会造成浏览器主线程的工作量较重，例如从margin-left：-20px渲染到margin-left:0，主线程需要计算样式margin-left:-19px,margin-left:-18px，一直到margin-left:0，而且每一次主线程计算样式后，合成进程都需要绘制到GPU然后再渲染到屏幕上，前后总共进行20次主线程渲染，20次合成线程渲染，20+20次，总计40次计算。

浏览器的渲染引擎工作的几个关键环节：
1.使用 HTML 创建文档对象模型（DOM）
2.使用 CSS 创建 CSS 对象模型（CSSOM）
3.基于 DOM 和 CSSOM 执行脚本（Scripts）
4.合并 DOM 和 CSSOM 形成渲染树（Render Tree）
5.使用渲染树布局（Layout）所有元素
6.渲染（Paint）所有元素**
也就是说，主线程每次都需要执行Scripts，Render Tree ,Layout和Paint这四个阶段的计算。

而如果使用transform的话，例如tranform:translate(-20px,0)到transform:translate(0,0)，主线程只需要进行一次tranform:translate(-20px,0)到transform:translate(0,0)，然后合成线程去一次将-20px转换到0px，这样的话，总计1+20计算。

image.png

由此可见，通过定位来实现动画是很耗性能的。所以改成transform

  @keyframes ani${index} {
                        0%{
                              transform:translateX(0);
                        }
                        100%{
                              transform:translateX(-300%)
                        }

效果确实比定位要好

canvas画布实现

css部分

  <style>
    .main{
      position: absolute;
      left: 40%;
      top: 40%;
    }
    #canvas{
      background: #000;
    }
  </style>

html部分

  <div class="main">
    <canvas id="canvas" width="500" height="500">您的浏览器不支持，请升级</canvas>
  </div>  

js部分

<script>
    var canvas=document.getElementById("canvas")
    if(canvas.getContext){
      var cvs=canvas.getContext('2d')
      cvs.font="20px"
      var textArr=[
        "17素材网不错我经常去，嘿嘿！",
        "今晚有没有LOL的一块啊？",
        "这种烟真心不好抽",
        "星期天我想去爬长城",
        "边喝酒边看电影",
        "如果有任何疑问可以扫码联系我哦！"
      ]
      var colorArr=["yellow","pink","orange","red","green"];
      var numArrL=[80,100,5,300,500,430];//初始的X
      var numArrT=[80,100,20,300,380,210];//初始的Y
      setInterval(function(){
        cvs.clearRect(0,0,500,500)
        cvs.save()
        for(var i=0;i<textArr.length;i++){
          numArrL[i]-=(i+1)*0.6;
          cvs.fillStyle=colorArr[i]
          cvs.fillText(textArr[i],numArrL[i],numArrT[i])
        }
        for(var j=0;j<textArr.length;j++){
          if(numArrL[j]<=-500){
            numArrL[j]=400;
          }
        }
        cvs.restore()
      },30)
    }else{
      console.log(111)
    }
  </script>

canvas 的save()方法：保存状态
canvas的restore()方法：恢复之前保存的状态，防止save之后的操作对canvas有影响