用于旋转图像的 CSS3 动画，参数由 javascript 控制答案

【问题标题】：CSS3 animation for rotation of an image, with parameters controlled by javascript用于旋转图像的 CSS3 动画，参数由 javascript 控制
【发布时间】：2015-08-08 01:14:35
【问题描述】：

我想高效地连续旋转图像——它必须在移动浏览器上流畅运行。我目前正在使用 CSS3 动画。我希望能够使用 javascript 控制 CSS 功能（启动、停止、设置旋转速度、缓动以获得额外的信用）。这是我到目前为止要做的旋转本身。需要 JS。

谢谢！

HTML：

<img class="image" src="https://brainful.s3.amazonaws.com/assets/images/twoStates/circle.png" alt="">

CSS：

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

JS：待办事项

Rotate = {
  speed: 4,
  start: function () {
  },
  stop: function () {
  },
  setSpeed: function () {
  },
  setEasing: function () {
  }
};

【问题讨论】：

就我所知。不知道如何使 js 与 CSS 交互（因此是问题）。谢谢。

标签： javascript html css rotation

【解决方案1】：

CSS3 动画功能可以通过 javascript 操作，根据您的问题，代码将是这样的。

    start: function () {
        var elem = document.getElementById('elementId');
        elem.style.animationPlayState = 'running';
    },
    stop: function () {
        var elem = document.getElementById('elementId');
        elem.style.animationPlayState = 'paused';
    },
    setSpeed: function (newSpeed) {
        var elem = document.getElementById('elementId');
        elem.style.animationDuration= newSpeed;
    },
    setEasing: function (newEasing) {
        var elem = document.getElementById('elementId');
        //whatever you want to change
    }

更新

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .image {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 120px;
      height: 120px;
      margin: -60px 0 0 -60px;
      -webkit-animation: spin 4s linear infinite;
      -moz-animation: spin 4s linear infinite;
      animation: spin 4s linear infinite;
    }
    @-moz-keyframes spin {
      100% {
        -moz-transform: rotate(360deg);
      }
    }
    @-webkit-keyframes spin {
      100% {
        -webkit-transform: rotate(360deg);
      }
    }
    @keyframes spin {
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <img id="theImage" class="image" src="https://brainful.s3.amazonaws.com/assets/images/twoStates/circle.png" alt="">
  <button onclick="Rotate.start()">Start</button>
  <button onclick="Rotate.stop()">Stop</button>
  <button onclick="Rotate.setSpeed('1s')">Speed</button>
  <button onclick="Rotate.setEasing()">Earsing</button>
  <script>
    Rotate = {
      speed: 4,
      start: function() {
        var elem = document.getElementById('theImage');
        elem.style.animationPlayState = 'running';
      },
      stop: function() {
        var elem = document.getElementById('theImage');
        elem.style.animationPlayState = 'paused';
      },
      setSpeed: function(newSpeed) {
        var elem = document.getElementById('theImage');
        elem.style.animationDuration = newSpeed;
      },
      setEasing: function(newEasing) {
        var elem = document.getElementById('theImage');
        //whatever you want to change
      }
    };
  </script>
</body>

</html>

【讨论】：

谢谢。不幸的是，恐怕我不确定如何使您的代码正常工作。我不知道如何做的方面（让 js 和 CSS 交互）在你的代码中是一种假设——也许它们对你来说似乎很明显。你愿意把它编辑成工作代码吗？也许是一个 JS Fiddle？再次感谢。
当然，这不是完美的代码，我只是想给你一个想法。
非常感谢您的有用回答，我接受并赞成。这是一个很好的例子并且非常有用。我怀疑许多其他人也可能从中受益。
另外，在JS中是否可以获取对象的当前旋转位置？类似于： getPosition: function() { var elem = document.getElementById('theImage'); ?? },
不客气，很高兴我的回答对您有帮助。