我在stackoverflow中搜索了很多有关我的问题的问题,但是我还没有找到一个解答我的问题的简单
JavaScript(不使用任何类型的库).
我的问题是我有一个CSS3的无限动画,即:
.clockwiseAnimation {
top: 270px;
left: 200px;
position: absolute;
-webkit-animation: clockwise 4s linear infinite; /* Chrome,Safari 5 */
-moz-animation: clockwise 4s linear infinite; /* Firefox 5-15 */
-o-animation: clockwise 4s linear infinite; /* Opera 12+ */
animation: clockwise 4s linear infinite; /* Chrome,Firefox 16+,IE 10+,Safari 5 */
}
@-webkit-keyframes clockwise {
from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
@-moz-keyframes clockwise {
from { -moz-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -moz-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
@-o-keyframes clockwise {
from { -o-transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { -o-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
@keyframes clockwise {
from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
这个动画允许我旋转(顺时针)任何具有类“顺时针方向”的标签.
我想做的是用javascript改变动画的执行时间(我称之为速度)
HTML:
sometext
JavaScript的:
var style = document.getElementById("someID").style,speed = 6;
//obvIoUsly the speed is dynamic within my site (through an ``)
//for the purposes of this example I set the speed to a different value(6seconds) than the original value(4seconds).
style.webkitAnimationDuration = style.mozAnimationDuration = style.oAnimationDuration = style.animationDuration = speed + "s";
当我暂停播放(播放我的意思是说,不要重新启动),动画,即:
var style = document.getElementById("someID").style;
some = 6; //it is dynamic (as I pointed out before)
//pause
style.webkitAnimationPlayState = style.mozAnimationPlayState = style.oAnimationPlayState = style.animationPlayState = "paused";
//change speed
style.webkitAnimationDuration = style.mozAnimationDuration = style.oAnimationDuration = style.animationDuration = speed + "s";
//play (== UNPAUSE) //UPDATE: Added the timeout because I can't get it to work any other way.
setTimeout(function(){
style.webkitAnimationPlayState = style.mozAnimationPlayState = style.oAnimationPlayState = style.animationPlayState = "running";
},1);
更新:
它的工作原理但是,它在动画中有一个大的随机跳转,这意味着当我用“< input type =”范围“> slider”更改“速度”时,元素跳转到随机位置(而不是开始和结束)的动画只是一个随机的位置).
注意:暂停和播放功能非常流畅,而不改变动画的“速度”.
我的问题:我可以使用JavaScript来平滑改变动画的“速度”吗? (没跳)
如果答案是:“在整个动画执行过程中没有办法顺利进行”,那么:
有没有办法在无限动画的下一次迭代中改变它?
如果是这样:
那么我如何告诉它在下一次迭代中开始,以及如何将动画设置为无限(如果动画的动画迭代计数属性总是返回“无限”),那么下一个迭代是什么呢?
Here就是一个例子.我希望它有帮助.