JS实现流体加载动画特效代码

2018年8月22日12:10:55 4 3,519

演示

今天给大家带来的是JS流体加载动画加载特效代码,GIF演示效果如图所示(录制画质的不好,见谅[aru_14]):

这个特效弄成加载页面不错![aru_22](自认为)

代码

将下面JS代码粘贴到想要放置的位置即可:

<script>
var $ = {};

$.Particle = function( opt ) {
  this.radius = 7;
  this.x = opt.x;
  this.y = opt.y;
  this.angle = opt.angle;
  this.speed = opt.speed;
  this.accel = opt.accel;
  this.decay = 0.01;
  this.life = 1;
};

$.Particle.prototype.step = function( i ) {
  this.speed += this.accel;
  this.x += Math.cos( this.angle ) * this.speed;
  this.y += Math.sin( this.angle ) * this.speed;
  this.angle += $.PI / 64;
  this.accel *= 1.01;
  this.life -= this.decay;
  
  if( this.life <= 0 ) {
    $.particles.splice( i, 1 );
  }
};

$.Particle.prototype.draw = function( i ) {
  $.ctx.fillStyle = $.ctx.strokeStyle = 'hsla(' + ( $.tick + ( this.life * 120 ) ) + ', 100%, 60%, ' + this.life + ')';
  $.ctx.beginPath();
  if( $.particles[ i - 1 ] ) {
    $.ctx.moveTo( this.x, this.y );
    $.ctx.lineTo( $.particles[ i - 1 ].x, $.particles[ i - 1 ].y );
  }
  $.ctx.stroke();
  
  $.ctx.beginPath();
  $.ctx.arc( this.x, this.y, Math.max( 0.001, this.life * this.radius ), 0, $.TWO_PI );
  $.ctx.fill();
  
  var size = Math.random() * 1.25;
  $.ctx.fillRect( ~~( this.x + ( ( Math.random() - 0.5 ) * 35 ) * this.life ), ~~( this.y + ( ( Math.random() - 0.5 ) * 35 ) * this.life ), size, size );
}

$.step = function() {
  $.particles.push( new $.Particle({
    x: $.width / 2 + Math.cos( $.tick / 20 ) * $.min / 2,
    y: $.height / 2 + Math.sin( $.tick / 20 ) * $.min / 2,
    angle: $.globalRotation + $.globalAngle,
    speed: 0,
    accel: 0.01
  }));
  
  $.particles.forEach( function( elem, index ) {
    elem.step( index );
  });
  
  $.globalRotation += $.PI / 6;
  $.globalAngle += $.PI / 6;
};

$.draw = function() {
  $.ctx.clearRect( 0, 0, $.width, $.height );
  
  $.particles.forEach( function( elem, index ) {
    elem.draw( index );
  });
};

$.init = function() {
  $.canvas = document.createElement( 'canvas' );
  $.ctx = $.canvas.getContext( '2d' );
  $.width = 300;
  $.height = 300;
  $.canvas.width = $.width * window.devicePixelRatio;
  $.canvas.height = $.height * window.devicePixelRatio;
  $.canvas.style.width = $.width + 'px';
  $.canvas.style.height = $.height + 'px';
  $.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
  $.min = $.width * 0.5;
  $.particles = [];
  $.globalAngle = 0;
  $.globalRotation = 0;
  $.tick = 0;
  $.PI = Math.PI;
  $.TWO_PI = $.PI * 2;
  $.ctx.globalCompositeOperation = 'lighter';
  document.body.appendChild( $.canvas );
  $.loop();
};

$.loop = function() {
  requestAnimationFrame( $.loop );
  $.step();
  $.draw();
  $.tick++;
};

$.init();
</script>

Demo下载

为了一些小白....[aru_23]提供一个Demo下载链接:

[button url="https://eyun.baidu.com/s/3jKjinn4" types="down"]云盘下载[/button]

提取密码:dDJL

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:4   其中:访客  2   博主  2

    • avatar Austen 3

      这次的密码不回复可见了啦

        • avatar Liues Admin

          @Austen 这都被你发现了!#(你懂的)

        • avatar Liues Admin

          • avatar Austen 0

            Testing 测试