Web动画API - 变化的动画持续时间？ [英] Web Animations API - varying animation durations?

问题描述

我正在尝试使用Web Animations API，它目前仅在Webkit浏览器中有效。可以想象，文档有点稀疏：

• 这是我发现的博客帖子


• 这里的规范

我试图做两件事：

• 在随机的时间点动画结束。


• 在动画中交错效果的持续时间。例如，对于3秒动画，它的第一部分应为1.25秒，第二部分应为1.75秒。

这是一个使用Web动画API的工作示例。我担心的是3个动画在3秒内均匀分布。如何在不实例化多个animationPlayer对象的情况下将它们分隔开来？

  $（'。box'）click（function（）{var animationPlayer = this.animate（[{transform：'translateX ）'}，{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。

$ b

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

$ b b

如果第一个变换必须运行1.25秒，总共为3秒，则为1.25 / 3 = .416，因此

    .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>  

I'm experimenting with the Web Animations API which currently works only in Webkit browsers. As one can imagine, the documentation is a bit sparse:

• Here's a blog post I found on it
• Here's the spec

I'm trying to do two things:

• Reverse the animation at a random point in time before the animation ends.
• Stagger the duration of the effects in the animation. For example, for a 3 second animation, the first portion of it should be 1.25s and the second portion should be 1.75s.

Here's a working example which uses the Web Animation API. My concern is that the 3 animations are spaced evenly among the 3 seconds. How can I space them out differently without instantiating multiple animationPlayer objects?

$('.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>

解决方案

About your first question, looks like Chrome implementation still hasn't the reverse function. This is consistent with the documentation that you have linked. May be in Canary, but I haven't checked.

Correction: reading an update in your linked blog, looks like it has been added to Chrome. However, it isn't working for me ...

About your second question, specify an offset in your second keyframe

If the first transform must run for 1.25 s, for a total of 3 s, this is 1.25 / 3 = .416, so

$('.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 - 变化的动画持续时间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！