Animation der Geschenke

Sebastian Stock

Wenn der Benutzer im Augmented Reality Modus ein Geschenk anklickt, um dieses einzusammeln, wird dessen Inhalt mit Hilfe einer Animation angezeigt. Der Gegenstand, der sich in ihm befindet, wird zunächst größer und bewegt sich dann in das Inventar in der Statusleiste, wobei er wieder kleiner wird. So soll dem Benutzer deutlich gemacht werden, dass dieser Gegenstand nun eingesammelt wurde und im Inventar darauf zugegriffen werden kann.

Zum Anzeigen der Gegenstände wird eine ImageView verwendet. Dies ist eine einfache View zur Darstellung von Bildern. Die Sichtbarkeit wird zunächst auf unsichtbar gesetzt. Unter Android können Views mit der Klasse Animation zweidimensional animiert werden 1. Wie so häufig unter Android können auch Animationen in XML oder Java geschrieben werden. Folgendes Beispiel zeigt die in XML definierte Animation für das Einsammeln eines Geschenkes:

<set xmlns:android="http://schemas.android.com/apk/res/android" 
android:interpolator="@android:anim/accelerate_interpolator">
 
   <scale 
         android:fromXScale="0.5"
         android:toXScale="1"
         android:fromYScale="0.5"
         android:toYScale="1"
         android:duration="1000"
         android:pivotX="50%"
         android:pivotY="50%"
         android:startOffset="0000" />
 
   <scale 
         android:fromXScale="1"
         android:toXScale="0.2"
         android:fromYScale="1"
         android:toYScale="0.2"
         android:duration="2000"
         android:pivotX="50%"
         android:pivotY="50%"
         android:startOffset="1000" />
 
   <translate
         android:interpolator="@android:anim/accelerate_interpolator"
         android:fromXDelta="0"
         android:toXDelta="18%"
         android:fromYDelta="00%"
         android:toYDelta="-40%"
         android:duration="3000"
         android:startOffset="1000"
         android:fillBefore="false"
	 android:fillAfter="false"  
	/>
</set>

Drei Teilanimatonen - zwei Skalierungen und eine Translation - werden hier mit dem Element <set> zu einer Animation zusammengefasst. Die erste Skalierung vergrößert das Bild. Dazu wird es beim Start um den Faktor 0.5 verkleinert und nimmt am Ende wieder seine volle Größe ein. Mit der zweiten Skalierung wird das Bild wieder auf den Faktor 0.2 verkleinert, sodass es in etwa der Größe der Buttons in der Statusleiste entspricht und so angedeutet werden kann, dass es im Inventar verschwindet. Dazu muss allerdings noch mit dem <translate>-Element eine Bewegung des Bildes durchgeführt werden. Deren Ziel lässt sich mit den Attributen android:toXDelta bzw. android:toYDelta angeben und wurde so gewählt, dass die Animation auf dem Inventar-Button in der Statusleiste endet. Damit allerdings nicht alle Teilanimationen gleichzeitig ausgeführt werden, kann jeweils mit android:duration die Dauer in Millisekunden und mit android:startOffset eine Verzögerung angegeben werden. So wird zunächst die Vergrößerung durchgeführt, welche eine Sekunde dauert. Anschließend wird das Bild drei Sekunden lang gleichzeitig verschoben und verkleinert. Mit dem Attribut android:interpolator kann zusätzlich noch die Geschwindigkeit beeinflusst werden. Mit dem hier verwendeten AccelerateInterpolator beginnt die Animation langsam und wird dann schneller. Die in der Datei gift_animation.xml im Ressource-Ordner res/anim definierte Animation kann mit folgendem Aufruf aus den Ressourcen geladen werden:

Animation anim = AnimationUtils.loadAnimation( context, R.anim.gift_animation );

Wenn im Augmented Reality Modus ein Geschenk angeklickt wird, muss zunächst in der ImageView das dazugehörige Bild gesetzt werden, da nur eine ImageView verwendet wird, aber sechs unterschiedliche Gegenstände und somit auch Bilder vorhanden sind. Die unterschiedlichen Gegenstände und ihre Bilder sind im Kapitel Spielanleitung unter dem Punkt Inventar, Chat, High-Score aufgeführt. Das Starten der Animation wird dann folgendermaßen vorgenommen, wobei davor und danach noch die Sichtbarkeiten angepasst werden müssen:

imageView.setVisibility(View.VISIBLE);
imageView.startAnimation(animation);
imageView.setVisibility(View.GONE);

Die folgenden drei Bilder zeigen Ausschnitte aus der Animation eines Gegenstandes. In dem linken Bild ist der Gegenstand direkt nach dem Start der Animation noch relativ klein und erreicht in dem mittleren Bild seine maximale Größe. Auf dem rechten Bild sieht man wie der Gegenstand schließlich wieder verkleinert wird und sich in Richtung des Inventars bewegt.

Abb. 1: Start der Animation.

Abb. 2: Vergrößerung des Bildes.

Abb. 3: Translation in Richtung des Inventars.


1 http://developer.android.com/guide/topics/graphics/view-animation.html


Page last modified on March 21, 2011, at 05:33 PM