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

2回繰り返した後、不規則にちらつくようです。

これと戦うためのアイデアに感謝します。

ティア・マティアス

4

1 に答える 1

0

delayendDelay反復セット全体の前後に適用します。反復間の遅延の設定はありません。

現時点では、最後のキーフレームを繰り返してオフセットを適切に設定することにより、キーフレームを調整して、シーケンスの最初のアニメーションに必要な終了遅延効果を生成することをお勧めします。次に、キーフレームを再利用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/~bvirtles/pres/201511-astro-animation/# /アニメ説明

仕様の観点から言えば、長期的な解決策は、タイミング グループを追加して、アニメーション効果の間に空白を追加できるようにすることです。ただし、それはしばらくの間です。反復遅延を追加することは一般的な要求ですが、まだ解決されていない複雑な問題がいくつかあります (たとえば、反復遅延中に使用する塗りつぶしモードなど)。

于 2017-01-09T07:38:43.340 に答える