Share via

Weiterführende Themen: Erstellen überlappender Animationen

  • Artikel

Die Zeitachsenstruktur in 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.

So erstellen Sie überlappende Animationen

  1. Öffnen oder erstellen Sie in Microsoft Expression Blend ein neues Projekt. Weitere Informationen finden Sie unter Erstellen eines neuen Dokuments oder Projekts.

  2. Drücken Sie F6, um zum Animationsarbeitsbereich zu wechseln. (Mit F6 können Sie zwischen dem Designarbeitsbereich und dem Animationsarbeitsbereich wechseln. Im Animationsarbeitsbereich befindet sich das Interaktionspanel unterhalb der Zeichenfläche.)

  3. Wählen Sie unter Objekte und Zeitachsen die Schaltfläche Storyboard schließen Cc294767.4c066464-3a41-452d-b2e9-e95f6c5659ff(de-de,Expression.10).png aus.

    Cc294767.alert_note(de-de,Expression.10).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 in der Werkzeugpalette das Ellipsenwerkzeug Cc294767.d7a04618-e35a-44f9-b78c-1f22e38016c1(de-de,Expression.10).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 in der Werkzeugpalette das Auswahlwerkzeug Cc294767.2ff91340-477e-4efa-a0f7-af20851e4daa(de-de,Expression.10).png aus, und schieben Sie die Kreise näher zusammen (siehe Abbildung unten):

    Zwei auf die Zeichenfläche gezeichnete Kreise

    Cc294767.9d303fc9-9be5-4904-a740-28ed53f85fdc(de-de,Expression.10).png

  6. Wenn Sie beide Kreise gleichzeitig bearbeiten möchten, wählen Sie unter 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 unter Objekte und Zeitachsen angezeigt, das die beiden Kreise enthält.

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

  8. Verwenden Sie zum Erstellen der Kreisanimation die Option In Bewegungspfad 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 unter Objekte und Zeitachsen weiterhin ausgewählt. Wählen Sie im Menü Objekt die Option Pfad aus, und klicken Sie auf In Bewegungspfad konvertieren.

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

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

    Es wird eine neue Zeitachse erstellt. Expression Blend wechselt in den Aufzeichnungsmodus der neuen Zeitachse, sodass Sie auf die Schaltfläche WiedergabeCc294767.64ad8e84-1eec-4154-9d0c-11fef322c0bf(de-de,Expression.10).png klicken können, um die Animation auf der Zeichenfläche anzuzeigen. Das Ziel (der Schmetterling) bewegt sich entlang des Bewegungspfads, 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 unter Objekte und Zeitachsen die Knoten für die Elemente Butterfly, RenderTransform und Translation, sodass die Zeitspanne für Motion Path 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 die Schaltfläche Auf kontinuierlich festlegenCc294767.da7f68ed-4aa6-461f-a8e9-10ab93e437e0(de-de,Expression.10).png, und klicken Sie auf OK.

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

  14. Klicken Sie unter Objekte und Zeitachsen auf die Schaltfläche Neu Cc294767.86937695-03dd-44ea-aa30-28d4029b3ad0(de-de,Expression.10).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.10).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 Butterfly-Rasterelement auswählen und auf die Schaltfläche Keyframe aufzeichnenCc294767.de094a9c-58f2-4466-912a-9bdc18362548(de-de,Expression.10).png klicken.

    Ein Keyframe Cc294767.80da70bb-e635-42e8-b26d-f90453096e21(de-de,Expression.10).png wird auf der Zeitachse in der Zeile angezeigt, die dem Butterfly-Rasterelement 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 in der Werkzeugpalette das Auswahlwerkzeug aus, und verändern Sie bei gedrückter ALT-TASTE auf der Zeichenfläche die Höhe und Breite des Butterfly-Rasterelements, sodass es der Abbildung unten entspricht.

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

    Strecken des Rasters mit Kreisen auf der Zeichenfläche

    Cc294767.a6857649-160b-446f-b998-a135389a19be(de-de,Expression.10).png

  20. Erweitern Sie unter Objekte und Zeitachsen die Knoten für das Butterfly-Rasterelement 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.10).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 unter Auslöser ein Ereignisauslö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 unter Auslöser 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.10).gifHinweis:

    Möglicherweise müssen Sie die Größe des Bereichs Auslöser anpassen, um den Abschnitt Eigenschaften wenn aktiv anzuzeigen. Durch Klicken und Ziehen der Rahmen des Bereichs und des Rahmens innerhalb des Bereichs 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.10).png

  24. Sie können den Auslöser für die Animation Flap hinzufügen, indem Sie unter Auslöser auf die Schaltfläche Ereignisauslöser hinzufügenCc294767.671c69bb-32e9-4ef9-9837-29403524abd0(de-de,Expression.10).png klicken.

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

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

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

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

    Erstellen eines neuen Auslösers für das MouseEnter-Ereignis für das Raster

    Cc294767.c0eee764-9e82-492e-92a8-5540d15c3abe(de-de,Expression.10).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.10).gifHinweis:

    Falls die Kreisanimation zu schnell ausgeführt wird, können Sie die Ausführungszeit der Zeitachse anpassen. Wählen Sie unter Objekte und Zeitachsen die Bewegungspfad-Zeitachse aus dem Dropdownfeld aus, erweitern Sie die Knoten unter dem Raster 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 Bewegungspfad zu erstellen. (Falls Sie vor Schritt 8 keine neue Zeitachse erstellen, wird die Kreisanimation der Flap-Animationszeitachse hinzugefügt.)