Web Animationen API - Timing Animation im Bildwechsler mit Verzögerung/endDelay

Question

Ich versuche, einen Bild-Changer mit der WAAPI zu erstellen.

Es gibt ein loop of pictures wo Verzögerung sollte erhöhen und endDelay zu verringern, aber es funktioniert nicht in Iterationen:

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

Nach zwei Wiederholungen scheint es nur unregelmäßig flackern.

Ich wäre dankbar für irgendwelche Ideen, um dies zu bekämpfen.

TIA Matthias

Answer 1

delay und endDelay gelten vor und nach der ganzen Reihe von Iterationen. Es gibt keine Einstellung für die Verzögerung zwischen Iterationen.

Jetzt ist es wahrscheinlich am besten, die Keyframes anzupassen, um den gewünschten Endverzögerungs-Effekt für die erste Animation in der Sequenz zu erzeugen, indem Sie den letzten Keyframe wiederholen und den Offset entsprechend einstellen. Anschließend können Sie die Keyframes wiederverwenden und eine geeignete delay für jede nachfolgende Animation in der Sequenz hinzufügen.

Vielleicht so etwas wie die folgenden funktionieren könnte:

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

Sie können ein ähnlichen Beispiele sehen (ein paar Mal Drücken Sie Pfeil rechts die endgültige Lösung sehen) mit Hilfe von CSS-Animationen unter folgenden URL: https://people-mozilla.org/~bbirtles/pres/201511-astro-animation/#/anime-explained

Aus der Sicht der Spezifikation besteht die langfristige Lösung darin, Timing-Gruppen hinzuzufügen, mit denen Sie zwischen Animationseffekten leeren Platz hinzufügen können. Das ist aber eine Weile vorbei. Das Hinzufügen einer Iterationsverzögerung ist eine allgemeine Anforderung, aber es gibt eine Anzahl von Komplikationen, die noch zu lösen sind (z. B. welcher Füllmodus während der Iterationsverzögerung usw. zu verwenden ist).