js实现多彩粒子旋转loading加载动画效果代码-html代码-BFW代码库

js实现多彩粒子旋转loading加载动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现多彩粒子旋转loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
    <meta charset="utf-8">


    <style>
        body {
            background: #111;
        }

        canvas {
            margin: 50px auto;
        }
    </style>

</head>
<body>

    <div></div>

    <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);
        }

      .........完整代码请登录后点击上方下载按钮下载查看