我正在尝试 Web Animations API，该 API 目前仅适用于 Webkit 浏览器。可以想象，文档有点稀疏：
- 这是我在上面找到的一篇博客文章 http://updates.html5rocks.com/2014/05/Web-Animations---element-animate-is-now-in-Chrome-36
- 这是规格 http://w3c.github.io/web-animations/
我正在尝试做两件事：
- 在动画结束前的随机时间点反转动画。
- 错开动画中效果的持续时间。例如，对于 3 秒的动画，其第一部分应为 1.25 秒，第二部分应为 1.75 秒。
下面是一个使用 Web 动画 API 的工作示例。我担心的是 3 个动画在 3 秒内间隔均匀。如何在不实例化多个animationPlayer对象的情况下以不同的方式间隔它们？
$('.box').click(function() {
var animationPlayer = this.animate([{
transform: 'translateX(0px)'
}, {
transform: 'translateX(600px)'
}, {
transform: 'translate(600px, 200px)'
}], 3000);
animationPlayer.onfinish = function(e) {
console.log('complete!');
}
// wiggle wiggle wiggle
setTimeout(function() {
animationPlayer.reverse();
setTimeout(function() {
animationPlayer.reverse();
}, 250);
}, 750);
});
.box {
background-color: red;
width: 200px;
height: 200px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>
关于你的第一个问题，看来Chrome实现仍然没有反向功能。这与您链接的文档一致。可能在加那利，但我还没有检查过。
更正：在您链接的博客中阅读更新，看起来它已添加到 Chrome 中。然而，它对我不起作用......
关于你的第二个问题，指定第二个关键帧中的偏移量
如果第一个转换必须运行 1.25 秒，总共 3 秒，则为 1.25 / 3 = 0.416，因此
$('.box').click(function() {
var animationPlayer = this.animate([{
transform: 'translateX(0px)'
}, {
transform: 'translateX(600px)', offset: 0.416
}, {
transform: 'translate(600px, 200px)'
}], 3000);
animationPlayer.onfinish = function(e) {
console.log('complete!');
}
// wiggle wiggle wiggle
setTimeout(function() {
animationPlayer.reverse();
setTimeout(function() {
animationPlayer.reverse();
}, 250);
}, 750);
});
.box {
background-color: red;
width: 200px;
height: 200px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
