这是一个非常困难的过程。目前唯一更改动画中间状态的方法是使用
setInterval
来近似当前关键帧百分比,保存该关键帧的属性,更新动画(在您的情况下只需更改速度),然后从保存点开始应用新版本的动画。我在为CSS Tricks撰写的文章中创建了一个类似的示例,名为
通过Javascript控制CSS动画和过渡。
正如文章所述,在
animationIteration
上更改速度会更容易,对于您的情况,它看起来像
这个演示,但仍然远非完美。
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();
目前我们无法简单地使用不同的时间函数重新启动动画(即使像Michael说的那样暂停它并再次运行)。因此,您要么必须使用
setInterval
(这会导致更高的延迟),要么克隆具有更改值的元素。有关我使用的方法的更多信息,请查看演示文稿,我已添加了所有添加的javascript的注释。
根据您在评论中提供的链接fiddle进行编辑
由于您正在尝试模拟轮盘赌,因此根本不需要使用javascript!只需将您的
rotation
动画更改为随时间变化的速度即可(:
这是一个粗略版本,但您应该添加更多关键帧,以使其表现比当前更平滑。
@-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
由于你需要似乎需要一个随机的结束位置并且可能需要运行多次,你可以做类似于这样的事情,这更简单,仅使用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来执行非常相似的操作,就像我在此项目中所做的那样以使其更具交互性/动态性。