如何使用Javascript平滑地更改无限动画(在CSS3中)的执行时间

Question

我在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:

<span id="someID" class="clockwiseAnimation">sometext</span>

JavaScript的:

var style = document.getElementById("someID").style,
speed = 6; 
//obviously the speed is dynamic within my site (through an `<input type="range">`)
//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";

它暂停然后播放(通过播放我的意思是UNPAUSE不重启)动画,即:

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);

更新:

它的工作原理!但是,它在动画中有一个很大的RANDOM跳跃,这意味着当我用" <input type="range">滑块" 改变"速度"时,元素跳转到一个随机位置(不是动画的开头和结尾只是一个随机位置).

注意:暂停和播放非常流畅,而不会更改动画的"速度".

我的问题:我可以用JavaScript平滑地改变动画的"速度" 吗？(没有跳跃)如果答案是:"在整个动画执行过程中没有办法顺利完成",那么:有没有办法在无限动画的下一次迭代中改变它？如果是这样的话:那么我怎么能告诉它在下一次迭代中开始以及如果我将动画设置为无限,如何知道哪个是下一次迭代(动画的迭代计数属性总是返回"无限" ").

这是一个例子.我希望它有所帮助.

Answer 1

也许 jQueryqueue可以帮助你。

这里是