我的问题是我有一个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";
当我暂停播放(播放我的意思是说,不要重新启动),动画,即：
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就是一个例子.我希望它有帮助.
解决方法
如果动画持续时间从(或0％)开始到(或100％),则相应的@keyframes“position”也可以改变.
例如,如果在大约2秒(或2000ms)的原始动画持续时间是4秒(或4000ms),则对应的关键帧可以是大约50％,或者
在2秒内进入4秒动画
50％{-webkit-transform：rotate(180deg)translateX(150px)rotate(-180deg); }
当动画持续时间被动态地改变时,相应的关键帧可能被“改变”到匹配的％点,或者对于相同的效果可能会有更大的持续时间跨度.动画元素可能看起来向前或向后,或者由于将其重新定位在“改变的”对应的关键帧和动画中,因此可能会“跳跃”.
还有1s setTimeout函数,这可能实际上可能没有1s的持续时间.
可能在建议的转换效果或请求动画帧(http://www.w3.org/TR/animation-timing/)的较长的动画持续时间内“平滑地”“跳转”到新的“改变”位置.
..
尝试这个：
HTML
<input type="range" id="speedSlider" min="2000" max="6000" value="4000">
CSS
input {
-webkit-transform: rotate(180deg);
top : 50px;
position : absolute;
}
.clockwiseAnimation {
/* top: 270px;
left: 200px; */
left : 50%;
top : 50%;
position:absolute;
/* css animation (no change) */
}
JS
var speedSlider = document.getElementById("speedSlider");
speedSlider.addEventListener("change",changeSpeed,false);
function changeSpeed(e){
var speed = Math.floor(speedSlider.value);
var element = document.getElementById("span");
var style = element.style;
style.webkitAnimationPlayState = style.mozAnimationPlayState = style.oAnimationPlayState = style.animationPlayState = "paused";
style.webkitAnimationDuration = style.mozAnimationDuration = style.oAnimationDuration = style.animationDuration = String(speed) + "ms";
style.webkitAnimationPlayState = style.mozAnimationPlayState = style.oAnimationPlayState = style.animationPlayState = "running";
}
