Welcome, Old Sport!

基于HTML5 Canvas的下雪动画

by ilikecss ON 2013/12/17 8451

Canvas下雪动画的图片快圣诞节了,这两天制作了一款“Merry Christmas”的圣诞祝福送给大家。使用HTML5Canvas标签来绘制动画,说起这Canvas就只是个容器而已,动画还是需要脚本来写,有能力可以做3D的动画。在老外博客发现的动画,我单独把下雪效果扒了下来,然后用之前教过大家的文字动画做了修饰,感觉更有圣诞气氛了。(由于使用HTML5,IE>=9)

Step1. 脚本代码

(function () {

  var COUNT = 100; //雪花数量
  var snow = document.querySelector('.snow'); //对象
  var canvas = document.createElement('canvas'); //容器
  var ctx = canvas.getContext('2d');
  var width = snow.clientWidth;
  var height = snow.clientHeight;
  var i = 0;
  var active = false;

  function onResize() {
    width = snow.clientWidth;
    height = snow.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() * 5; //雪花大小
    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();
    snowflake.reset();
    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);

  snow.appendChild(canvas);
})();

动画字体的脚本和插件

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="assets/jquery.fittext.js"></script>
<script src="assets/jquery.lettering.js"></script>
<script src="js/jquery.textillate.js"></script>
$(function (){

var animateClasses = 'bounceInDown';

$('.jumbotron h1')
.fitText(1, { maxFontSize: 300})
.textillate({ initialDelay: 1000, in: { delay: 3, shuffle: true } });

});

通过扫描二维码下载:

8条评论
  1. #1

    金刚禅狮子吼说道:

    居然还支持responsive…. :?: :?:

  2. #2

    rita说道:

    动画在哪里,除了动画,框里的文字我都不认识 :???:

  3. #3

    植物租赁说道:

    给力呀,不得了

  4. #4

    伊人说道:

    圣诞虽然过去了,我还是留个脚印,收藏下。

  5. #5

    LovePanda说道:

    最近天氣超冷,太棒了,我還想試著讓雪可以跟著滑鼠旋轉。




TOP