像素化加载器

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const rand = (min, max) => {
  return Math.random() * (max - min) + min;
};

class Pixel {
  constructor(x, y, color, speed, delay, delayHide, step, boundSize) {
    this.x = x;
    this.y = y;

this.color = color;
    this.speed = rand(0.1, 0.9) * speed;

this.size = 0;
    this.sizeStep = rand(0, 0.5);
    this.minSize = 0.5;
    this.maxSizeAvailable = boundSize || 2;
    this.maxSize = rand(this.minSize, this.maxSizeAvailable);
    this.sizeDirection = 1;

this.delay = delay;
    this.delayHide = delayHide;
    this.counter = 0;
    this.counterHide = 0;
    this.counterStep = step;

this.isHidden = false;
    this.isFlicking = false;
  }

draw(ctx) {
    const centerOffset = this.maxSizeAvailable * 0.5 - this.size * 0.5;

ctx.fillStyle = this.color;
    ctx.fillRect(
    this.x + centerOffset,
    this.y + centerOffset,
    this.size,
    this.size);

}

show() {
    this.isHidden = false;
    this.counterHide = 0;

if (this.counter <= this.delay) {
      this.counter += this.counterStep;
      return;
    }

if (this.size >= this.maxSize) {
      this.isFlicking = true;
    }

if (this.isFlicking) {
      this.flicking();
    } else {
      this.size += this.sizeStep;
    }
  }

hide() {
    this.counter = 0;

if (this.counterHide <= this.delayHide) {
      this.counterHide += this.counterStep;
      if (this.isFlicking) {
        this.flicking();
      }
      return;
    }

this.isFlicking = false;

if (this.size <= 0) {
      this.size = 0;
      this.isHidden = true;
      return;
    } else {
      this.size -= 0.05;
    }
  }

flicking() {
    if (this.size >= this.maxSize) {
      this.sizeDirection = -1;
    } else if (this.size <= this.minSize) {
      this.sizeDirection = 1;
    }

this.size += this.sizeDirection * this.speed;
  }}

const canvas = document.createElement("canvas");
const container = document.querySelector("#container");
const interval = 1000 / 60;

container.append(canvas);

const ctx = canvas.getContext("2d");

let width;
let height;
let pixels;
let request;
let lastTime;
let ticker;
let maxTicker = 360;
let animationDirection = 1;

const getDelay = (x, y, direction) => {
  let dx = x - width * 0.5;
  let dy = y - height;

if (direction) {
    dy = y;
  }

return Math.sqrt(dx ** 2 + dy ** 2);
};

const gap = 6; // Math.floor(width * 0.025)
  const step = (width + height) * 0.005;
  const speed = rand(0.008, 0.25);
  const maxSize = Math.floor(gap * 0.5);

pixels = [];

for (let x = 0; x < width; x += gap) {
    for (let y = 0; y < height; y += gap) {
      if (x + maxSize > width || y + maxSize > height) {
        continue;
      }

const color = colors[Math.floor(Math.random() * colorsLen)];
      const delay = getDelay(x, y);
      const delayHide = getDelay(x, y);

pixels.push(new Pixel(x, y, color, speed, delay, delayHide, step, maxSize));
    }
  }
};

const animate = () => {
  request = requestAnimationFrame(animate);

const now = performance.now();
  const diff = now - (lastTime || 0);

if (diff < interval) {
    return;
  }

lastTime = now - diff % interval;

ctx.clearRect(0, 0, width, height);

if (ticker >= maxTicker) {
    animationDirection = -1;
  } else if (ticker <= 0) {
    animationDirection = 1;
  }

let allHidden = true;

pixels.forEach(pixel => {
    if (animationDirection > 0) {
      pixel.show();
    } else {
      pixel.hide();
      allHidden = allHidden && pixel.isHidden;
    }

pixel.draw(ctx);
  });

ticker += animationDirection;

if (animationDirection < 0 && allHidden) {
    ticker = 0;
  }
};

const resize = () => {
  cancelAnimationFrame(request);

const rect = container.getBoundingClientRect();

width = Math.floor(rect.width);
  height = Math.floor(rect.height);

canvas.width = width;
  canvas.height = height;

initPixels();

ticker = 0;

animate();
};

new ResizeObserver(resize).observe(container);

document.addEventListener('click', resize);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg