灰色爆炸

我制作了这个简洁的灰色爆炸效果。 它没什么特别的，特别是与 CodePen 上惊人的创造力 相比，但我认为我可以记录其中发生的一些事情，以供学习参考。

它是 SVG

SVG 有 <line x1 y1 x2 y2>，所以我想用它来实现这种爆炸效果应该很容易。 x1 y1 始终是中间，而 x2 y2 是随机生成的。 由于使用的是 viewBox="0 0 100 100"，因此放置线条的心算非常容易。 你甚至可能更喜欢 -50 -50 100 100，这样坐标 0 0 就位于中间。

随机数

const getRandomInt = (min, max) => {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

有一个这样的函数来生成艺术品真是太好了。 我不仅用它来定位线条，还用它来设置灰色线条的宽度和不透明度。

我使用过这个函数很多次，它让我觉得原生 JavaScript 应该有一个这样的数学辅助函数，它非常清晰易懂。

使用模板文字生成 HTML 太容易了

对我来说，这非常易读

let newLines;
for (let i = 0; i < NUM_LINES; i++) {
  newLines += `
  <line 
    x1="50"
    y1="50"
    x2="${getRandomInt(10, 90)}"
    y2="${getRandomInt(10, 90)}"
    stroke="rgba(0, 0, 0, 0.${getRandomInt(0, 25)})"
    stroke-linecap="round"
    stroke-width="${getRandomInt(1, 2)}"
  />`;
}

svg.insertAdjacentHTML("afterbegin", newLines);

点击重新生成互动形式

如果有一个单独的函数来启动绘制艺术品，点击重新生成就像

doArt();

window.addEventListener("click", doArt);

圆角

我发现使用 stroke-linecap="round" 更加令人愉悦。 很高兴我们可以在 SVG 中对线条末端进行圆角处理。

线条的坐标不会移动——它只是一个 CSS 变换

我只是将它放在线条上

line {
  transform-origin: center;
  animation: do 4s infinite alternate;
}
line:nth-child(6n) {
  animation-delay: -1s;
}
line:nth-child(6n + 1) {
  animation-delay: -2s;
}
line:nth-child(6n + 2) {
  animation-delay: -3s;
}
line:nth-child(6n + 3) {
  animation-delay: -4s;
}
line:nth-child(6n + 4) {
  animation-delay: -5s;
}

@keyframes do {
  100% {
    transform: scale(0.69);
  }
}

看起来线条只是在变长或变短，但实际上是整个线条在使用 scale() 缩小。 你几乎注意不到线条的变细，因为它们比宽度长得多。

注意负动画延迟。 这样做是为了交错动画，使它们看起来有点随机，但仍然在同一时间开始。

还可以做些什么？

• 着色可能很酷。 甚至 令人愉悦？
• 我喜欢将美学分组的想法。 也就是说，如果你将所有线条的随机化范围设为 1-10，感觉几乎太随机了，但如果将其随机化为 1-2、2-4 或 8-10 的组，美学感觉更有条理。 着色也是如此——完全随机的颜色太随机了。 在更严格的范围内随机化会更有意思。
• 更多的动作。 旋转？ 在页面周围移动？ 更多的爆炸？
• 最重要的是，能够直接在演示本身玩转更多参数总是很有趣。 dat.GUI 总是 很酷的。