Freigeben über


Animationen (Übersicht)

Mit einer Animation wird eine Illusion geschaffen, die durch die rasche Abfolge einer Reihe von Bildern erzeugt wird, wobei jedes Bild sich etwas vom vorherigen Bild unterscheidet. Die Abfolge von Bildern wird vom Gehirn als einzelne, sich ändernde Szene wahrgenommen. Im Film wird diese Illusion durch eine Kamera erzeugt, die eine Vielzahl von Fotos, oder Frames, pro Sekunde aufzeichnet. Bei der Wiedergabe der Frames in einem Projektor sieht das Publikum ein bewegtes Bild. Eine Computeranimation ist ähnlich, allerdings können hier die aufgezeichneten Frames zeitlich weiter auseinander liegen, da die Änderungen zwischen den Frames vom Computer interpoliert und animiert werden.

Wie funktionieren Animationen in Expression Blend?

In Microsoft Expression Blend basieren Animationen auf Keyframes, die die Anfangs- und Endpunkte eines weichen visuellen Übergangs definieren. Zum Erstellen einer Animation in Expression Blend erstellen Sie ein Storyboard. In diesem Storyboard legen Sie Keyframes auf einer Zeitachse fest, um Änderungen von Eigenschaften zu markieren. Sie könnten z. B. einen Keyframe an der 0-Sekunden-Marke festlegen, um die Position eines Rechtecks auf der linken Seite der Zeichenfläche aufzuzeichnen. Anschließend könnten Sie einen Keyframe an der 1-Sekunden-Marke festlegen, um die Position desselben Rechtecks auf der rechten Seite der Zeichenfläche aufzuzeichnen. Die entstehende Animation würde dann auf der Transformation basieren, die in den X- und Y-Eigenschaften des Rechtecks in 1 Sekunde auftritt. Wenn Sie ein Animationsstoryboard ausführen, werden die Eigenschaftenänderungen von Expression Blend über die festgelegte Zeitdauer interpoliert, und die Ergebnisse werden in der Anwendung angezeigt. Auf dieses Weise kann jede Eigenschaft animiert werden, die zu einem Objekt auf der Zeichenfläche gehört. Dies gilt auch für nicht visuelle Eigenschaften.

Keyframes auf der Zeitachse eines Storyboards namens "MoveRight", die Eigenschaftenänderungen in den Translationeigenschaften "X" und "Y" eines Rechteckobjekts markieren

Cc295346.982f031a-74a3-414a-abc2-a0f41a741075(de-de,Expression.10).png

In einigen Computeranimationsprogrammen können Sie Animationen Frame für Frame erstellen, d. h., dass jeder Frame ein anderes Bild (oder Objekt) enthalten kann. Diese Animationen können sehr umfangreich und zur Laufzeit sehr ressourcenintensiv sein. Aus diesem Grund basieren Expression Blend-Animationen auf Keyframes, die Eigenschaftenänderungen aufzeichnen, sodass der Übergang zwischen Eigenschaftenänderungen zur Laufzeit animiert wird. Darüber hinaus sind in Expression Blend alle Objekte, die Sie möglicherweise während einer Animationszeitachse anzeigen oder ausblenden möchten, während der gesamten Zeitachse vorhanden. Sie können jedoch Keyframes verwenden, um die Sichtbarkeitseigenschaften zu ändern und die Objekte anzuzeigen oder ausblenden.

Cc295346.alert_note(de-de,Expression.10).gifHinweis:

Das spontane Erstellen neuer Objekte in einem Storyboard ist in Expression Blend zwar nicht möglich, Sie können neue Objekte und neue Animationsstoryboards jedoch programmgesteuert in Code-Behind-Dateien generieren. Weitere Informationen finden Sie in den Themen zu Animation und Timing im Abschnitt zu Windows Presentation Foundation von MSDN (möglicherweise in englischer Sprache).

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Storyboards

Storyboards sind Container, die Animationzeitachsen enthalten. Expression Blend 2 enthält ein neues Steuerelement, die Storyboardauswahl, über das Sie Storyboards auswählen und nach Storyboards in Ihrem Projekt suchen können. Weitere Informationen finden Sie unter Öffnen oder Schließen eines Storyboards.

Über die Storyboardauswahlliste können mehrere Storyboards geöffnet werden

Cc295346.d13d140b-75cf-48f7-a3fa-bdfbd3e62db5(de-de,Expression.10).png

Ebenfalls neu in Expression Blend 2 ist ein Popupmenü, über das Sie das aktuell ausgewählte Storyboard duplizieren, umkehren, löschen, umbenennen oder schließen oder ein neues Storyboard erstellen können. Weitere Informationen finden Sie unter Duplizieren oder Umkehren von Storyboards und Umbenennen von Storyboards.

Das Storyboard-Popupmenü

Cc295346.74b1f5aa-10f5-40fc-b786-c9de76cb87ca(de-de,Expression.10).png

Sie können Eigenschaften für Storyboards festlegen, sodass sie automatisch umgekehrt oder wiederholt werden, wenn das Ende ihrer letzten Zeitachse erreicht ist. Weitere Informationen finden Sie unter Einstellen der Wiederholung oder Umkehrung von Storyboards am Ende des Zyklus.

Storyboards können an den folgenden Stellen (oder in den folgenden Bereichen) der Anwendung erstellt werden:

  • Im Hauptteil des Dokuments  Falls in der Anwendung eine Animation präsentiert werden soll oder falls Sie die Animation nicht an einer anderen Stelle wiederverwenden müssen, können Sie die Animationszeitachsen im Hauptteil des Dokuments erstellen. Ein Beispiel finden Sie unter Erstellen einer einfachen Animation.

  • In einer Szene oder einem Benutzersteuerelement  Falls Sie eine Animation mehrmals in einem einzelnen Dokument oder in einer anderen Anwendung verwenden müssen, können Sie die Animationszeitachsen in einem Benutzersteuerelement erstellen. Dies ist auch nützlich, wenn Sie die Animationen auf verschiedene Dokumente oder Projekte verteilen möchten. Steuerelemente können der Zeichenfläche wie jedes andere Steuerelement (wie z. B. eine Schaltfläche) hinzugefügt werden. Weitere Informationen finden Sie im folgenden Abschnitt Scenes. Ein Beispiel finden Sie unter Weiterführende Themen: Erstellen von WPF-Benutzersteuerelementen und Erstellen eines neuen Benutzersteuerelements in einem Silverlight 2-Projekt.

  • In der Vorlage eines Steuerelements  Falls alle Steuerelemente eines bestimmten Typs (z. B. Schaltflächen) in der Anwendung auf die gleiche Art animiert werden sollen, können Sie die Animation in der Vorlage des Steuerelements erstellen. Dies bedeutet nicht, dass alle Steuerelemente gleich aussehen müssen. Wenn Sie eine Vorlagenbindung verwenden (mit der eine Eigenschaft in der Vorlage an eine Eigenschaft in dem Steuerelement gebunden wird, auf das die Vorlage angewendet wird), kann jedes Steuerelement eine andere Farbe oder eine andere grafische Darstellung in der Animation aufweisen. Weitere Informationen finden Sie unter Steuerelemente (Übersicht). Ein Beispiel für WPF finden Sie unter Weiterführende Themen: Hinzufügen einer Animation zu einer Schaltfläche.

Storyboards können mithilfe von Triggern gesteuert (gestartet, beendet, angehalten) werden, die für Objekte (nur Windows Presentation Foundation-Projekte) festgelegt werden, oder aber mithilfe von Ereignishandlern. Weitere Informationen finden Sie unter Steuern des Startzeitpunkts eines Storyboards und Erstellen einer Schaltfläche zur Steuerung eines Storyboards in einer Silverlight-Anwendung.

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Zeitachsen

Zeitachsen bieten eine Struktur für die Animationssequenzen in der Anwendung. Eine Animation in Expression Blend besteht aus einer Zeitachse, auf der Sie Keyframes aufzeichnen. Die Keyframes geben die Zeitplanung für Eigenschaftenänderungen an. Sie können sich Zeitachsen als die Ebenen von Eigenschaftenänderungen vorstellen, die auf Objekte auf der Zeichenfläche angewendet werden. Zeitachsen sind in storyboards enthalten.

Für die Arbeit mit Animationszeitachsen verwenden Sie den Abschnitt Objekte und Zeitachsen des Interaktionspanels (eine Roadmap finden Sie unter Interaktionspanel). Mit den Steuerelementen in diesem Panel können Sie die Zeichenfläche anzeigen, während sie sich über einen Zeitraum ändert, Sie können neue Zeitachsen hinzufügen, Zeitachsen ändern und vieles mehr.

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Keyframes

Ein KeyframeCc295346.80da70bb-e635-42e8-b26d-f90453096e21(de-de,Expression.10).png ist ein Marker auf der Zeitachse, der den Zeitpunkt einer Eigenschaftänderung anzeigt. in Expression Blend stehen die folgenden vier Keyframetypen zur Verfügung:

  • Keyframes auf Objektebene  Diese werden auf ganze Objekte angewendet, z. B. auf ein Rectangle- oder ein Grid-Objekt, das mehrere Objekte enthält. Wenn ein Keyframe auf Objektebene nicht manuell durch Klicken auf die Schaltfläche Keyframe aufzeichnen festgelegt wurde, gibt er in der Regel an, dass eine Eigenschaft in einem untergeordneten Objekt geändert wurde. Dies können Sie anzeigen, wenn Sie die Knoten unter dem Objekt erweitern. In der vorherigen Abbildung (unter How does animation work in Expression Blend?) handelt es sich bei dem Keyframe, der in der Zeile der Zeitachse festgelegt wurde, die dem Rectangle-Objekt entspricht, um einen Keyframe auf Objektebene.

  • Zusammengesetzte Keyframes  Mit diesen wird angezeigt, dass die Eigenschaft untergeordnete Eigenschaften besitzt, die animiert werden. In der vorherigen Abbildung handelt es sich bei dem Keyframe, der in der Zeile der Zeitachse festgelegt wurde, die der Translate-Eigenschaft (Translation) entspricht, um einen zusammengesetzten Keyframe. Sie können zusammengesetzte Keyframes verwenden, um große Gruppen von Eigenschaften gleichzeitig mit einer einzigen Auswahl zu ändern, z. B. beim Verschieben von Keyframes entlang der Zeitachse.

  • Einfache Keyframes  Diese stellen eine einzelne Eigenschaftenänderung zum betreffenden Zeitpunkt dar. In der vorherigen Abbildung handelt es sich bei den Keyframes, die in der Zeile der Zeitachse festgelegt wurden, die der X- und der Y-Eigenschaft entspricht, um einfache Keyframes. Sie müssen einfache Keyframes für bestimmte Aktionen verwenden, z. B. zum Bearbeiten der Anzahl von Wiederholungen für eine Animation. Ein Beispiel finden Sie unter Festlegen der Schleifendauer.

  • Implizite Keyframes  Diese sind vorhanden, wenn eine Animation durch eine andere unterbrochen wird und für die zweite Animation kein Keyframe an der 0-Sekunden-Marke festgelegt ist. Zum Zeitpunkt der Unterbrechung wird die Änderung zwischen dem letzten bekannten Wert einer Eigenschaft und dem Wert, der im ersten Keyframe der zweiten Animation festgelegt ist, von Expression Blend animiert. Der letzte bekannte Wert wird als impliziter Keyframe betrachtet, auch wenn der Wert zwischen zwei Keyframes der ersten Animation liegt. Dieser Übergang wird als Übergabeanimation bezeichnet und im folgenden Abschnitt Using multiple and overlapping animation timelines ausführlicher erläutert.

Kenntnisse dieser Unterscheidung bei Keyframes sind hilfreich, da möglicherweise nicht immer alle Details jeder animierten Eigenschaft angezeigt werden sollen. Stattdessen können Sie die Eigenschaften jedes Objekts reduzieren und nur die Keyframe auf Objektebene anzeigen. Sie können Keyframes auf Objektebene und zusammengesetzte Keyframes verwenden, um große Gruppen von Eigenschaften gleichzeitig mit einer einzigen Auswahl zu ändern, z. B. beim Verschieben von Keyframes entlang der Zeitachse. Ein Beispiel finden Sie unter Einfügen oder Verschieben von Keyframes. Sie müssen einfache Keyframes für bestimmte Aktionen verwenden, z. B. zum Bearbeiten der Anzahl von Wiederholungen für eine Animation. Ein Beispiel finden Sie unter Festlegen der Schleifendauer.

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Übergang zwischen Keyframes

In der Keyframeinterpolation wird beschrieben, wie Eigenschaftenänderungen in der Zeitspanne zwischen zwei Keyframes animiert werden. Einer Zeitspanne können mehrere Interpolationsmethoden zugewiesen werden, um komplexere Wertänderungen zu erstellen:

  • Hineinzoomen  Durch diesen Wert wird festgelegt, wie sich der Eigenschaftswert ändert, während sich die Zeit dem Keyframe nähert. Sie können den Grad des Zoomens festlegen, indem Sie einen Wert zwischen 0 % (kein Zoomen) und 100 % (vollständiges Zoomen, d. h. halbe Zeitdistanz zwischen dem vorherigen Keyframe und dem bearbeiteten Keyframe) angeben.

  • Herauszoomen  Durch diesen Wert wird festgelegt, wie sich der Eigenschaftswert ändert, während sich die Zeit vom Keyframe entfernt. Sie können den Grad des Zoomens festlegen, indem Sie einen Wert zwischen 0 % (kein Zoomen) und 100 % (vollständiges Zoomen, d. h. halbe Zeitdistanz zwischen dem bearbeiteten Keyframe und dem nächsten Keyframe) angeben.

  • Anhalten  Beim Anhalten werden Änderungen über einen Zeitraum nicht interpoliert. Stattdessen erfolgt eine abrupte Änderung in den neuen Eigenschaftswert, wenn die Position den Keyframe an der Stelle erreicht, an der die Änderung auftritt.

  • Linear  Bei der linearen Interpolation wird der Eigenschaftswert in gleichmäßigen Schritten zwischen den Keyframes geändert. Die Interpolation zwischen zwei Keyframes ist linear, falls der Wert für Herauszoomen für den ersten Keyframe auf 0 % und der Wert für Hineinzoomen für den zweiten Keyframe auf 0 % festgelegt ist.

Sie können die Werte der Keyframeinterpolation ändern, indem Sie mit der rechten Maustaste auf einen Keyframe auf der Zeitachse klicken.

Sie können in Expression Blend 2 jetzt einem Keyspline verwenden, um den Übergang zwischen Keyframes zu definieren. Hierzu ändern Sie einen Spline in einem grafischen Editor. Außerdem können Sie Keysplinewerte in Ressourcen konvertieren und diese wiederverwenden.

Keyspline-Editor für das Erstellen einer benutzerdefinierten Interpolation zwischen Keyframes

Cc295346.7ec8ec80-9667-4e95-9dd6-16cf9199b83b(de-de,Expression.10).png

Ein Beispiel finden Sie unter Ändern der Animationsinterpolation zwischen Keyframes.

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Manuelles Erstellen von Zeitachsen oder Erstellen von Zeitachsen mit Bewegungspfaden

Cc295346.alert_note(de-de,Expression.10).gifHinweis:

Bewegungspfade werden in Microsoft Silverlight 1.0- oder Silverlight 2-Projekten nicht unterstützt.

Wenn Sie eine Animationszeitachse manuell erstellen, können Sie die Bewegung und die Anzahl von Objekten, die von der Zeitachse animiert werden, am besten steuern. Eine Animation zwischen Farben ist ebenfalls möglich. Zum manuellen Erstellen einer Animationszeitachse in Expression Blend klicken Sie unter Objekte und Zeitachsen auf die Schaltfläche NeuCc295346.86937695-03dd-44ea-aa30-28d4029b3ad0(de-de,Expression.10).png und zeichnen dann Keyframes auf. Hierzu bewegen Sie zunächst die Zeitachsenposition Cc295346.5626c9eb-40bb-450a-9ca1-3678e5abe429(de-de,Expression.10).png und ändern anschließend ein Objekt auf der Zeichenfläche, um einen Keyframe zu generieren. Ein Beispiel finden Sie unter Erstellen einer einfachen Animation.

Mit der Option In Bewegungspfad konvertieren können Sie eine Animationszeitachse automatisch generieren. Dabei folgt ein Objekt einem Pfad auf der Zeichenfläche, wobei dieser Pfad eine Linie oder der Umkreis einer Form (z. B. einer Ellipse oder eines Rechtecks) sein kann. Wie in der folgenden Abbildung dargestellt, wird der Umkreis einer Ellipse als Pfad für die Bewegung des blauen Kreises verwendet:

Erstellen einer Animationszeitachse mithilfe eines Bewegungspfads

Cc295346.0b7efb11-9146-4bc5-a61f-2dc595f5cf5d(de-de,Expression.10).png

Cc295346.25182a96-9a69-478a-9cfe-5b360e6a9bea(de-de,Expression.10).png

Zwei separate Objekte: eine Ellipse und ein Kreis (erstellt mit dem Ellipsenwerkzeug).

Cc295346.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(de-de,Expression.10).png

Die Ellipse wird zu einem Bewegungspfad. Zu diesem Zeitpunkt können Sie die Ellipse optional löschen.

Cc295346.f0c1ff71-7814-42ba-806b-7ea92d616e69(de-de,Expression.10).png

Es wird eine neue Zeitachse generiert. Wenn sie wiedergegeben wird, bewegt sich der Kreis entlang des elliptischen Pfads.

Ein Beispiel für das Generieren von Animationszeitachsen mithilfe von Bewegungspfaden finden Sie unter Erstellen, Ändern oder Löschen von Bewegungspfaden.

Bewegungspfade werden nicht auf der Zeitachse durch Keyframes dargestellt. Daher können Sie Interpolationseffekte nicht ändern. Sie können jedoch der Anzahl der Wiederholungen ändern (siehe Festlegen der Schleifendauer). Sie können außerdem das animierte Objekt auf den Pfad ausrichten. Dies bewirkt, dass die Seite des Objekts, die zur Pfadmitte zeigt, während der gesamten Zeitachse weiterhin zur Pfadmitte zeigt, unabhängig davon, welche Seite des Objekts dies ist (siehe "So erreichen Sie, dass sich das Bewegungsobjekts permanent selbst am Pfad ausrichtet" unter Erstellen, Ändern oder Löschen von Bewegungspfaden).

Nachdem der Bewegungspfad generiert wurde, können Sie derselben Zeitachse, die den Bewegungspfad enthält, manuelle Animationen hinzufügen.

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Verwenden von mehreren und überlappenden Animationszeitachsen

Die Storyboardstruktur in Expression Blend ermöglicht die gleichzeitige Ausführung mehrerer Storyboards (und mehrerer Zeitachsen) in der Anwendung. Sie können z. B. zwei Kreise zeichnen, die einen Schmetterling darstellen, eine Animationszeitachse des Schmetterlings erstellen, der sich entlang eines kreisförmigen Bewegungspfads bewegt, und anschließend eine separate Animationszeitachse für das Flügelschlagen erstellen. Die Animation für das Flügelschlagen kann zur gleichen Zeit ausgeführt werden wie die kreisförmige Animation, ohne dass die kreisförmige Animation unterbrochen wird, da die Zeitachsen nicht dieselben Eigenschaften des Schmetterlingobjekts animieren. Ein Beispiel finden Sie unter Weiterführende Themen: Erstellen überlappender Animationen.

Falls zwei Animationszeitachsen dieselbe Eigenschaft gleichzeitig animieren, ist das Übergabeverhalten zwischen den Zeitachsen abhängig davon, ob an der 0-Sekunden-Marke der zweiten Animation ein Keyframe aufgezeichnet ist, unterschiedlich. Falls Sie keinen Keyframe an der 0-Sekunden-Marke aufzeichnen, wird von Expression Blend vorausgesetzt, dass vom letzten Wert der Eigenschaft zum Zeitpunkt der Unterbrechung zu dem Wert der Eigenschaft am ersten Keyframe auf der zweiten Zeitachse animiert werden soll. Dieser Übergabetyp wird als Übergabeanimation bezeichnet. Stellen Sie sich einen Kreis vor, der auf einer Zeitachse auf die doppelte Breite gestreckt wird. Auf einer zweiten Zeitachse wird er auf das Vierfache seiner Breite gestreckt. Wenn die zweite Animationszeitachse die erste unterbricht und an der 0-Sekunden-Marke kein Keyframe festgelegt ist, wird die Ellipse übergangslos von dem Moment, an dem die erste Zeitachse unterbrochen wird, zum Endpunkt der zweiten Zeitachse gestreckt (auf das Vierfache der ursprünglichen Breite). Wäre die zweite Animationszeitachse keine Übergabeanimation (an der 0-Sekunden-Marke wurde ein Keyframe festgelegt), würde der Kreis plötzlich zum Startpunkt der zweiten Animation springen. Ein Beispiel finden Sie unter Weiterführende Themen: Wiedergabe von Übergabeanimationen und Animationen, die nicht übergeben werden.

Cc295346.alert_note(de-de,Expression.10).gifHinweis:

Falls zwei Zeitachsen dieselbe Eigenschaft eines Objekts animieren, wird die erste Zeitachse angehalten, sobald sie unterbrochen wird. Dies gilt auch, wenn die Zeitachse kontinuierlich wiederholt werden soll.

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Frameraten

In Expression Blend werden Animationen durch Festlegen Keyframes entlang einer Zeitachse erstellt. Die Interpolation zwischen den Keyframes erfolgt zur Laufzeit. Aus diesem Grund müssen Sie keine Framerate für die Animation konfigurieren. Beim Ausführen der Anwendung werden die Animationszeitachsen von der .NET Framework-Laufzeit mit der höchstmöglichen Framerate gerendert.

Sie können jedoch die Intervalle auf der Zeitachse angeben, an denen Sie einen Keyframe festlegen können. Diese Intervallrate wird als Andockauflösung bezeichnet, da sie sich auf das Andocken von Position Cc295346.5626c9eb-40bb-450a-9ca1-3678e5abe429(de-de,Expression.10).png oder Keyframes Cc295346.80da70bb-e635-42e8-b26d-f90453096e21(de-de,Expression.10).png bezieht. Wenn Sie z. B. die Andockauflösung auf 10 Keyframes pro Sekunde festgelegt haben, könnten Sie jede Zehntel Sekunde auf der Zeitachse Keyframes festlegen. Sie können die Andockauflösung ändern, indem Sie unter Objekte und Zeitachsen auf den Dropdownpfeil neben der Umschaltfläche zum Andocken Cc295346.d4a3eb40-55f9-4120-9ba0-acc90a465828(de-de,Expression.10).png und dann auf Andocken klicken, um das Dialogfeld Auflösung zum Andocken zu öffnen.

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Szenen

Sie können in Expression Blend Animationen in Szenen (oder Benutzersteuerelementen) kapseln und anschließend diese Animationen mehrmals in anderen Dokumenten in der Anwendung verwenden. Ein Benutzersteuerelement kann in einem einzelnen Dokument oder in einer DLL-Datei (Steuerelementbibliothek) erstellt werden. Auf jedes Benutzersteuerelement, das Teil der Anwendung ist, kann über die Registerkarte Benutzerdefinierte Steuerelemente der ObjektbibliothekCc295346.0224cabd-5da1-4e01-bddd-4a647401a098(de-de,Expression.10).png zugegriffen werden. Dann können Sie es wie jedes andere Steuerelement in ein Dokument ziehen.

Cc295346.alert_note(de-de,Expression.10).gifHinweis:

Nachdem Sie dem Projekt ein Benutzersteuerelement hinzugefügt haben, müssen Sie das Projekt erstellen, damit das Benutzersteuerelement in der Objektbibliothek angezeigt wird. Klicken Sie im Menü Projekt auf Projekt erstellen.

Beachten Sie bei der Planung der Elemente, die in einem Benutzersteuerelement animiert werden sollen, Folgendes:

  • Die Zeitplanung für die verschiedenen Animationen  Stellen Sie sich z. B. eine Anwendung vor, in der zuerst ein Begrüßungsbildschirm animiert und dann die Benutzeroberfläche in einer zweiten Animation eingeblendet wird. Sie können jede Animation in einem eigenen Benutzersteuerelement speichern. Planen Sie jedoch zu Beginn der zweiten Animation ausreichend Zeit ein, sodass die Animation des Begrüßungsbildschirms beendet werden kann.

  • Die Eigenschaften und Auslöser, die für die Animationen verfügbar sein sollen  Stellen Sie sich z. B. eine Anwendung vor, die eine Schaltfläche enthält und außerdem eine Animation, die in einem Benutzersteuerelement enthalten ist. Es ist nicht möglich, dem Steuerelement einen Auslöser hinzuzufügen, mit dem die Animationszeitachse gestartet wird, sobald auf die Schaltfläche geklickt wird. Es sei denn, die Schaltfläche ist ebenfalls Teil des Steuerelements. Zudem ist das Binden von Daten zwischen Eigenschaftswerten nur möglich, wenn sich beide Eigenschaften in demselben Benutzersteuerelement befinden.

    Cc295346.alert_note(de-de,Expression.10).gifHinweis:

    Auslöser stehen in Microsoft Silverlight 1.0- oder Silverlight 2-Projekten nicht zur Verfügung. Das Feature Status bietet in Silverlight 2-Projekten jedoch ähnliche Funktionalität.

Ein Beispiel finden Sie unter Weiterführende Themen: Erstellen von WPF-Benutzersteuerelementen oder unter "Storyboards in Benutzersteuerelementen" unter Steuern des Startzeitpunkts eines Storyboards.

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Testen von Storyboards

Storyboards in einem Expression Blend-Projekt können auf unterschiedliche Art und Weise getestet werden: entweder in der Erstellungsumgebung oder zur Laufzeit, wenn die Anwendung kompiliert wird (klicken Sie im Menü Projekt auf Projekt testen, oder drücken Sie F5). In der Erstellungsumgebung können Sie die Wiedergabesteuerelemente verwenden, die sich im Interaktionspanel unter Objekte und Zeitachsen befinden:

Wiedergabesteuerelemente unter "Objekte und Zeitachsen"

Cc295346.ab1e4f11-0317-4ef1-a029-7d749629f0f8(de-de,Expression.10).png

  • Erster Frame   Sendet die Position Cc295346.5626c9eb-40bb-450a-9ca1-3678e5abe429(de-de,Expression.10).png zum ersten Frame der Animation.

  • Vorheriger Frame   Sendet die Position zum vorherigen Frame.

  • Wiedergabe   Gibt die Animation vom aktuellen Zeitpunkt an wieder.

  • Nächster Frame   Sendet die Position zum nächsten Frame.

  • Letzter Frame   Sendet die Position zum letzten Frame der Animation.

Scrubbing der Zeitachse

Das Scrubbing der Zeitachse ist eine nützliche Technik zum präzisen Steuern der Geschwindigkeit und Position der Animation, für die Sie eine Vorschau anzeigen bzw. die Sie testen möchten. Das Scrubbing geschieht durch Ziehen der Position. Während Sie die Position ziehen, wird die Animation auf der Zeichenfläche angezeigt. Das Scrubbing kann in Frames normal oder in umgekehrter Reihenfolge ausgeführt werden. Die Geschwindigkeit, mit der die Animation wiedergegeben wird, hängt von der Geschwindigkeit ab, in der Sie die Position ziehen.

Ein Beispiel finden Sie unter Scrubbing auf der Zeitachse.

Andocken an Zeit

Die Kategorie Objekte und Zeitachsen im Interaktionspanel enthält Steuerelemente, mit denen Sie die Animationswiedergabe steuern und in einzelnen Einheiten (Frames pro Sekunde) durch die Zeit navigieren können. Die Einheiten werden durch die Andockauflösung bestimmt. Das Andocken an Zeit wird verwendet, wenn Sie mithilfe der Wiedergabesteuerelemente durch die Zeit navigieren. Wenn Sie auf die Schaltflächen für den nächsten oder vorherigen Frame klicken, wird die Position um die angegebene Anzahl von Frames pro Sekunde nach vorne oder nach hinten verschoben. Diese Zeiteinheit wird durch die Andockauflösung bestimmt.

Dialogfeld "Auflösung zum Andocken"

Cc295346.df6c0208-d349-4948-b096-31869b94269d(de-de,Expression.10).png

Beispiele zur Verwendung der Andockauflösung finden Sie unter Aktivieren oder Deaktivieren des Andockens an die Zeitachse und Ändern der Andockauflösung.

Cc295346.alert_note(de-de,Expression.10).gifHinweis:

Das Andocken an die Zeitachse gilt nicht für die Framerate oder die Geschwindigkeit der Animation, wenn die Anwendung ausgeführt wird. Weitere Informationen finden Sie unter Frame rates.

Zeitanzeige

Die aktuelle Zeitanzeige zeigt den aktuell ausgewählten Zeitpunkt in MM:SS:xxx (Minuten, Sekunden, Millisekunden) an. Wenn Sie rasch zu einem bestimmten Zeitpunkt springen möchten, können Sie einen numerischen Wert in dieses Feld eingeben, um direkt an diese Position zu springen.

Textfeld "Position" mit 1,450 Sekunden

Cc295346.74a390c7-0ed5-4f6a-8f8b-372e6e0dcbdf(de-de,Expression.10).png

Ein Beispiel für die Verwendung der Zeitanzeige finden Sie unter Wechseln zu einem bestimmten Punkt auf einer Zeitachse.

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Auslöser

Auslöser können zum Ändern des Zustands eines Objekts auf der Zeichenfläche als Reaktion auf Ereignisse oder Eigenschaftenänderungen verwendet werden. Mit Auslösern können Animationszeitachsen gestartet und angehalten werden. Wenn Sie eine Zeitachse erstellen, wird z. B. ein Standardauslöser erstellt, der die Zeitachse beim ersten Laden der Anwendung ausführt. Sie können diesen Auslöser ändern oder andere Auslöser erstellen, mit denen die Zeitachse ausgeführt wird, wenn der Benutzer auf einen Schaltfläche klickt oder eine andere Aktion ausführt. Ausführliche Informationen über Auslöser finden Sie unter Auslöser (Übersicht).

Cc295346.alert_note(de-de,Expression.10).gifHinweis:

Auslöser stehen in Microsoft Silverlight 1.0- oder Silverlight 2-Projekten nicht zur Verfügung. Das Feature Status bietet in Silverlight 2-Projekten jedoch ähnliche Funktionalität.

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Ereignishandler

Ereignishandler sind Methoden, die beim Auftreten eines angegebenen Ereignisses (z. B. MouseOver) ausgeführt werden. Ein Ereignishandler kann anstelle eines Auslösers verwendet werden, wenn nicht nur eine Eigenschaft festgelegt oder eine Animationszeitachse gesteuert werden muss, sobald ein Ereignis in der Anwendung auftritt. Mit Ereignishandlermethoden können Sie weitere Programmierlogik hinzufügen. Beispiele sind das Festlegen einer Eigenschaft für ein anderes Objekt, das Laden eines neuen Dokuments, das Erstellen eines neuen Objekts, das Verwenden einer mathematischen Berechnung zum Animieren eines Objekts und vieles mehr. Wenn Sie z. B. ermitteln möchten, welche Taste während des KeyDown-Ereignisses gedrückt wurde, müssten Sie eine Ereignishandlermethode erstellen, die beim Drücken einer Taste aufgerufen wird, und Code hinzufügen, um die Taste zu bestimmen.

Ereignishandlermethoden sind in der Code-Behind-Datei des Dokuments definiert. In einem Windows Presentation Foundation- oder Silverlight 2-Projekt werden CodeBehind-Dateien in Microsoft Visual C# oder Microsoft Visual Basic .NET geschrieben (Beispiele finden Sie unter Steuern von Medien mit Auslösern in einer Zeitachse und Dynamisches Laden neuer Seiten in die Silverlight 2-Anwendung). In einem Silverlight 1.0-Projekt werden Code-Behind-Dateien in JavaScript geschrieben (siehe Erstellen einer Schaltfläche zur Steuerung eines Storyboards in einer Silverlight-Anwendung).

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben

Codierte Animation

In der Designansicht von Expression Blend können Sie ganze Animationszeitachsen erstellen, ohne dass Sie XAML oder Code in einer Code-Behind-Datei ändern müssen. Sie können auch Auslöser konfigurieren, die auf der Grundlage von Benutzerinteraktionen Animationszeitachsen starten, beenden und anhalten können. In der Regel können Sie alle gewünschten Animationsaufgaben in der Designansicht von Expression Blend ausführen.

Für einige erweiterte Animationsszenarien ist eine Codierung (in C# oder Visual Basic .NET) erforderlich. Ein Beispiel ist die Verwendung mathematischer Berechnungen, um die Bewegung eines Objekts zu bestimmen. Wenn Sie Animationszeitachsen in Code-Behind-Dateien ändern möchten, ist es hilfreich, wenn Sie Kenntnisse des Animationsmodells von Windows Presentation Foundation (WPF) besitzen, da eine grafisch in Expression Blend erstellte Anwendung im Wesentlichen eine WPF-Anwendung ist.

Animationszeitachsen werden in XAML durch ein Storyboard-Element dargestellt. Wenn Sie z. B. eine Animationszeitachse in der Designansicht von Expression Blend erstellen, wird XAML-Code für die Animation generiert, der in etwa wie folgt aussehen kann:

<Window.Resources>
  <Storyboard x:Key="MoveRight">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
        Storyboard.TargetName="rectangle"
        Storyboard.TargetProperty="...(TranslateTransform.Y)">
      <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
      <SplineDoubleKeyFrame KeyTime="00:00:01" Value="375"/>
    </DoubleAnimationUsingKeyFrames>
  </Storyboard>
</Window.Resources>

Die Attribute des vorherigen XAML-Beispiels lauten wie folgt:

  • Das x:Key-Attribut (x:Schlüssel) gibt den Namen der Zeitachse (oder des Storyboards) an.

  • Das BeginTime-Attribut (Startzeit) gibt die Startzeit der Animation (in diesem Fall an der 0-Sekunden-Marke) an.

  • Das TargetName-Attribut (Zielname) gibt den Namen des Elements an, das das Storyboard (oder die Zeitachse) animiert (in diesem Fall ein Objekt namens Rectangel).

  • Das TargetProperty-Attribut (Zieleigenschaft) gibt die Eigenschaft an, die geändert wird (in diesem Fall die Eigenschaft für die Y-Position des Rechtecks).

  • Die KeyTime-Attribute (Schlüsselzeit) geben an, in welchen Zeitintervallen und auf welchen Wert die Zieleigenschaft geändert wird. In der Designansicht von Expression Blend werden diese Elemente durch Keyframes auf der Zeitachse dargestellt.

Animationszeitachsen können in Code-Behind-Dateien mithilfe von C# oder Visual Basic .NET programmgesteuert gesteuert werden. Zum Starten der vorherigen Animationszeitachse in einer Code-Behind-Datei kann der C#-Code z. B. wie folgt aussehen:

Storyboard moveRight;
moveRight = (Storyboard)this.Resources["MoveRight"];
moveRight.Begin(this);

Weitere Informationen zum Erstellen und Bearbeiten von Animationszeitachsen in XAML und Code-Behind-Dateien finden Sie in den Themen zu Animation und Timing im Abschnitt zu Windows Presentation Foundation von MSDN. Sie können sich auch die Beispiele und Lernprogramme auf der Microsoft Expression-Website ansehen.

Cc295346.7e183f1f-37d8-4dcb-980c-19a5d61ca087(de-de,Expression.10).gifNach oben