Question

我希望不断有效地旋转图像 - 它必须在移动浏览器上顺利运行。我目前正在使用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：TODO

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

Answer 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
    }

<强>更新

＆＃13;

<!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>

＆＃13;

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

1 个答案: