javascript - 动画文本，向左旋转一圈，暂停，然后向右旋转一圈并在 Javascript 中重复

Question

目前我有这段代码可以连续旋转具有 3d 效果的文本。但是，我想要做的是让文本向左旋转一圈或 360 度，然后暂停片刻，然后向右旋转并继续相同的操作。如果我特别想练习我的 Javascript 技能，我将不胜感激如何在 Javascript 而非 Jquery 或 CSS 中处理此问题的任何建议，谢谢。

function spin()
    {
    document.getElementById("myDIV");
    setInterval(function()
    {
        myDIV.style.transform += "rotate3d(0,10,0,10deg)";
    }, 80);
    }
   spin(); 

<div style="text-align:center;"><h1 id='myDIV'>my 3d text</h1>

Answer 1

你不需要 JS。可以使用 CSS Animation 来完成.

在下面的代码片段中，我将 div 设置为通过定义的关键帧沿一个方向旋转，然后通过指定 animation-direction: alternate; 它沿交替方向旋转。

请注意，我已将旋转的 z 分量保持为 0.2，以便我可以看到它正在工作。对于您的需要，z 组件应该为零。

#myDIV {
  animation: 5s linear infinite alternate rotate ;
}

@keyframes rotate {
  0%,
  100% {
    transform: rotate3d(0, 1, 0.2, 0deg);
  }
  50% {
    transform: rotate3d(0, 1, 0.2, 360deg)
  }
}

<div style="text-align:center;">
  <h1 id='myDIV'>my 3d text</h1>
</div>

---

JS 版本:

对于 JS，我认为你需要跟踪当前的旋转 Angular (这样你可以在下一次迭代中增加它)和当前的旋转方向(这样你就可以决定是增加还是减少 Angular ).

我选择不附加到样式 (myDIV.style.transform += "rotate3d(0,10,0,10deg)";) 因为我怀疑在某个时候浏览器可能会开始获取慢的。因此，我通过全局变量管理旋转(即，不是有两个 10 度旋转，而是保持一个 20 度旋转)。

我相信这可以进一步简化，但希望它展示了一种可能的方法。此外，您可以使用 requestAnimationFrame 提高动画计时精度(与 setInterval 相比)如果你有兴趣。

var currentAngle = 0;
var currentDirection = 0; // 0 - Increasing, 1 - Decreasing

function spin() {
  document.getElementById("myDIV");
  setInterval(function() {
    if(currentDirection == 0) {
      // Allow one complete rotation.
      if(currentAngle < 360) {
        myDIV.style.transform = "rotate3d(0,1,0.2,"+ currentAngle +"deg)";
        currentAngle += 10;
      } else {
        // Change the direction.
        currentDirection = 1;
        currentAngle -= 10;
        myDIV.style.transform = "rotate3d(0,1,0.2,"+ currentAngle +"deg)";
      }
    } else {
      // Allow one complete rotation.
      if(currentAngle > 0) {
        myDIV.style.transform = "rotate3d(0,1,0.2,"+ currentAngle +"deg)";
        currentAngle -= 10;
      } else {
        // Change the direction.
        currentDirection = 0;
        currentAngle += 10;
        myDIV.style.transform = "rotate3d(0,1,0.2,"+ currentAngle +"deg)";
      }
    }
  }, 80);
}
spin();

<div style="text-align:center;">
  <h1 id='myDIV'>my 3d text</h1>
</div>