这是一款基于canvas的超酷跟随鼠标粒子动画特效。该粒子跟随动画特效通过js代码,在canvas上随机生成粒子效果,并使粒子跟随鼠标移动而移动。
代码演示
https://codepen.io/sedran/pen/oaOyvK
使用教程
引入方式
在页面中引入stopExecutionOnTimeout.js文件。
<script src="js/stopExecutionOnTimeout.js" type="text/javascript"></script>
HTML部分
在页面中创建一个canvas。
<canvas></canvas>
CSS代码
为canvas添加下面的CSS样式。
html{
margin: 0;
padding: 0;
border: 0;
font-family: sans-serif;
}
canvas{
margin: 0;
padding: 0;
display: block;
touch-action: none;
}
JavaScript
在页面DOM元素加载完毕之后,通过下面方法来制作粒子跟随鼠标效果。
var canvas = document.querySelector('canvas');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
c = canvas.getContext('2d');
window.addEventListener('resize', function () {
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
initCanvas();
});
var mouse = {
x: undefined,
y: undefined };
window.addEventListener('mousemove',
function (event) {
mouse.x = event.x;
mouse.y = event.y;
drawCircles();
});
window.addEventListener("touchmove",
function (event) {
let touch = event.touches[0];
mouse.x = touch.clientX;
mouse.y = touch.clientY;
drawCircles();
});
function Circle(x, y, radius, vx, vy, rgb, opacity, birth, life) {
this.x = x;
this.y = y;
this.radius = radius;
this.minRadius = radius;
this.vx = vx;
this.vy = vy;
this.birth = birth;
this.life = life;
this.opacity = opacity;
this.draw = function () {
c.beginPath();
c.arc(this.x, this.y, this.radius, Math.PI * 2, false);
c.fillStyle = 'rgba(' + rgb + ',' + this.opacity + ')';
c.fill();
};
this.update = function () {
if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
this.vx = -this.vx;
}
if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
this.vy = -this.vy;
}
this.x += this.vx;
this.y += this.vy;
this.opacity = 1 - (frame - this.birth) * 1 / this.life;
if (frame > this.birth + this.life) {
for (let i = 0; i < circleArray.length; i++) {
if (this.birth == circleArray[i].birth && this.life == circleArray[i].life) {
circleArray.splice(i, 1);
break;
}
}
} else {
this.draw();
}
};
}
var circleArray = [];
function initCanvas() {
circleArray = [];
}
var colorArray = [
'355,85,80',
'9,80,100',
'343,81,45'];
function drawCircles() {
for (let i = 0; i < 6; i++) {
let radius = Math.floor(Math.random() * 4) + 2;
let vx = Math.random() * 2 - 1;
let vy = Math.random() * 2 - 1;
let spawnFrame = frame;
let rgb = colorArray[Math.floor(Math.random() * colorArray.length)];
let life = 100;
circleArray.push(new Circle(mouse.x, mouse.y, radius, vx, vy, rgb, 1, spawnFrame, life));
}
}
var frame = 0;
function animate() {
requestAnimationFrame(animate);
frame += 1;
c.clearRect(0, 0, innerWidth, innerHeight);
for (let i = 0; i < circleArray.length; i++) {
circleArray[i].update();
}
}
initCanvas();
animate();
// This is just for demo purposes :
for (let i = 1; i < 110; i++) {
(function (index) {
setTimeout(function () {
mouse.x = 100 + i * 10;
mouse.y = 100;
drawCircles();
}, i * 10);
})(i);
}
还没有人赞赏,快来当第一个赞赏的人吧!
- 2¥
- 5¥
- 10¥
- 20¥
- 50¥
声明:本文为原创文章,版权归小王总博客所有,欢迎分享本文,转载请保留出处!