用于旋转图像的 CSS3 动画，参数由 javascript 控制 [英] CSS3 animation for rotation of an image, with parameters controlled by javascript
本文介绍了用于旋转图像的 CSS3 动画，参数由 javascript 控制的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想高效地连续旋转图像——它必须在移动浏览器上流畅运行.我目前正在使用 CSS3 动画.我希望能够使用 javascript 控制 CSS 功能(启动、停止、设置旋转速度、缓解额外功劳).到目前为止，这是我自己做的轮换.需要JS.
I would like to continuously rotate an image efficiently -- it must work smoothly on mobile browsers. I am currently using CSS3 animation. I would like to be able to control the CSS functionality using javascript (start, stop, set rotation speed, easing for extra credit). Here is what I have so far to do the rotation itself. JS needed.
谢谢！
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 () {
}
};
推荐答案
CSS3 动画功能可以通过 javascript 操作，根据您的问题，代码将是这样的.
CSS3 animation functionality can be manipulated by javascript, based on your question the code would be something like this.
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>这篇关于用于旋转图像的 CSS3 动画，参数由 javascript 控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
