没有元素旋转的轨道动画

Posted 2023-02-22

【中文标题】没有元素旋转的轨道动画

【英文标题】：Orbit animation without element rotating

【发布时间】：2021-05-15 18:18:40

【问题描述】：

我正在制作一个所有行星都围绕太阳运行的太阳系模型。 我正在使用以下代码执行此操作：

.neptuneOrbit 
  --time: 19;
  --dist: 2.76;
  --size: .85;
  z-index: 2;

.orbitContainer 
width: 10rem;
  --timeunit: 10s;
  --offsetunit: 30vmin;
  --sizeunit: 5vmin;
  
  position: absolute;
  top: calc(50% - calc(var(--size) * var(--sizeunit)));
  --offset: calc(var(--dist) * var(--offsetunit));/* distance from the center */
  left: calc(50% - var(--offset)); 
  width: calc(2 * var(--offset));
  animation: circleRound calc(var(--time) * var(--timeunit)) linear   infinite;

.orbitContainer .inner 
  
  position: relative;
  width: calc(calc(2 * var(--size)) * var(--sizeunit));
  height: calc(calc(2 * var(--size)) * var(--sizeunit)); 
  border-radius: 50%;
  border-style: none;
 


@keyframes circleRound 
  100% 
    transform: rotate(360deg);
  

在 app.js 中

<div className="orbitContainer neptuneOrbit"> <MiniPlanet className="neptuneMini inner" name="neptune" /></div>

miniPlanet 组件只保存纹理。 问题在于，当行星绕轨道运行时，它们也在旋转 360 度。使北极或南极最终面向太阳。我试图让行星在“固定”位置运行，使其在绕圈时朝向相同的方向。但是，如果不破坏轨道动画，我就无法做到这一点。 我的完整代码可以在这里查看：link 提前感谢您的帮助。

【问题讨论】：

不是简单地旋转行星，而是使用 requestAnimationFrame 为它们的位置设置动画（使用角度的余弦和正弦计算 x 和 y）

检查这个：***.com/a/65863788/8620333

那么我应该在哪里使用requestAnimationFrame？我会用它替换关键帧动画吗？我以前从未使用过它。我的动画是基于那个答案的，我在那里没有看到解决方案。

如果你说的是我分享的链接，你的动画就是基于它的。我的答案是使用完全不同的技术，没有您描述的问题（运行代码并查看）

你说得对，我应该仔细看看。我将尝试将其调整为我的代码。对于每个对象，这种方法是否可以使用不同的距离？

【参考方案1】：

基于my previous answer，您可以执行以下操作。文字只是为了说明圆圈保持同一个方向：

#container 
  width: 200px;
  height: 200px;
  margin: 40px auto;
  display:grid;
  place-content: center;
  background:radial-gradient(farthest-side,blue 90%,transparent) center/10px 10px no-repeat;


.item 
  grid-area:1/1;
  width:var(--s);
  height:var(--s);
  margin:auto;
  text-align: center;
  border-radius: 50%;
  background: #f00;
  color:#fff;
  font-weight:bold;
  animation: spin var(--d) linear infinite; 
  transform:rotate(0) translate(var(--o)) rotate(0);

@keyframes spin 
  100% 
    transform:rotate(1turn) translate(var(--o)) rotate(-1turn);
  

<div id="container">
  <div class="item" style="--d:5s;--o:65px;--s:40px;">1</div>
  <div class="item" style="--d:6s;--o:150px;--s:20px;">2</div>
  <div class="item" style="--d:10s;--o:90px;--s:10px;">3</div>
  <div class="item" style="--d:2s;--o:30px;--s:30px;">4</div>
</div>