Auslesen des Bewegungssensors mit JavaScript - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 258

.polaroid-rahmen.sichtbar {
margin-top: 0;
}
Gut! Jetzt widmen Sie sich dem JavaScript, um das Polaroid einfliegen zu lassen.
2. Die neue Funktion polaroidweg()
Nehmen Sie nun an, der Benutzer hat bereits ein Polaroid geladen und erfolgreich
durch eine Schüttelgeste das Bild eingeblendet. Würde er nun erneut auf den Button
drücken, dann würde das zurzeit angezeigte Polaroid plötzlich verschwinden. Zum
einen sehr unschön, zum anderen für den Benutzer undurchsichtig. Es könnte ihm
wie ein Programmfehler vorkommen. Sie haben bereits gelernt, dass Animationen
dem Benutzer helfen können, eine Oberfläche besser zu verstehen. Dies ist auch hier
der Fall. Der Benutzer begreift durch die Animation, was gerade passiert.
Mit der Funktion polaroidweg() erreichen Sie im Wesentlichen drei Dinge:
1. Sie blenden das Bild wieder aus, damit es beim nächsten Polaroid durch die Schüt-
telgeste wieder eingeblendet wird:
//Altes Polaroid verschwinden lassen
var polaroidweg = function() {
$('.flickr-bild').toggleClass('sichtbar');
};
2. Sie lassen ebenfalls das Polaroid wieder aus dem Bildschirm fliegen, so dass es
beim Aufrufen der Funktion neuespolaroid() wieder eingeflogen werden kann:
//Altes Polaroid verschwinden lassen
var polaroidweg = function() {
$('.flickr-bild').toggleClass('sichtbar');
$('.polaroid-rahmen').toggleClass('sichtbar');
};
Da Sie die Animationszeit des rausfliegenden Polaroids auf eine Sekunde gesetzt
haben ( -webkit-transition: all 1s ease-in-out ), warten Sie nun, bis die Animation
abgeschlossen ist, und führen dann erneut die Funktion neuespolaroid() aus. Dies
erreichen Sie mit dem JavaScript-Befehl setTimeout . Dabei geben Sie die Zeit in Milli-
sekunden sowie die auszuführende Funktion an:
//Altes Polaroid verschwinden lassen
var polaroidweg = function() {
$('.flickr-bild').toggleClass('sichtbar');
$('.polaroid-rahmen').toggleClass('sichtbar');