浙江 杭州

HTML5 canvas粒子飞射的loading进度条特效

系统分类: 网页特效 - jquery插件 - jQuery自动完成 2016-11-25

人气8536

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款使用HTML5 canvas制作的效果非常酷的loading进度条特效。该loading进度条在动画的时候会有粒子从进度条头部不断的飞射出来,并且进度条的颜色还会随机改变,非常有创意。

制作方法

HTML结构

这个loading进度条使用一个空的canvas来制作。

<canvas></canvas>                
              
JAVASCRIPT

progressbar()函数用于绘制进度条,particle()函数用于绘制粒子。在draw()方法中判断当前进度条的总进度,在指定刻度时改变进度条的颜色。update()函数循环每一个粒子,不断的修改粒子的高度,从而制作出粒子飞射的效果。最后使用animloop()方法来不断的循环动画。

particle_no = 25;

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      || 
    window.msRequestAnimationFrame     ||  
    function( callback ){
    window.setTimeout(callback, 1000 / 60);
  };
})();

var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");

var counter = 0;
var particles = [];
var w = 400, h = 200;
canvas.width = w;
canvas.height = h;

function reset(){
  ctx.fillStyle = "#272822";
  ctx.fillRect(0,0,w,h);
  
  ctx.fillStyle = "#171814";
  ctx.fillRect(25,80,350,25);
}

function progressbar(){
  this.widths = 0;
  this.hue = 0;
  
  this.draw = function(){
    ctx.fillStyle = 'hsla('+this.hue+', 100%, 40%, 1)';
    ctx.fillRect(25,80,this.widths,25);
    var grad = ctx.createLinearGradient(0,0,0,130);
    grad.addColorStop(0,"transparent");
    grad.addColorStop(1,"rgba(0,0,0,0.5)");
    ctx.fillStyle = grad;
    ctx.fillRect(25,80,this.widths,25);
  }
}

function particle(){
  this.x = 23 + bar.widths;
  this.y = 82;
  
  this.vx = 0.8 + Math.random()*1;
  this.v = Math.random()*5;
  this.g = 1 + Math.random()*3;
  this.down = false;
  
  this.draw = function(){
    ctx.fillStyle = 'hsla('+(bar.hue+0.3)+', 100%, 40%, 1)';;
    var size = Math.random()*2;
    ctx.fillRect(this.x, this.y, size, size);
  }
}

bar = new progressbar();

function draw(){
  reset();
  counter++
  
  bar.hue += 0.8;
  
  bar.widths += 2;
  if(bar.widths > 350){
    if(counter > 215){
      reset();
      bar.hue = 0;
      bar.widths = 0;
      counter = 0;
      particles = [];
    }
    else{
      bar.hue = 126;
      bar.widths = 351;
      bar.draw();
    }
  }
  else{
    bar.draw();
    for(var i=0;i<particle_no;i+=10){
      particles.push(new particle());
    }
  }
  update();
}

function update(){
  for(var i=0;i<particles.length;i++){
    var p = particles[i];
    p.x -= p.vx;
    if(p.down == true){
      p.g += 0.1;
      p.y += p.g;
    }
    else{
      if(p.g<0){
        p.down = true;
        p.g += 0.1;
        p.y += p.g;
      }
      else{
        p.y -= p.g;
        p.g -= 0.1;
      }
    }
    p.draw();
  }
}

function animloop() {
  draw();
  requestAnimFrame(animloop);
}

animloop();                
              

查看演示
下载资源:1
下载资源
错误提交:

格式:zip 大小:51.34KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2071.html 非特殊说明,本文版权归原作者所有,转载请注明出处
HTML5 canvas粒子飞射的loading进度条特效

我当前G币余额:0 已下载次数:1

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)