0

我尝试使用 WAAPI 创建图像转换器。

有一个图片循环，其中延迟应该增加而 endDelay 减少，但它在迭代中不起作用：

    var changer = document.querySelector( '#gallery' ),
        children = changer.querySelectorAll( 'figure'), 
        aniStartDelay = 0,
        aniDur = 3000,
        aniCombined = (aniStartDelay + aniDur) * (children.length),
        aniEndDelay = aniCombined - (aniDur + aniStartDelay);
    for (var index = 0; index < children.length; index++) {
      children[index].animate([
        { opacity: 0 },
        { opacity: 1 },
        { opacity: 1 },
        { opacity: 0 }
      ], {
        duration: aniDur,
        delay: aniStartDelay,
        endDelay: aniEndDelay,
        iterations: Infinity
      });
      console.log('aniDur: ' + aniDur +', \n aniStartDelay: ' + aniStartDelay + ', \n aniEndDelay: ' + aniEndDelay +'\n\n aniCombined: ' + aniCombined);        
      aniStartDelay = aniStartDelay + aniDur;
      aniEndDelay = aniEndDelay - aniDur;
   }

经过两次迭代后，它似乎只是不规则地闪烁。

我将不胜感激任何与此作斗争的想法。

TIA 马蒂亚斯

4

1 回答 1

0

delay并endDelay在整个迭代集之前和之后应用。迭代之间没有延迟设置。

目前，您最好的选择可能是调整关键帧以通过重复最后一个关键帧并适当设置偏移量来为序列中的第一个动画产生所需的结束延迟效果。delay然后，您可以重用关键帧并为序列中的每个后续动画添加适当的。

也许像下面这样的东西可能会起作用：

var keyframes = [
  { opacity: 0 },
  { opacity: 1, offset: 1 / children.length * 1 / 3 },
  { opacity: 1, offset: 1 / children.length * 2 / 3 },
  { opacity: 0, offset: 1 / children.length },
  { opacity: 0 }
];
for (var index = 0; index <= children.length; index++) {
  children[index].animate(keyframes, { duration: aniDur * children.length,
                                       delay: index * aniDur,
                                       iterations: Infinity });
}

您可以在以下 URL 看到使用 CSS 动画的类似示例（按几次右箭头以查看最终解决方案）：https ://people-mozilla.org/~bbirtles/pres/201511-astro-animation/# /动漫解释

从规范的角度来看，长期的解决方案是添加时序组，让您在动画效果之间添加空白空间。然而，这还有一段时间。添加迭代延迟是一个常见的请求，但还有许多复杂问题尚未解决（例如，在迭代延迟期间使用什么填充模式等）。

于 2017-01-09T07:38:43.340 回答