[英]How to change the execution time of an infinite animation(in CSS3) smoothly with Javascript
I have searched through a lot of questions related to my question in stackoverflow but i haven't found one yet that answers my question with plain JavaScript (not using libraries of any kind). 我在stackoverflow中搜索了很多与我的问题相关的问题,但我还没有找到一个用普通的JavaScript(不使用任何类型的库)来回答我的问题。
My problem is that I have an infinite animation with CSS3 ie: 我的问题是我有一个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); }
}
This animation allows me to spin (clockwise) whatever tag that has the class "clockwiseAnimation". 这个动画允许我旋转(顺时针)任何具有“顺时针旋转”类的标签。
What I want to do is to change the time of execution (I'll call it speed) of the animation with javascript like: 我想做的是用javascript更改动画的执行时间(我称之为速度):
HTML: HTML:
<span id="someID" class="clockwiseAnimation">sometext</span>
JavaScript: 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";
It works when I pause and then play(by play I mean UNPAUSE not restart) the animation, ie: 它暂停然后播放(通过播放我的意思是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);
UPDATED: 更新:
And it works! 它的工作原理! BUT , it has a big RANDOM jump in the animation, meaning that when I change the "speed" with the "
<input type="range">
slider" the element jumps to a random location (not the beginning nor the end of the animation just a random location). 但是 ,它在动画中有一个很大的RANDOM跳跃,这意味着当我用“
<input type="range">
滑块”改变“速度”时,元素会跳转到一个随机位置(不是开头也不是结尾)动画只是一个随机的位置)。
NOTE: Pause and play works very smooth without changing the "speed" of the animation. 注意:暂停和播放非常流畅,而不会更改动画的“速度”。
My question(s): Can I change the "speed" of the animation smoothly WITH JavaScript ? 我的问题:我可以用JavaScript平滑地改变动画的“速度”吗? (WITHOUT the jumping) If the answer is: "There is not a way to do it smoothly throughout the animation execution", then: Is there a way to change it in the next iteration of the infinite animation?
(没有跳跃)如果答案是:“在整个动画执行过程中没有办法顺利完成”,那么:有没有办法在无限动画的下一次迭代中改变它? If so: Then how can I tell it to start in the next iteration and how to know which is the next iteration if I set the animation to infinite (animation-iteration-count property of the element that is doing the animation always returns "infinite").
如果是这样的话:那么我怎么能告诉它在下一次迭代中开始以及如果我将动画设置为无限,如何知道哪个是下一次迭代(动画的迭代计数属性总是返回“无限” “)。
What may be occurring is that the animation-duration
"change" could be "jumping" to the point in the animation
corresponding to the "changed" @keyframes
- based on the total "changed" animation duration.. 可能发生的是
animation-duration
“改变”可以“跳跃”到animation
对应于“改变的” @keyframes
- 基于总的“改变的”动画持续时间。
If the animation-duration
began from
(or 0%
) proceeded to to
(or 100%
), the corresponding @keyframes
"position" may be changed as well. 如果
animation-duration
开始from
(或0%
接着to
(或100%
相应的@keyframes
“位置”也可以被改变。
For example if the original animation-duration
was 4s
(or, 4000ms
) at approximately 2s
(or, 2000ms
), the corresponding keyframes
may be at approximately 50%
, or 例如,如果原始
animation-duration
为4s
(或, 4000ms
)在大约2s
(或2000ms
),相应的keyframes
可以是在大约50%
或
at 2 seconds into 4 second animation 50% { -webkit-transform: rotate(180deg) translateX(150px) rotate(-180deg); }
2秒进4秒动画
50% { -webkit-transform: rotate(180deg) translateX(150px) rotate(-180deg); }
50% { -webkit-transform: rotate(180deg) translateX(150px) rotate(-180deg); }
when the animation-duration
is dynamically changed, the corresponding keyframes
may be "changed" to the matching %
point, or, a larger duration span for the same effect. 当
animation-duration
动态改变时,相应的keyframes
可以“改变”到匹配的%
点,或者相同效果的持续时间跨度更大。 The animated element may appear to go forwards or backwards, or hve a "jumping" due to it re-positioning itself within the "changed" corresponding keyframes
and animations
. 动画元素可能看起来向前或向后,或者由于它将自身重新定位在“已更改”的对应
keyframes
和animations
而“跳跃”。
There is also 1s
setTimeout
function, that may or may not actually have a 1s
duration. 还有
1s
setTimeout
函数,可能实际上也可能没有1s
持续时间。
It may be possible to "smoothly" "jump" to the newly "changed" position within the lengthier animation-duration
the suggested transition
effect or requestAnimationFrame
( http://www.w3.org/TR/animation-timing/ ). 在建议的
transition
效果或requestAnimationFrame
( http://www.w3.org/TR/animation-timing/ )的较长animation-duration
内,可以“平滑地”“跳跃”到新“改变”的位置。
.. ..
Try this: 试试这个:
html HTML
<input type="range" id="speedSlider" min="2000" max="6000" value="4000">
css 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 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";
}
With CSS: http://jsbin.com/UsunIMa/1/ 使用CSS: http : //jsbin.com/UsunIMa/1/
CSS properties transition and animation allow you to pick the easing function. CSS属性转换和动画允许您选择缓动功能。
div {
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
/* or */
animation: clockwise 4s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
使用setTimeout将动画类添加到所需元素,并将动画类删除为回调。
Maybe jQuery queue
could help you. 也许jQuery
queue
可以帮助你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.