animation實(shí)現(xiàn)

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` });
    });

有個(gè)弊端，會(huì)掉幀。

為什么會(huì)卡頓？

有一個(gè)前提必須要提，前端開發(fā)者們都知道，瀏覽器是單線程運(yùn)行的。但是我們要明確以下幾個(gè)概念：單線程，主線程和合成線程。

雖然說瀏覽器執(zhí)行js是單線程執(zhí)行（注意，是執(zhí)行，并不是說瀏覽器只有1個(gè)線程，而是運(yùn)行時(shí)，runing），但實(shí)際上瀏覽器的2個(gè)重要的執(zhí)行線程，這 2 個(gè)線程協(xié)同工作來渲染一個(gè)網(wǎng)頁：主線程和合成線程。

一般情況下，主線程負(fù)責(zé)：運(yùn)行 JavaScript；計(jì)算 HTML 元素的 CSS 樣式；頁面的布局；將元素繪制到一個(gè)或多個(gè)位圖中；將這些位圖交給合成線程。

相應(yīng)地，合成線程負(fù)責(zé)：通過 GPU 將位圖繪制到屏幕上；通知主線程更新頁面中可見或即將變成可見的部分的位圖；計(jì)算出頁面中哪部分是可見的；計(jì)算出當(dāng)你在滾動(dòng)頁面時(shí)哪部分是即將變成可見的；當(dāng)你滾動(dòng)頁面時(shí)將相應(yīng)位置的元素移動(dòng)到可視區(qū)域。

那么為什么會(huì)造成動(dòng)畫卡頓呢？

原因就是主線程和合成線程的調(diào)度不合理。

下面來詳細(xì)說一下調(diào)度不合理的原因。

在使用height，width，margin，padding作為transition的值時(shí)，會(huì)造成瀏覽器主線程的工作量較重，例如從margin-left：-20px渲染到margin-left:0，主線程需要計(jì)算樣式margin-left:-19px,margin-left:-18px，一直到margin-left:0，而且每一次主線程計(jì)算樣式后，合成進(jìn)程都需要繪制到GPU然后再渲染到屏幕上，前后總共進(jìn)行20次主線程渲染，20次合成線程渲染，20+20次，總計(jì)40次計(jì)算。

瀏覽器的渲染引擎工作的幾個(gè)關(guān)鍵環(huán)節(jié)：
1.使用 HTML 創(chuàng)建文檔對(duì)象模型（DOM）
2.使用 CSS 創(chuàng)建 CSS 對(duì)象模型（CSSOM）
3.基于 DOM 和 CSSOM 執(zhí)行腳本（Scripts）
4.合并 DOM 和 CSSOM 形成渲染樹（Render Tree）
5.使用渲染樹布局（Layout）所有元素
6.渲染（Paint）所有元素**
也就是說，主線程每次都需要執(zhí)行Scripts，Render Tree ,Layout和Paint這四個(gè)階段的計(jì)算。

而如果使用transform的話，例如tranform:translate(-20px,0)到transform:translate(0,0)，主線程只需要進(jìn)行一次tranform:translate(-20px,0)到transform:translate(0,0)，然后合成線程去一次將-20px轉(zhuǎn)換到0px，這樣的話，總計(jì)1+20計(jì)算。

image.png

由此可見，通過定位來實(shí)現(xiàn)動(dòng)畫是很耗性能的。所以改成transform

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

效果確實(shí)比定位要好

canvas畫布實(shí)現(xiàn)

css部分

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

html部分

  <div class="main">
    <canvas id="canvas" width="500" height="500">您的瀏覽器不支持，請(qǐng)升級(jí)</canvas>
  </div>  

js部分

<script>
    var canvas=document.getElementById("canvas")
    if(canvas.getContext){
      var cvs=canvas.getContext('2d')
      cvs.font="20px"
      var textArr=[
        "17素材網(wǎng)不錯(cuò)我經(jīng)常去，嘿嘿！",
        "今晚有沒有LOL的一塊??？",
        "這種煙真心不好抽",
        "星期天我想去爬長城",
        "邊喝酒邊看電影",
        "如果有任何疑問可以掃碼聯(lián)系我哦！"
      ]
      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()方法：保存狀態(tài)
canvas的restore()方法：恢復(fù)之前保存的狀態(tài)，防止save之后的操作對(duì)canvas有影響