Lightbox/弹窗

基于canvas超酷跟随鼠标粒子动画

创客主机


这是一款基于canvas的超酷跟随鼠标粒子动画特效。该粒子跟随动画特效通过js代码,在canvas上随机生成粒子效果,并使粒子跟随鼠标移动而移动。

使用方法

在页面中引入stopExecutionOnTimeout.js文件。

  1. <script src="js/stopExecutionOnTimeout.js" type="text/javascript"></script>

HTML部分

在页面中创建一个canvas。

  1. <canvas></canvas>

CSS代码

为canvas添加下面的CSS样式。

  1. html{
  2.   margin: 0;
  3.   padding: 0;
  4.   border: 0;
  5.   font-family:  sans-serif;
  6. }
  7.  
  8. canvas{
  9.   margin: 0;
  10.   padding: 0;
  11.   display: block; 
  12.   touch-action: none; 
  13. }

JavaScript

在页面DOM元素加载完毕之后,通过下面方法来制作粒子跟随鼠标效果。

  1. var canvas = document.querySelector('canvas');
  2. canvas.height = window.innerHeight;
  3. canvas.width = window.innerWidth;
  4. c = canvas.getContext('2d');
  5.  
  6. window.addEventListener('resize', function () {
  7.     canvas.height = window.innerHeight;
  8.     canvas.width = window.innerWidth;
  9.  
  10.     initCanvas();
  11. });
  12.  
  13. var mouse = {
  14.     x: undefined,
  15.     y: undefined };
  16.  
  17. window.addEventListener('mousemove',
  18. function (event) {
  19.     mouse.x = event.x;
  20.     mouse.y = event.y;
  21.     drawCircles();
  22. });
  23.  
  24. window.addEventListener("touchmove",
  25. function (event) {
  26.     let touch = event.touches[0];
  27.     mouse.x = touch.clientX;
  28.     mouse.y = touch.clientY;
  29.     drawCircles();
  30. });
  31.  
  32.  
  33. function Circle(x, y, radius, vx, vy, rgb, opacity, birth, life) {
  34.     this.x = x;
  35.     this.y = y;
  36.     this.radius = radius;
  37.     this.minRadius = radius;
  38.     this.vx = vx;
  39.     this.vy = vy;
  40.     this.birth = birth;
  41.     this.life = life;
  42.     this.opacity = opacity;
  43.  
  44.     this.draw = function () {
  45.         c.beginPath();
  46.         c.arc(this.x, this.y, this.radius, Math.PI * 2, false);
  47.         c.fillStyle = 'rgba(' + rgb + ',' + this.opacity + ')';
  48.         c.fill();
  49.     };
  50.  
  51.     this.update = function () {
  52.         if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
  53.             this.vx = -this.vx;
  54.         }
  55.  
  56.         if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
  57.             this.vy = -this.vy;
  58.         }
  59.  
  60.         this.x += this.vx;
  61.         this.y += this.vy;
  62.  
  63.         this.opacity = 1 - (frame - this.birth) * 1 / this.life;
  64.  
  65.         if (frame > this.birth + this.life) {
  66.             for (let i = 0; i < circleArray.length; i++) {
  67.                 if (this.birth == circleArray[i].birth && this.life == circleArray[i].life) {
  68.                     circleArray.splice(i, 1);
  69.                     break;
  70.                 }
  71.             }
  72.         } else {
  73.             this.draw();
  74.         }
  75.     };
  76.  
  77. }
  78.  
  79. var circleArray = [];
  80.  
  81. function initCanvas() {
  82.     circleArray = [];
  83. }
  84.  
  85. var colorArray = [
  86. '355,85,80',
  87. '9,80,100',
  88. '343,81,45'];
  89.  
  90.  
  91. function drawCircles() {
  92.     for (let i = 0; i < 6; i++) {
  93.         let radius = Math.floor(Math.random() * 4) + 2;
  94.         let vx = Math.random() * 2 - 1;
  95.         let vy = Math.random() * 2 - 1;
  96.         let spawnFrame = frame;
  97.         let rgb = colorArray[Math.floor(Math.random() * colorArray.length)];
  98.         let life = 100;
  99.         circleArray.push(new Circle(mouse.x, mouse.y, radius, vx, vy, rgb, 1, spawnFrame, life));
  100.  
  101.     }
  102. }
  103.  
  104. var frame = 0;
  105. function animate() {
  106.     requestAnimationFrame(animate);
  107.     frame += 1;
  108.     c.clearRect(0, 0, innerWidth, innerHeight);
  109.     for (let i = 0; i < circleArray.length; i++) {
  110.         circleArray[i].update();
  111.     }
  112.  
  113. }
  114.  
  115. initCanvas();
  116. animate();
  117.  
  118. // This is just for demo purposes :
  119. for (let i = 1; i < 110; i++) {
  120.     (function (index) {
  121.         setTimeout(function () {
  122.             mouse.x = 100 + i * 10;
  123.             mouse.y = 100;
  124.             drawCircles();
  125.         }, i * 10);
  126.     })(i);
  127. }

Codepen网址为:https://codepen.io/sedran/pen/oaOyvK

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!