ネイティブJSによって実装された雪の結晶の落下アニメーション効果-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

ネイティブJSによって実装された雪の結晶の落下アニメーション効果

May 05, 2018 am 11:44 AM

javascript アニメーション

この記事では主にネイティブJSで実装された雪の結晶が降るアニメーション効果を紹介しており、JavaScriptの数値演算やページ要素属性の動的な操作に関する実装テクニックも含まれていますので、必要な方は参考にしてください

この記事では、ネイティブJSで実装された雪の結晶が降るアニメーション効果について説明しています。ネイティブJS。参考までに皆さんと共有してください。詳細は次のとおりです:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;title&gt;www.jb51.net JS下雪动画&lt;/title&gt;
  &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;/head&gt;
&lt;style&gt;
  .masthead {
    background-color:#333;
    display:block;
    width:100%;
    height:400px;
  }
&lt;/style&gt;
&lt;body&gt;
&lt;p class=&quot;masthead&quot;&gt;&lt;/p&gt;
&lt;script&gt;
  (function () {
    var COUNT = 300;
    var masthead = document.querySelector(&#39;.masthead&#39;);
    var canvas = document.createElement(&#39;canvas&#39;);
    var ctx = canvas.getContext(&#39;2d&#39;);
    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 = &#39;#FFF&#39;;
      var wasActive = active;
      active = width &gt; 600;
      if (!wasActive &amp;&amp; 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 = &#39;absolute&#39;;
    canvas.style.left = canvas.style.top = &#39;0&#39;;
    var snowflakes = [], snowflake;
    for (i = 0; i &lt; COUNT; i++) {
      snowflake = new Snowflake();
      snowflakes.push(snowflake);
    }
    function update() {
      ctx.clearRect(0, 0, width, height);
      if (!active)
        return;
      for (i = 0; i &lt; 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 &gt; 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(&#39;resize&#39;, onResize, false);
    masthead.appendChild(canvas);
  })();
&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー