Question

我正在尝试使用目前仅适用于Webkit浏览器的Web动画API。可以想象，文档有点稀疏：

我正在尝试做两件事：

在动画结束前的随机时间点反转动画。
错开动画中效果的持续时间。例如，对于3秒的动画，它的第一部分应该是1.25秒，第二部分应该是1.75秒。

这是一个使用Web Animation 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>

Answer 1

关于您的第一个问题，看起来Chrome实现仍然没有反向功能。这与您链接的文档一致。可能在加那利，但我没有检查。

更正：阅读关联博客中的更新，看起来已添加到Chrome中。但是，这对我不起作用......

关于第二个问题，请在第二个关键帧中指定偏移量

如果第一个变换必须运行1.25秒，总共3秒，这是1.25 / 3 = .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>

Web动画API - 不同的动画持续时间？

1 个答案: