Question

我需要为一些“漩涡”精灵制作动画，以创建一个看起来像风效果的动画。汇款是：

“请记住，需要随意放置风漩涡彼此不重叠。“

我有原始代码，其中包含来自 Daniel Eden 和 animate.css的代码库 Glide 的各种不同变换 by Nick Pettit 。我不认为通过复制所有代码会获得太多，但目前有一堆不同的变换，这些变换结合起来给出一个相当令人满意的半随机幻灯片和'平滑抖动'，但不幸的是，经常重叠。

来自animate.css的示例：

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  [...]
  90% {
  -webkit-transform: translate3d(0,-4px,0);
  transform: translate3d(0,-4px,0);
  }
}

来自Glide：

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  [...] 

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

无论如何，你得到了一般的想法。我遇到的问题是我不明白如何在这些图像上定义边缘，并且这样做是为了阻止它们在碰撞时相互重叠（或者甚至更好，以便有一个'软' -buffer'或它们周围几毫米的边界，其他漩涡精灵不会进入其中）。我试过谷歌搜索：

Stop images overlapping in CSS

和

Stop SVG images overlapping

但所有这些似乎都涉及正常的css流和/或在不同屏幕尺寸上重叠的对象，或屏幕调整大小，而不是我正在尝试的那种变换。 任何人都可以给我一个关于如何确保SVG精灵周围某种“碰撞盒”类型的东西的要点，或者甚至更好地指向已经执行此操作的代码库？

我不需要手持这个，但只是想知道从哪里开始会很棒。当然，如果人们想要提供更好的代码，但我只是想知道是否有预先编写的内容，或者如果没有，那么你建议从哪个角度接近任务。

我不反对使用JavaScript，如果需要，或者可能是其他网络编码语言（我还不能做C ++，但Python也没关系，同样Go Lang，尽管如果可能的话我宁愿避免使用它们 - - 也许，也许在SMIL上可以做些什么？）;并且已经在代码中调用了jQuery库，但我不会回想任何可能在这里工作的jQuery函数。

停止SVG图像碰撞

0 个答案: