我有动画:
img.rotate {
animation-name: rotate;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
我有无限的旋转图像。现在我想用JS改变旋转速度。我试过了:
$('img').css('animation-duration', '2s');
持续时间会改变速度,但动画会重新启动到帧密钥0%(第一个),但我只想让动画继续,就像什么都没发生一样;我不想回到0%。
我该怎么做?
答案 0 :(得分:10)
这是一个非常困难的过程。目前,更改动画中动画的唯一方法是使用setInterval
来近似当前关键帧百分比,保存该关键帧的属性,更新动画(在您的情况下只是速度)然后应用新版本从保存点开始的动画。我在为CSS Tricks编写的文章中创建了一个类似的例子,名为Controlling CSS Animations & Transitions with Javascript
正如文章所描述的那样,更改animationIteration
的速度会更容易,在您的情况下看起来像this demo,但它仍然远非漂亮
var pfx = ["webkit", "moz", "MS", "o", ""],
rotates = $('.rotate'),
prevent = false;
function PrefixedEvent(element, type, callback) {
for (var p = 0; p < pfx.length; p++) {
if (!pfx[p]) type = type.toLowerCase();
element.addEventListener(pfx[p]+type, callback, false);
}
}
function listen() {
for(var i = 0, j = rotates.length; i < j; i ++) {
PrefixedEvent(rotates[i], "AnimationIteration", function() {
if(!$('#faster').is(':checked') && !prevent) {
var el = $(this),
newOne = el.clone(true)
.css({'animation':'rotate 2s linear infinite'});
el.before(newOne);
$("." + el.attr("class") + ":last").remove();
rotates = $('.rotate');
listen();
prevent = true;
}
else if($('#faster').is(':checked') && prevent) {
prevent = false;
var el = $(this),
newOne = el.clone(true)
.css({'animation':'rotate 1.5s linear infinite'});
el.before(newOne);
$("." + el.attr("class") + ":last").remove();
rotates = $('.rotate');
listen();
}
});
}
}
listen();
目前我们不能简单地使用不同的计时功能重新启动动画(即使你暂停它并像迈克尔所说的那样再次运行)。因此,您必须使用setInterval
(提供更高的延迟)或使用更改的值克隆元素。有关我使用的方法的更多信息,请参阅演示,我在所添加的所有javascript中添加了注释
编辑基于您在评论中链接的小提琴
由于您正在尝试模拟轮盘赌,因此您根本不需要使用javascript!只需更改rotation
动画即可随时间更改速度(Here's an rough version如何执行此操作,但您应添加更多关键帧以使其看起来比目前的行为更平滑
@-webkit-keyframes rotate {
0% { -webkit-transform: rotate( 0deg); }
30% { -webkit-transform: rotate(2600deg); }
60% { -webkit-transform: rotate(4000deg); }
80% { -webkit-transform: rotate(4500deg); }
100% { -webkit-transform: rotate(4780deg); }
}
编辑2
由于您显然需要一个随机结束位置并可能多次运行它,您可以something like this更简单,只使用CSS变换,并且非常有用
var img = document.querySelector('img');
img.addEventListener('click', onClick, false);
var deg = 0;
function onClick() {
this.removeAttribute('style');
deg += 5 * Math.abs(Math.round(Math.random() * 500));
var css = '-webkit-transform: rotate(' + deg + 'deg);';
this.setAttribute(
'style', css
);
}
和CSS
img { -webkit-transition: -webkit-transform 2s ease-out; }
编辑3
这不是完全相关或不相关的,但您可以使用GSAP之类的I did in this project来完成非常类似的事情,以使其更具互动性/动态性
答案 1 :(得分:1)
你可以通过设置包装器并反转它来实现。
CSS
.wrapper, .inner {
position: absolute;
width: 100px;
height: 100px;
-webkit-animation-name: rotate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.wrapper {
left: 40px;
top: 40px;
-webkit-animation-duration: 2.5s;
-webkit-animation-play-state: paused;
-webkit-animation-direction: reverse;
animation-duration: 2.5s;
animation-play-state: paused;
animation-direction: reverse;
}
.wrapper:hover {
-webkit-animation-play-state: running;
animation-play-state: running;
}
.inner {
display: block;
background-color: red;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
(悬停在广场上以减慢它)