WebアニメーションAPI - 遅延/終了遅延付きイメージチェンジャーのタイミングアニメーション

Question

WAAPIを使用してイメージチェンジャーを作成しようとしています。

は遅延が増加するとendDelayが減少することになっているloop of picturesありますが、それは反復では動作しません：ちょうど不規則に点滅しているようだ

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; 
    } 

反復の2の後。

私はこれを戦うためのアイデアに感謝したいと思います。

TIAマティアス

Answer 1

delayとendDelay反復のセット全体の前と後に適用されます。反復間の遅延の設定はありません。

ここでは、最後のキーフレームを繰り返してオフセットを適切に設定することで、シーケンスの最初のアニメーションに必要な終了遅延効果を生成するように、キーフレームを調整することをお勧めします。次に、キーフレームを再利用し、シーケンス内の後続の各アニメーションに適切なdelayを追加することができます。

おそらく次のようなものは、うまくいくかもしれない：https://people-mozilla.org/~bbirtles/pres/201511-astro-animation/#/anime-explained

：

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アニメーションを使用して、同様の例を見ることができます

長期的な解決策は、アニメーション効果の間に空のスペースを追加できるタイミンググループを追加することです。しかし、それはしばらくです。反復遅延を追加することは一般的な要求であるが、まだ解決されていない多くの複雑さ（例えば、反復遅延の間にどの充填モードを使用するかなど）がある。