Я просмотрел множество вопросов, связанных с моим вопросом в stackoverflow, но я еще не нашел один, который отвечает на мой вопрос простым JavaScript (не используя библиотеки любого типа).
Моя проблема в том, что у меня бесконечная анимация с CSS3 i.e.:
.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); }
}
Эта анимация позволяет мне вращать (по часовой стрелке) любой тег, который имеет класс "clockwiseAnimation".
Что я хочу сделать, так это изменить время выполнения (я буду называть его скорость) анимации с помощью 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? (БЕЗ прыжков) Если ответ: "Нельзя сделать это плавно во время выполнения анимации", то: Есть ли способ изменить его в следующей итерации анимации бесконечной? Если так: Затем, как я могу сказать, чтобы начать с следующей итерации, и как узнать, какая следующая итерация, если я настрою анимацию на бесконечность (свойство анимация-итерация-счетчик элемента, который делает анимацию, всегда возвращает "бесконечный" ).
Здесь приведен пример. Я надеюсь, что это поможет.