CANVAS 粒子隧道 | 光圈波动动画

Particle Tunnel，以鼠标为中心荡漾开来的一圈圈圆点。

CANVAS, particle

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4360
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var mouse = {
    x: window.innerWidth / 2,
    y: window.innerHeight / 2,
    isDown: false
};

window.addEventListener("mousedown", function() {
    mouse.isDown = true;
});

window.addEventListener("mouseup", function() {
    mouse.isDown = false;
});

window.addEventListener("mousemove", function(event) {
    mouse.x = event.clientX;
    mouse.y = event.clientY;
});

window.addEventListener("resize", function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

window.addEventListener("click", function() {});

canvas.addEventListener("touchstart", function() {
    mouse.isDown = true;
});

canvas.addEventListener("touchmove", function(event) {
    event.preventDefault();
    mouse.x = event.touches[0].pageX;
    mouse.y = event.touches[0].pageY;
});

canvas.addEventListener("touchend", function() {
    mouse.isDown = false;
});

function Circle(x, y, radius, color, xVelocity, yVelocity) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.velocity = {
        x: xVelocity,
        y: yVelocity
    };
    this.isAlive = true;

this.update = function() {
        if (this.x - this.radius > canvas.width || this.x + this.radius < 0 || this.y - this.radius > canvas.height || this.y + this.radius < 0) {
            this.isAlive = false;
        }

this.x += this.velocity.x;
        this.y += this.velocity.y;
        this.draw();
    };

this.draw = function() {
        c.beginPath();
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        c.fillStyle = this.color;
        c.fill();
        c.closePath();
    };
}

function Explosion(velocity, hue) {
    this.particles = [];
    this.particleAmount = 50;
    this.particleSeparation = Math.PI * 2 / this.particleAmount;

this.init = function() {
        var distance = this.particleSeparation;

for (var i = 0; i < this.particleAmount; i++) {
            var radius = 4;
            var color = 'hsl(' + hue + ', 100%, 50%)';

this.particles.push(new Circle(mouse.x, mouse.y, radius, color, Math.sin(distance) * velocity, Math.cos(distance) * velocity));

distance += this.particleSeparation;
        }
    };

this.init();

this.update = function() {
        for (var i = 0; i < this.particles.length; i++) {
            if (this.particles[i].isAlive === false) this.particles.splice(i, 1);

// Placed below splice since having it above caused particles to flash
            if (this.particles[i] !== undefined) this.particles[i].update();
        }
    };
}

var timer = 0;
var explosions = [];
var hue = 214;
var isHueIncreasing = false;

function animate() {
    window.requestAnimationFrame(animate);
    timer += 1;
    c.fillStyle = '#111';
    c.fillRect(0, 0, canvas.width, canvas.height);

if (timer % 12 === 0) {
        if (hue > 0 && isHueIncreasing === false) {
            hue -= 2;
        } else {
            hue += 2;
        }

if (hue <= 0) {
            isHueIncreasing = true;
        } else if (hue >= 254) {
            isHueIncreasing = false;
        }
        explosions.push(new Explosion(2, hue));
    }

for (var i = 0; i < explosions.length; i++) {
        explosions[i].update();
    }
}

animate();

编译

CSS

body {
    overflow: hidden;
    margin: 0;
}
/*
* *----------------------------------
*  Social
* *----------------------------------
*/

.social-icon a {
    position: absolute;
    background: white;
    color: white;
    box-shadow: -1px -1px 20px 0px rgba(0, 0, 0, 0.3);
    display: inline-block;
    width: 150px;
    height: 80px;
    transform-origin: 50% 50%;
    transition: .15s ease-out;
    z-index: 30;
}
.social-icon i {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    transition: .15s ease-out;
}
.youtube:hover a {
    transform: rotate(45deg) scale(1.05);
}
.youtube:hover i {
    color: #ec4c44;
}
.youtube a {
    bottom: -40px;
    left: -75px;
    transform: rotate(45deg);
}
.youtube i {
    bottom: 7px;
    left: 7px;
    color: #E62117;
}
.twitter:hover a {
    transform: rotate(-45deg) scale(1.05);
}
.twitter:hover i {
    color: #21c2ff;
}
.twitter a {
    bottom: -40px;
    right: -75px;
    transform: rotate(-45deg);
}
.twitter i {
    bottom: 7px;
    right: 7px;
    color: #00ACED;
}

HTML

Particle Tunnel，以鼠标为中心荡漾开来的一圈圈圆点。

CANVAS, particle

编辑器支持Emmet

快捷键

Particle Tunnel，以鼠标为中心荡漾开来的一圈圈圆点。

CANVAS, particle

HTML5 CANVAS 泡沫粒子浮起和线条波动起伏动画

CANVAS 粒子斥力网格演示动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：