原生JS實現雪花特效

時間 2019-12-16

標籤原生實現雪花特效欄目 JavaScript 简体版

原文原文鏈接

今天在校園招聘上被問到的問題，用JS寫出雪花的效果。我打算使用多種方法來試試如何實現雪花。

這是目前按照網上某種思路模仿的第一種雪花，不太好看，可是大體意思清楚。javascript

思路1：該思路直接由JS實現。css

雪花對象的定時建立 + 雪花對象的下落方法（包含消失斷定）
雪花建立的位置和雪花形狀的創建 + 雪花的速度和雪花可能的左右移動和消失

缺點：html

很差看
兼容性
雪花方法很差，須要實時檢索元素，應該改用數組維持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,div{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100%;
            height: 100%;
            background-color: #000;
            overflow: hidden;
        }
        #divCanvas{
            width: 800px;
            height: 800px;
            background: #212123;
        }
    </style>
</head>
<body>
<div id="divCanvas"></div>
</body>
<script type="text/javascript">
    var canvas = document.getElementById("divCanvas");
    var maxWidth = canvas.clientWidth;
    var maxHeight = canvas.clientHeight;

    function Obj() {};
    Obj.prototype.action = function(o) {
        o.style.left = Math.ceil(Math.random() * maxWidth) + "px";
        o.style.top = 0 + "px";
        var speed = 0;
        setInterval(function() {
            if (parseInt(o.style.top) < maxHeight) {
                o.style.top = parseInt(o.style.top) + speed + "px";
                speed += 5;
            } else {
                o.style.display = "none";
            }

        }, 400);
    }

    setInterval(function() {
        var oDiv = document.createElement("div");
        oDiv.style.color = "#fff";
        oDiv.innerHTML = "*";
        oDiv.style.position = "absolute";
        canvas.appendChild(oDiv);
        var obj = new Obj();
        obj.action(oDiv);
    }, 300);


</script>
</html>

思路2：該思路由JS和CSS3共同實現。java

雪花對象的建立 + 雪花的方法
用CSS3完善雪花的漸隱和出現動畫 + 雪花固定的top值增長

缺點:canvas

依舊沒有用數組來維持，比較佔內存
不夠好看
兼容性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,div{
            margin: 0;
            padding: 0;
        }
        body{
            background: #000;
        }
        .snow{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #fff;
            animation: mysnow 20s;
            position: absolute;
        }
        @keyframes mysnow{
            0%{opacity: 0;}
            50%{opacity: 1}
            100%{opacity: 0;}
        }
        #canvas{
            width: 800px;
            height: 800px;
            background: #213123;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var canvas=document.getElementById("canvas");
            var maxWidth=canvas.clientWidth;
            var maxHeight=canvas.clientHeight;

            function Snow(){};
            Snow.prototype.Move=function(x){
                var speed=Math.ceil(Math.random()*1);
                x.style.top=Math.floor(Math.random()*maxWidth);
                x.style.left=Math.floor(Math.random()*maxHeight);
                setInterval(function(){
                    if(parseInt(x.style.top)<maxHeight){
                        x.style.top=parseInt(x.style.top)+speed+"px";
                    }else{
                        x.style.display="none";
                    }
                },30);

            }
            setInterval(function(){
                var oDiv=document.createElement("div");
                oDiv.className="snow";
                oDiv.style.top=0+"px";
                oDiv.style.left=Math.ceil(Math.random()*maxHeight)+"px";
                canvas.appendChild(oDiv);
                var snow=new Snow();
                snow.Move(oDiv);
            },200);
        };
    </script>
</head>
<body>
<div id="canvas"></div>
</body>
</html>

思路3：使用數組維持雪花對象，在一開始的時候便隨機建立好每一個雪花的動態屬性數組

原型模式建立的雪花對象 + 雪花方法app

優勢：數組維持dom

缺點：動畫

沒有用上 window.requestAnimationFrame方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>mySnow- oH!!!Sexy!</title>
  <style type="text/css">
    body,
    div {
      margin: 0;
      padding: 0;
    }

    body {
      background: #000;
    }

    #curtain {
      width: 100%;
      height: 600px;
      background-color: #111123;
    }

    .snow {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fff;
      position: absolute;
      animation: mysnow 10s;
    }

    @keyframes mysnow {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    .empty {
      display: none;
    }
  </style>
</head>

<body>
  <div id="curtain"></div>
</body>
<script type="text/javascript">
(function () {
  var $ = function (id) { return typeof id === "string" ? document.getElementById(id) : id };
  var curtain = $("curtain");
  var maxWidth = curtain.clientWidth - 50;
  var maxHeight = curtain.clientHeight;

  var snowControl = function () {};

  snowControl.prototype = {
    Obj: [],
    maxCount: 10,
    count: 0,
    Prepare: function () {
      for (var i = 0; i < this.maxCount; i++) {
        var o = {
          positionX: Math.ceil(Math.random() * maxWidth),
          positionY: Math.ceil(Math.random() * 50),
          speed: Math.ceil(Math.random() * 5 + 3),
          shake: Math.ceil(Math.random() * 3)
        };
        this.Obj.push(o);
      };
    },
    Init: function () {
      if (this.Obj.length) {
        var oDiv = document.createElement("div");
        oDiv.className = "snow";
        var now = this.Obj.shift();
        oDiv.style.top = now.positionY + "px";
        oDiv.style.left = now.positionX + "px";
        curtain.appendChild(oDiv);
        // 喚醒 div
        this.Move(oDiv, now);
        ++this.count;
      } else {
        return false;
      }
    },
    Move: function (oDiv, now) {
      var timer = setInterval(function () {
        if (now.positionX < maxWidth && now.positionY < maxHeight - 50) {
          now.positionY = now.positionY + now.speed;
          now.positionX = now.positionX + now.shake;
          oDiv.style.top = now.positionY + "px";
          oDiv.style.left = now.positionX + "px";
        } else {
          now.positionX = Math.ceil(Math.random() * maxWidth);
          now.positionY = Math.ceil(Math.random() * 50);
          oDiv.style.left = now.positionX + "px";
          oDiv.style.top = 0 + "px";
        }
      }, 30);
    },

    Letsgo: function () {
      var oThis = this;
      var gotimer = setInterval(function () {
        if (oThis.count == oThis.maxCount) {
          clearInterval(gotimer);
        } else {
          oThis.Init();
        }
      }, 400);
    }

  };

  var snow = new snowControl();
  snow.Prepare();
  snow.Letsgo();
})();

</script>

</html>

思路4：使用canvas來實現雪花特效this

待更...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。