网络动画API-带延迟/endDelay的图像处理中的定时动画

Question

我试图用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 +'nn aniCombined: ' + aniCombined);        
aniStartDelay = aniStartDelay + aniDur;
aniEndDelay = aniEndDelay - aniDur;
}

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

如果有任何想法与之抗争，我将不胜感激。

TIA Matthias

Answer 1

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天文动画/#/动漫解释

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