粒子灯圈

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

console.clear();
const particles = [];
const amount = innerWidth < 600 || innerHeight < 600 ? 1000 : 2000;
const durationShrink = 8;
const durationGrow = 8;
const total = durationShrink + durationGrow;
const theme = ['#393e46', '#00adb5', '#393e46', '#00adb5', '#e6eeef'];

// we'll tween the values in this proxy object. "progress" is for the overall progress of the movement around the circle, and "val" is for the individual grow/shrink stuff.
// This technique was kindly provided by Jack from Greensock
const proxy = {
  progress: 1,
  val: 0
};
// for the movement around the circle
const progress = gsap.to(proxy, {
  progress: 0,
  ease: "none",
  duration: total,
  repeat: -1
});
// for the interpolation of each dot's movement (resuse)
const interpolator = gsap.timeline({
  paused: true,
  reverse: true
}).to(proxy, {
  val: 1,
  duration: durationShrink,
  ease: 'elastic.in(1.5, 0.15)'
}).to(proxy, {
  val: 0,
  duration: durationGrow,
  ease: 'back.in(3)'
});

class P {
  constructor (i) {
    this.i = i;
    this.cos = cos(i * TWO_PI);
    this.sin = sin(i * TWO_PI);
    this.r = floor(random(2, 8));
    this.offset = pow(random(1, 2), 2.5) * random(-0.015, 0.015);
    this.color = random(theme);
  }
  draw () {
    interpolator.progress((proxy.progress + this.i) % 1);
    let r = width * (0.35 + (proxy.val * this.offset));
    let x = this.cos * r + width / 2;
    let y = this.sin * r + width / 2;
    fill(this.color);
    circle(x, y, this.r);
  }
}

function draw () {
  clear();
  particles.forEach(p => {
    p.draw();
  });
}

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