HTML and CSS Reference
In-Depth Information
Kapitel 6
Auslesen des Bewegungssensors
mit JavaScript
6
In diesem Kapitel lernen Sie, wie Sie mithilfe von JavaScript den Bewegungssensor des
Mobilgeräts auslesen. Ob iPhone, iPad, Android-Telefon oder Tablet, jedes dieser Ge-
räte verfügt über einen Bewegungssensor, der Informationen über die Orientierung
und Ausrichtung Ihres Geräts liefert. Diese Informationen können Sie nutzen, um z. B.
Elemente zu animieren oder um bestimmte Ereignisse bei einer bestimmten Bewe-
gung aufzurufen. Genau das werden Sie in diesem Kapitel programmieren: Eine
WebApp, die ein Bild einblendet, wenn Sie das Gerät schütteln. Die Inspiration zu die-
ser App kam uns beim lautstarken Mitsingen des Songs »Hey Ya« des amerikanischen
HipHop-Duos Outkast. An einer Stelle im Lied rufen die beiden zu einer Tanzbewe-
gung auf, die das Schütteln eines Polaroid-Bildes imitiert. Sie erinnern sich? Polaroid-
Kameras? Diese klobigen Apparate, bei denen das Foto nach dem Auslösen gleich
vorne aus der Kamera herausschießt und nach einigen Sekunden, geradezu magisch,
das Bild erscheint? Man kann das Entwickeln des Bildes beschleunigen, indem man
das Polaroid schüttelt - im Outkast-Song besungen mit »Shake it like a Polaroid pic-
ture«, was in Ihrem Fall ebenfalls der Name der folgenden App sein wird.
Bevor Sie mit den Vorüberlegungen zur App beginnen, sollten Sie aber zunächst ein-
mal »Hey Ya« gehört haben. Einfach mal bei einem großen Videoportal oder Google
eingeben. Motiviert? Mitgesungen? Sehr gut! Dann kann es losgehen.
Zunächst benötigen Sie ein Foto. Da es per WebApp leider nicht möglich ist, auf die
eingebaute Kamera des Smartphones zuzugreifen, bedienen Sie sich einfach per
Webservice aus dem Fotoportal Flickr.
Die App soll Folgendes können:
Lade ein zufälliges Bild eines Fotografen aus dem Bilderservice Flickr.
Blende das Bild langsam ein, wenn das Gerät geschüttelt wird.
Auf Knopfdruck verschwindet das Bild wieder, und es wird ein neues Bild
eingeblendet.
Auch optisch soll die App an ein Polaroid erinnern.
Search WWH ::




Custom Search