javascript - 如何使用 CSS 动画创建无限的标志轨迹？

Question

我想使用 div 创建无限符号动画。需要在 div 上做哪些动画来实现这一点。

提前致谢！

Answer 1

好吧，例如在这张照片中：

所有的紫色都是你的“球”应该通过的点。您可以将每个点视为一个关键帧。100% 时间内有 16 个点（中心有 2 个相同）。这意味着每个关键帧占总时间的 6.25%。

使用 CSS 轻松创建球：

.ball
{
    width: 10px;
    height: 10px;
    background-color: black;
    border-radius: 40px;
    position: absolute;
}

基本上，您定义每个点的左侧和顶部位置。

现在我做了一个非常小的例子，因为我没有太多时间；p 但我希望你明白我想要做什么：jsFiddle

更多关于动画的信息在这里。

更新

如果没有一个可行的例子，我不能让这个答案站得住脚。所以特此：

jsFiddle

如您所见，过渡并不那么顺利。添加的路径点越多，动画曲线就越平滑。

Answer 2

尝试了不同的方法。仍然只是 CSS3 动画。

两个球沿着一个轨道运行两次。一个顺时针，另一个逆时针。两个轨道 (divs) 彼此无缝定位。在第一个完成他的运行之前，另一个是隐藏的。当他们在中间相遇时，第一个躲起来，第二个开始奔跑。

<div id="left"></div>
<div id="right"></div>

https://jsfiddle.net/leymannx/LWk74/ 在 Chrome 31、Firefox 26、Safari 7 和 IE 10 & 11 上测试（小提琴中包含跨浏览器兼容性）

#left {
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 40px;
  position: absolute;
  top: 150px;
  left: 150px;

  animation: animationLeft 5s linear infinite;
}

#right {
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 40px;
  position: absolute;
  top: 150px;
  left: 350px;

  animation: animationRight 5s linear infinite;
}

@keyframes animationLeft {
  0%    { transform: rotate(0deg) translateX(100px); }
  50%   { transform: rotate(360deg) translateX(100px); visibility: hidden; }
  100%  { transform: rotate(360deg) translateX(100px); visibility: hidden; }
}

@keyframes animationRight {
  0%    { transform: rotate(-180deg) translateX(100px); visibility: hidden; }
  50%   { transform: rotate(180deg) translateX(100px); visibility: hidden; }
  100%  { transform: rotate(-180deg) translateX(100px); }
}

有关以行星为例的圆形路径动画的更多信息，请参见此处。还有rotate(360deg)和translateX(100px)解释得很好。

Answer 3

所以我给你三个选择。一种是您基本上将原点转换到右侧，具体取决于点的大小并将其旋转 360 度，当它完成旋转时，将原点转换到原始图像的左侧并逆时针旋转到 0 度。这是一支笔。它仍然有点紧张，但我正在努力。

密码笔

现在第二个选项有点复杂，但会给你一个更好的动画。四个步骤。

1. 将点沿对角线向上向右平移或移动。
2. 对角变换原点（向右下方）并顺时针旋转一些度数。
3. 再次将原点转换为 50% 50% 并转换为左上角。
4. 以逆时针方向旋转重复步骤 2。

第三更复杂，仅靠css是无法实现的。您需要使用 javascript。您可以做的是，您实际上可以提出一个无穷大符号方程，也称为Lemniscate，并计算相对于您当前位置的位置并为其设置动画。

Answer 4

我只是偶然发现了这一点，并创建了一个小型网站，可以将任何 SVG 路径转换为一系列点。

例如，如果你想为这个SVG 制作动画，只需阅读内容并将其粘贴到我开发的一个小工具中：

<svg width="102px" height="52px" viewBox="0 0 102 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Line</title>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
        <path d="M26,1 C38.5,1 51,26 51,26 C51,26 63.5,51 76,51 C88.5,51 101,38.5 101,26 C101,13.5 88.5,1 76,1 C63.5,1 51,26 51,26 C51,26 38.5,51 26,51 C13.5,51 1,38.5 1,26 C1,13.5 13.5,1 26,1 Z" id="Line" stroke="#FF3737"></path>
    </g>
</svg>

代码进入第一个文本字段，倒数点进入第二个文本字段（1 = 很多点，10 = 没有那么多点等）。

它输出一个关键帧动画系列，您可以使用它来为您的点设置动画：DEMO