Erstellen einer einfachen Animation in Blend

Dieser Artikel ist ein Gastbeitrag von Kalle. Viele Programme lassen sich durch bewegte Elemente sinnvoll ergänzen oder bekommen auch erst durch Animationen einen Sinn. In Blend1 lassen sich solche Animationen sehr einfach erstellen und auch in die eigene App einbinden. Als Beispiel betrachte ich hier meine App zum Werfen einer Münze, welche auch im Windows Phone Store zur Verfügung steht. Die Animation besteht hier wie zu erwarten in der Simulation des Münzwurfs, also einer Bewegung nach oben und wieder nach unten kombiniert mit einem Wirbel um die x-Achse der Münze.

Hier erst mal eine Übersicht über die Blend-Oberfläche:

BlendOverView

Übersicht über die Blend-Oberfläche

In der Mitte hat man eine große Design-Ansicht des Programms, auf der linken Seite findet sich eine Übersicht aller Elemente im Projekt und auch eine Werkzeugleiste, um weitere Elemente hinzuzufügen. Die rechte Seite wird hier von den Eigenschaften des ausgewählten Elements ausgefüllt.

In Blend werden Animationen mit so genannten Storyboards organisiert, ein Storyboard beinhaltet eine Zeitleiste mit deren Hilfe die Eigenschaften von Objekten zu verschiedenen Zeitpunkten festgelegt werden können. Um eine neue Animation zu erstellen drückt man zunächst auf die + Schaltfläche über dem „Objects and Timelines„-Feld. Die erste Animation soll TossRed heißen und für den Wurf mit dem Ergebnis „rot“ stehen.

AddStoryBoard

neues Storyboard erstellen

Jetzt kommt es zur tatsächlichen Animation. Zuerst muss auf der Zeitleiste mit einem einfachen Links-Klick der gewünschte Zeitpunkt ausgewählt werden, danach das Objekt, das bewegt werden soll (in diesem Fall die Ellipse). Auf der rechten Seite werden dann die Eigenschaften der Ellipse angezeigt, hierbei ist zu beachten dass in diesem Modus alle Eigenschaften in Abhängigkeit zum gewählten Zeitpunkt stehen. Für dieses Beispiel werden drei Eigenschaften geändert, die Farbe, die Position und der Winkel um die x-Achse. Die Eigenschaften unter Transform zeichnen sich dadurch aus, das die Werte sich über die Zeit ändern, so dass die Bewegungen flüssig aussehen.

TimeLine1

Zeitleiste der Ellipse

Damit die Münze schön schnell durch die Luft wirbelt habe ich auf der Zeitleiste innerhalb der ersten Sekunde 10 Marker gesetzt, alle im Abstand von 0,1 Sekunden. Dabei wird die Münze immer um 90° gedreht. Die Farbe wechselt immer wenn die Münze gerade von der Seite zu sehen ist, um darauf folgend die andere Seite/Farbe zu zeigen. Damit ist die Animation der wirbelnden Münze an sich schon fast fertig, aber damit sich die Münze nicht nur dreht sondern auch nach oben hüpft kommt noch eine zweite Bewegung dazu. Dafür markiere ich den Marker auf der Zeitleiste bei 0,5 Sekunden und setze die Translate-Y-Eigenschaft auf -200 und bei 1 Sekunde wieder auf 0. So bewegt sich die Münze innerhalb der Sekunde 200 Pixel nach oben und wieder zurück.

Im XAML-Code wurde dadurch folgendes generiert:

Das sieht zwar auf den ersten Blick nach recht viel Code aus, aber eigentlich ist dieser sehr übersichtlich. Im ersten Abschnitt wird die Drehung realisiert, danach kommt der Farbwechsel und zuletzt kommt noch die vertikale Bewegung. Da wir auch noch eine zweite Animation brauchen, für den Fall das die Münze mit der blauen Seite nach oben landet, muss auch diese noch angelegt werden. Man könnte jetzt entweder genau so wie bei der ersten Animation vorgehen und alles zusammenklicken oder man kopiert einfach den XAML-Code und fügt im Code direkt ein neues Storyboard ein. Dabei muss man dann nur noch den Namen für das Storyboard ändern und den Farbwechsel anpassen sodass am Ende die blaue Seite oben liegt:

Um das Programm vollständig zu machen, fehlt jetzt nur noch die Anbindung der Animation an eine Aktion. Hierfür nehme ich die Funktion die an den Button gebunden ist, das jeweilige Storyboard lässt sich direkt über den gewählten Namen ansprechen und mit dem Methoden-Aufruf Begin() ausführen.

So das war es schon. Hier gibt es noch mal den kompletten Code:

  CoinToss - Anwendung (64,0 KiB)

 

Und wer will kann sich das ganze auch direkt auf sein WP8 Handy laden:

Die App konnte im App Store nicht gefunden werden. 🙁 #wpappbox

Links: → Store öffnen → Google-Suche

 

 

  1. Expression Blend ist ein kostenloses Tool aus dem Hause Microsoft, welches automatisch für Visual Studio Express mitinstalliert wird. []

Das könnte dich auch interessieren...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.