原生JS實現(xiàn)的雪花飄落動畫效果

2019-11-19 13:55:32

字體：大中小

供稿：網(wǎng)友

本文實例講述了原生JS實現(xiàn)的雪花飄落動畫效果。分享給大家供大家參考，具體如下：

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <title>www.survivalescaperooms.com JS下雪動畫</title>  <meta name="description" content="">  <meta name="viewport" content="width=device-width, initial-scale=1"></head><style>  .masthead {    background-color:#333;    display:block;    width:100%;    height:400px;  }</style><body><div class="masthead"></div><script>  (function () {    var COUNT = 300;    var masthead = document.querySelector('.masthead');    var canvas = document.createElement('canvas');    var ctx = canvas.getContext('2d');    var width = masthead.clientWidth;    var height = masthead.clientHeight;    var i = 0;    var active = false;    function onResize() {      width = masthead.clientWidth;      height = masthead.clientHeight;      canvas.width = width;      canvas.height = height;      ctx.fillStyle = '#FFF';      var wasActive = active;      active = width > 600;      if (!wasActive && active)        requestAnimFrame(update);    }    var Snowflake = function () {      this.x = 0;      this.y = 0;      this.vy = 0;      this.vx = 0;      this.r = 0;      this.reset();    };    Snowflake.prototype.reset = function() {      this.x = Math.random() * width;      this.y = Math.random() * -height;      this.vy = 1 + Math.random() * 3;      this.vx = 0.5 - Math.random();      this.r = 1 + Math.random() * 2;      this.o = 0.5 + Math.random() * 0.5;    };    canvas.style.position = 'absolute';    canvas.style.left = canvas.style.top = '0';    var snowflakes = [], snowflake;    for (i = 0; i < COUNT; i++) {      snowflake = new Snowflake();      snowflakes.push(snowflake);    }    function update() {      ctx.clearRect(0, 0, width, height);      if (!active)        return;      for (i = 0; i < COUNT; i++) {        snowflake = snowflakes[i];        snowflake.y += snowflake.vy;        snowflake.x += snowflake.vx;        ctx.globalAlpha = snowflake.o;        ctx.beginPath();        ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);        ctx.closePath();        ctx.fill();        if (snowflake.y > height) {          snowflake.reset();        }      }      requestAnimFrame(update);    }    // shim layer with setTimeout fallback    window.requestAnimFrame = (function(){      return window.requestAnimationFrame    ||          window.webkitRequestAnimationFrame ||          window.mozRequestAnimationFrame  ||          function( callback ){            window.setTimeout(callback, 1000 / 60);          };    })();    onResize();    window.addEventListener('resize', onResize, false);    masthead.appendChild(canvas);  })();</script></body></html>

使用本站HTML/CSS/JS在線運行測試工具：http://tools.VeVB.COm/code/HtmlJsRun，可得到如下測試運行效果：