Freigeben über

Weiterführende Themen: Erstellen überlappender Animationen

  • Artikel

Die Zeitachsenstruktur in Microsoft Expression Blend ermöglicht das gleichzeitige Ausführen mehrerer Animationszeitachsen in der Anwendung. Im folgenden Verfahren wird das Erstellen einer Animation mit einem Schmetterling gezeigt, der sich fortlaufend im Kreis bewegt, der jedoch mit den Flügeln schlägt, wenn der Benutzer die Maus über den Schmetterling führt.

Cc294767.alert_note(DE-DE,Expression.30).gifHinweis:

Im nachfolgend dargestellten Verfahren werden Auslöser in einem Windows Presentation Foundation (WPF)-Projekt zum Steuern der Storyboards verwendet. Alternative dazu können Sie das ControlStoryboardAction-Verhalten verwenden, um Storyboards zu steuern, entweder in WPF oder in Microsoft Silverlight. Weitere Informationen zum Verwenden eines Verhaltens finden Sie unter Hinzufügen eines Verhaltens zu einem Objekt.

So erstellen Sie überlappende Animationen

  1. Öffnen oder erstellen Sie in Microsoft Expression Blend ein neues Projekt. Weitere Informationen finden Sie unter Erstellt ein neues Projekt.

  2. Wechseln Sie zum Animationsarbeitsbereich. (Mit F6 wechseln Sie zwischen den vorhandenen Arbeitsbereichen. Im Animationsarbeitsbereich befindet sich das Panel Objekte und Zeitachsen unterhalb der Zeichenfläche.)

  3. Falls ein Storyboard geöffnet ist, klicken Sie im Panel Objekte und Zeitachsen auf Storyboard schließen Cc294767.4c066464-3a41-452d-b2e9-e95f6c5659ff(DE-DE,Expression.30).png.

    Cc294767.alert_note(DE-DE,Expression.30).gifHinweis:

    Wenn eine andere Zeitachse als die Standardzeitachse ausgewählt ist, wird bei jeder Eigenschaftenänderung automatisch ein Keyframe für die Zeitachse aufgezeichnet.

  4. Wählen Sie im Werkzeugpanel das Ellipsenwerkzeug Cc294767.d7a04618-e35a-44f9-b78c-1f22e38016c1(DE-DE,Expression.30).png aus. Zeichnen Sie zwei kleine Kreise auf die rechte Seite der Zeichenfläche. Unter der Kategorie Layout des Eigenschaftenpanels können Sie die Werte für die Eigenschaften Height (Höhe) und Width (Breite) angleichen, um exakte Kreise für die Ellipsen zu erhalten. Falls eine Freistellung auftritt, passen Sie die Margin-Eigenschaften an.

  5. Wählen Sie im Werkzeugpanel das Auswahlwerkzeug Cc294767.2ff91340-477e-4efa-a0f7-af20851e4daa(DE-DE,Expression.30).png aus, und schieben Sie die Kreise wie in der folgenden Abbildung näher zusammen:

    Zwei auf die Zeichenfläche gezeichnete Kreise

    Cc294767.9d303fc9-9be5-4904-a740-28ed53f85fdc(DE-DE,Expression.30).png

  6. Wenn Sie beide Kreise gleichzeitig bearbeiten möchten, wählen Sie im Panel Objekte und Zeitachsen einen Kreis und bei gedrückter STRG-TASTE einen zweiten Kreis aus. Klicken Sie dann mit der rechten Maustaste auf die ausgewählten Kreise, wählen Sie Gruppieren in aus, und klicken Sie auf Raster.

    Es wird ein neues Rasterpanel im Panel Objekte und Zeitachsen angezeigt, das die beiden Kreise enthält.

  7. Benennen Sie das Grid-Objekt um, indem Sie mit der rechten Maustaste darauf klicken und dann Umbenennen auswählen. Ändern Sie den Namen in Butterfly.

  8. Verwenden Sie zum Erstellen der Kreisanimation die Option In Animationspfad konvertieren, mit der eine Animationszeitachse aus einem Pfad generiert wird. Zeichnen Sie eine dritte Ellipse in die Mitte der Zeichenfläche, die halb so breit ist wie die Oberfläche der Zeichenfläche.

  9. Die neue Ellipse ist im Panel Objekte und Zeitachsen weiterhin ausgewählt. Wählen Sie im Menü Objekt die Option Pfad aus, und klicken Sie auf In Animationspfad konvertieren.

    Das Dialogfeld Ziel für Animationspfad auswählen wird geöffnet.

  10. Wählen Sie auf der Zeichenfläche aus der Liste der Objekte das Grid-Objekt Butterfly aus, und klicken Sie auf OK.

    Es wird eine neue Zeitachse erstellt. Expression Blend wechselt in den Aufzeichnungsmodus der neuen Zeitachse, sodass Sie auf WiedergabeCc294767.64ad8e84-1eec-4154-9d0c-11fef322c0bf(DE-DE,Expression.30).png klicken können, um die Animation auf der Zeichenfläche anzuzeigen. Das Ziel (der Schmetterling) bewegt sich entlang des Animationspfads, der aus der Ellipse generiert wurde. Beachten Sie Folgendes: Wenn die Fill-Eigenschaft der Ellipse auf einen Pinsel festgelegt ist, werden Teile des Schmetterlings verdeckt.

  11. Die dritte Ellipse wird nicht mehr benötigt und kann gelöscht werden.

  12. Erweitern Sie im Panel Objekte und Zeitachsen die Knoten für die Elemente Butterfly, RenderTransform und Translation, sodass die Zeitspanne für Animationspfad angezeigt wird. Klicken Sie mit der rechten Maustaste auf das Motion Path-Element oder auf die graue Leiste für die Zeitspanne, und klicken Sie auf Anzahl von Wiederholungen bearbeiten.

    Das Dialogfeld Wiederholung bearbeiten wird geöffnet.

  13. Wenn die Zeitachse kontinuierlich wiederholt werden soll, klicken Sie auf Auf kontinuierlich festlegenCc294767.da7f68ed-4aa6-461f-a8e9-10ab93e437e0(DE-DE,Expression.30).png und dann auf OK.

    Die Animation wird nun kontinuierlich wiederholt, wenn sie ausgeführt wird.

  14. Klicken Sie im Panel Objekte und Zeitachsen auf Neu Cc294767.86937695-03dd-44ea-aa30-28d4029b3ad0(DE-DE,Expression.30).png.

    Das Dialogfeld Ressource "Storyboard" erstellen wird geöffnet.

  15. Geben Sie im Feld Ressourcenname (Schlüssel) den Namen Flap ein, und klicken Sie auf OK.

    Expression Blend wechselt in den Zeitachsen-Aufzeichnungsmodus für die neue Zeitachse. Die Position Cc294767.5626c9eb-40bb-450a-9ca1-3678e5abe429(DE-DE,Expression.30).png befindet sich an der 0-Sekunden-Marke. Im Aufzeichnungsmodus wird durch jede Eigenschaft, die Sie festlegen, automatisch ein Keyframe für die Zeitachse aufgezeichnet.

  16. Sie können einen Keyframe an der Sekundenposition 0 festlegen, indem Sie das Grid-Objekt Butterfly auswählen und auf Keyframe aufzeichnenCc294767.e8ec61d4-c8e8-465a-85a7-70bf787a67de(DE-DE,Expression.30).png klicken.

    Ein Keyframe Cc294767.fa3c696d-5463-4000-8a6b-650fe6759bf7(DE-DE,Expression.30).png wird auf der Zeitachse in der Zeile angezeigt, die dem Grid-Objekt Butterfly entspricht.

  17. Ziehen Sie die Position an die 1-Sekunden-Marke, und zeichnen Sie dann einen weiteren Keyframe auf.

    Die Anfangs- und Endposition der Animation sind nun festgelegt.

  18. Ziehen Sie die Position zwischen die vorherigen beiden Keyframes an die 0,5-Sekunden-Marke.

  19. Wählen Sie im Werkzeugpanel das Auswahlwerkzeug aus, und verändern Sie bei gedrückter ALT-TASTE auf der Zeichenfläche die Höhe und Breite des Grid-Objekts Butterfly, sodass es der folgenden Abbildung entspricht.

    Da sich Expression Blend im Aufzeichnungsmodus für die Flap-Animationszeitachse befindet, werden beim Ändern des Grid-Objekts Butterfly neue Keyframes für die Eigenschaften ScaleX und ScaleY des Grid-Objekts an der 0,5-Sekunden-Marke festgelegt.

    Strecken des "Grid"-Objekts auf der Zeichenfläche

    Cc294767.a6857649-160b-446f-b998-a135389a19be(DE-DE,Expression.30).png

  20. Erweitern Sie im Panel Objekte und Zeitachsen die Knoten für das Grid-Objekt Butterfly bis zu den Knoten ScaleX und ScaleY. Wählen Sie nacheinander die Knoten aus, klicken Sie mit der rechten Maustaste auf die Knoten, wählen Sie Anzahl von Wiederholungen bearbeiten aus, und geben Sie dann im Dialogfeld Wiederholung bearbeiten die Zahl 2 ein, um die Zeitachse zweimal auszuführen. Klicken Sie anschließend auf OK.

  21. Klicken Sie auf die Schaltfläche Wiedergabe, um die Animation auf der Zeichenfläche zu testen. Beachten Sie, dass der Wert für die Wiederholung nicht Teil der Wiedergabe auf der Zeichenfläche ist. Wenn Sie die Zeitplanung der Animation anpassen möchten, können Sie die Keyframes auf der grauen Zeitleiste verschieben.

    Cc294767.alert_note(DE-DE,Expression.30).gifHinweis:

    Falls nicht genügend Platz zum Anzeigen der gesamten Zeitachse vorhanden ist, können Sie die Zeitachse mithilfe des Textfelds Zeitachsenzoom verkleinern. Sie können auch die Breite der Panels ändern, um einen größeren Ausschnitt aus dem Panel Objekte und Zeitachsen anzuzeigen.

  22. Jetzt können Sie Auslöser für die Animationen einrichten. Für jede Zeitachse, die im Stamm des Dokuments erstellt wird, wird im Auslöserpanel ein Standardereignisauslöser für das Window.Loaded-Ereignis hinzugefügt. Dieses Ereignis tritt beim Starten der Anwendung auf.

    Sie können diesen Auslöser für die Kreiszeitachse beibehalten und einen neuen Auslöser für die Flap-Zeitachse hinzufügen.

  23. Wählen Sie im Auslöserpanel den Auslöser Window.Loaded aus. Die Aktionen für den Auslöser werden unter Wenn "Window.Loaded" ausgelöst wird angezeigt. Klicken Sie auf das Minuszeichen neben Flap.Begin, um die Aktion zu löschen.

    Die Kreisanimation wird nun weiterhin beim Starten der Anwendung gestartet, die Flap-Animation jedoch nicht.

    Cc294767.alert_note(DE-DE,Expression.30).gifHinweis:

    Möglicherweise müssen Sie die Größe des Auslöserpanels anpassen, um den Abschnitt Eigenschaften wenn aktiv anzuzeigen. Durch Klicken und Ziehen der Rahmen des Panels und des Rahmens innerhalb des Panels können Sie die Größe anpassen.

    Entfernen der Flap-Animation aus dem Window.Loaded-Auslöser

    Cc294767.7f6ed2c1-373a-4bf1-8008-0380917c618d(DE-DE,Expression.30).png

  24. Sie können den Auslöser für die Animation Flap hinzufügen, indem Sie im Auslöserpanel auf Ereignisauslöser hinzufügenCc294767.671c69bb-32e9-4ef9-9837-29403524abd0(DE-DE,Expression.30).png klicken.

    Ein neuer Window.Loaded-Auslöser wird erstellt.

  25. Wählen Sie im Panel Objekte und Zeitachsen das Grid-Objekt Butterfly aus, und verwenden Sie dann im Auslöserpanel die Dropdownlistenfelder, um den neuen Auslöser von Wenn "Window.Loaded" ausgelöst wird in Wenn "Butterfly.MouseEnter" ausgelöst wird zu ändern.

  26. Klicken Sie neben Wenn "Butterfly.MouseEnter" ausgelöst wird auf Neue Aktion hinzufügenCc294767.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(DE-DE,Expression.30).png. Ändern Sie dann im Dropdownfeld die neue Aktion in Flap.Begin.

    Wenn der Benutzer nun den Mauszeiger über den Schmetterling führt, wird die Flap-Animationszeitachse gestartet.

    Erstellen eines neuen Auslösers für das MouseEnter-Ereignis für das "Grid"-Objekt

    Cc294767.c0eee764-9e82-492e-92a8-5540d15c3abe(DE-DE,Expression.30).png

  27. Sie können das Verhalten der soeben erstellten Animationszeitachsen und Ereignisauslöser anzeigen, wenn Sie die Szene testen, indem Sie im Menü Projekt auf Projekt testen klicken.

    Cc294767.alert_note(DE-DE,Expression.30).gifHinweis:

    Falls die Kreisanimation zu schnell ausgeführt wird, können Sie die Ausführungszeit der Zeitachse anpassen. Wählen Sie im Panel Objekte und Zeitachsen die Animationspfad-Zeitachse aus dem Dropdownfeld aus, erweitern Sie die Knoten unter dem Grid-Objekt bis zum Knoten Motion Path, erfassen Sie das rechte Ende der grauen Zeitleiste, und ziehen Sie den Endpunkt nach rechts, um die Zeit zu verlängern.

    Alternativ können Sie die Kreiszeitachse löschen, eine neue Zeitachse erstellen und dann mit Schritt 8 (Zeichnen einer Ellipse) beginnen, um den Animationspfad zu erstellen. (Falls Sie vor Schritt 8 keine neue Zeitachse erstellen, wird die Kreisanimation der Flap-Animationszeitachse hinzugefügt.)