JavaScript/Tutorials/Bildwechsler/Animationen steuern

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Einer der Nachteile von CSS-Animation ist das Fehlen von Steuerungsmöglichkeiten. So kann man mit :hover die animation-playstate-Eigenschaft auf paused setzen, mehr aber auch nicht.

Ein komfortabler Bildwechsler sollte auch manuell startbar sein, ohne dass er automatisch nach dem Laden der Seite anläuft. Ebenso soll er auch anhaltbar sein, damit man ihn auf Knopfdruck stoppen kann, und er soll eine Einzelschritt-Funktion (natürlich vorwärts und rückwärts) sowie eine Zufallswiedergabe besitzen. Und selbstverständlich sollte er so robust geschrieben sein, dass eine "Fehlbedienung" ausgeschlossen ist.

Inhaltsverzeichnis

[Bearbeiten] Pausieren bei mouseover

Jede Animation mit der WAAPI ist ein eigenes Animations-Objekt mit Eigenschaften und Methoden, die Sie abrufen und auch setzen können. So können Sie über die Methoden play() eine Animation starten, mit pause() unter- und mit cancel() ganz abbrechen.

Beispiel ansehen …
  var marquee = changer.animate([{
    ...
  });
 
  changer.addEventListener('mouseenter', pauseMarquee, false);
  changer.addEventListener('mouseleave', playMarquee, false);
 
  function playMarquee(){
    if( marquee.playState === 'paused' ) marquee.play();
  }
 
  function pauseMarquee(){
    if( marquee.playState === 'running' ) marquee.pause();
  }
An den Bildwechsler werden mit addEventListener die Funktionen play- bzw. pauseMarquee angehängt. Sie überprüfen den playState der Animation und setzen ihn so, dass die Animation beim Hovern mit der Maus oder Berühren mit Finger pausiert und wenn das Ereignis mouseleave gefeuert wird, wieder aufgenommen wird.

[Bearbeiten] Steuerung mit Tastatur und Maus

[Bearbeiten] HTML des Bedienfelds

Für eine komfortable Steuerung benötigen Sie ein Bedienfeld mit mehreren Kontrollelementen.

Beispiel: Markup der Bedienelemente
<div id="controls">
  <button id="back" aria-label="run animation backwards"></button>
  <button id="play" aria-label="play/pause animation">
    <span class="playing">❙❙</span>
    <span class="pausing"></span>
  </button>
  <button id="forward" aria-label="choose next picture in animation"></button>
</div>
Das Bedienfeld besteht aus drei button-Elementen mit ids. Falls die Unicode-Symbole nicht gelesen werden können, stehen aria-label mit alternativen Erklärungen zur Verfügung.
Der Pause-Button enthält ein weiteres span-Element, das vorerst ausgeblendet ist und beim Pausieren anstelle des bisherigen Inhalts eingeblendet wird ((einem Toggle-Mechanismus)).

[Bearbeiten] Eingaben mit JavaScript verarbeiten

ToDo (weitere ToDos)

Beispiel muss erstellt werden. --Matthias Scharwies (Diskussion) 18:03, 9. Jan. 2017 (CET)

[Bearbeiten] Animationen mit JavaScript steuern

ToDo (weitere ToDos)

Beispiel muss erstellt werden. --Matthias Scharwies (Diskussion) 18:03, 9. Jan. 2017 (CET)


[Bearbeiten] zufällige Bilderreihenfolge

Eine Zufallsauswahl geschieht entgegen ihres Names doch nicht rein zufällig, sondern benötigt eine Wechsellogik, damit Bilder nicht rein zufällig mehrfach hintereinander gezeigt werden. Deshalb wird hier die Methode „Ziehen ohne Zurücklegen“ aus dem Urnenmodell verwendet.[1]

Die ausgegebenen Werte sollen aus der Auswahlmenge verschwinden und erst dann wieder als mögliche Ausgabewerte zur Verfügung stehen, wenn alle Werte der Ausgangsmenge verbraucht sind.

ToDo (weitere ToDos)

Beispiel muss erstellt werden. --Matthias Scharwies (Diskussion) 18:03, 9. Jan. 2017 (CET)


[Bearbeiten] Weblinks

  1. Wikipedia: Urnenmodell
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML