javascript - 沿固定 Angular 圆形路径移动 div

Question

我想知道是否可以沿固定 Angular 圆形路径移动 div。例如。移动 div 仅 45 度的圆形路径，然后使其回到起点，类似于钟摆的效果。

希望所附图片能理解我的意思。

非常感谢所有帮助。 期待，

Answer 1

根据您更新后的要求(旋转时对象本身应始终垂直)，我修改了之前的代码。

可能还有另一种方法，但我现在只能想到这个。在这里，我将我们原来的“球”元素包装在另一个 div 中。现在，外部 div 执行正常的钟摆动画。但是，除此之外，内部对象还执行反向旋转动画，使其在动画期间的所有点都保持垂直。

请注意，内部对象的默认变换原点为 center center，因为它只需要绕自己的轴旋转。

#container
{
  background-color: #777;
  border-radius: 50%;
  height: 20px;
  margin: 0 auto;
  margin-top: 150px;
  position: relative;
  width: 20px;
}

#ball
{
  animation: swing 1s ease 0s infinite;
  background-color: green;
  height: 50px;
  left: -15px;
  position: absolute;
  top: -150px;
  transform-origin: center 150px;
  width: 50px;
}

@keyframes swing{
  0%{transform: rotate(-22.5deg);}
  50%{transform: rotate(22.5deg);}
  100%{transform: rotate(-22.5deg);}
}

#main-content
{
  animation: innerswing 1s ease 0s infinite;
  background-color: red;
  display: block;
  height: 100%;
  width: 100%;
}

@keyframes innerswing{
  0%{transform: rotate(22.5deg);}
  50%{transform: rotate(-22.5deg);}
  100%{transform: rotate(22.5deg);}
}

<div id="container">
  <div id="ball">
    <div id="main-content"></div>
  </div>
</div>