当前位置：首页 > 网页特效 > 进度条

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

分类：进度条日期：2024-05-14 点击(0) 评论(0)

简介

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

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

```html
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();    
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果