js实现canvas粒子飞舞动画效果代码-html代码-BFW代码库

js实现canvas粒子飞舞动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas粒子飞舞动画效果代码

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

<html>
<head>
    <style>
        html, body {
            overflow: hidden;
            margin: 0;
        }

        html {
            background: #14191C;
        }

        p {
            position: absolute;
            bottom: 1em;
            width: 100%;
            color: rgba(255, 255, 255, 0.25);
            text-align: center;
            pointer-events: none;
            transition: opacity 1s ease-in-out;
        }
    </style>

</head>
<body>
    <p style="opacity: 0;">
        Click near Boids to disperse group.
    </p>
    <script>
        // start particle simulation
        simulate(
            '2d', {
                init: function() {

                    this.spray(150, function() {
                        return [
                            null,
                            null,
                            Vector.create(
                                this.width * Math.random(),
                                this.height * Math.random()
                            ),
                            Vector.random(1),
                            .75 + (Math.random() * .5),
                            100 * Math.random(), [
                                this.behavior.cohesion(),
                                this.behavior.alignment(),
                                this.behavior.separation(),

                                this.behavior.limit(1 + Math.random()),

                                this.behavior.wrap(5),
                                this.behavior.move()
                            ]
                        ]
                    })

                },
                tick: function() {},
                beforePaint: function() {
                    this.clear();
                },
                paint: function(particle) {

                    var p = particle.position;
                    var v = particle.velocity;
                    var s = particle.stimulated || 0;
                    var l = particle.life;

                    this.paint.circle(p.x, p.y, v.magnitudeSquared, 'hsla(' + v.angle + ',100%,50%,1)');

                },
                afterPaint: function() {
                    // nothing
                },
                action: function(x, y) {

                    // disperse if near
                    this.particles.forEach(function(p) {

                        if (Vector.distanceSquared(p.position, {
                            x: x,
                            y: y
                        }) < 4000) {
                            p.velocity.randomize(100);
                            p.position.x += p.velocity.x;
                            p.position.y += p.velocity.y;
                        }

                    });

                }
            }
        );

        setTimeout(() => {
            document.querySelector('p').style.opacity = 0;
        }, 3000);


























        // "simulate" particle simulation logic
        /**
        * Constants
        */
        PI_2 = Math.PI / 2;
        PI_180 = Math.PI / 180;

        /**
        * Random
        */
        var Random = {
            between: function(min, max) {
                return min + (Math.random() * (max - min));
            }
        }

        /**
        * 2D Vector Class
        */
        function Vector(x, y) {
            this._x = x || 0;
            this._y = y || 0;
        }

        Vector.create = function(x, y) {
            return new Vector(x, y);
        };

        Vector.add = function(a, b) {
            return new Vector(a.x + b.x, a.y + b.y);
        };

        Vector.subtract = function(a, b) {
            return new Vector(a.x - b.x, a.y - b.y);
        };

        Vector.random = function(range) {
            var v = new Vector();
            v.randomize(range);
            return v;
        };

        Vector.distanceSquared = function(a, b) {
            var dx = a.x - b.x;
            var dy = a.y - b.y;
            return dx * dx + dy * dy;
        };

        Vector.distance = function(a, b) {
            var dx = a.x - b.x;
            var dy = a.y - b.y;
            return Math.sqrt(dx * dx + dy * dy);
        };

        Vector.prototype = {
            get x() {
                return this._x;
            },
            get y() {
                return this._y;
            },
            set x(value) {
                this._x = value;
            },
            s.........完整代码请登录后点击上方下载按钮下载查看