Freigeben über


Animieren von Objekten

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.30).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.30).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 CodeBehind-Dateien generieren. Weitere Informationen finden Sie in den Themen zu Animation und zeitliche Steuerung (möglicherweise in englischer Sprache) im Abschnitt zu Windows Presentation Foundation von MSDN.

Storyboards

Storyboards sind Container, die Animationzeitachsen enthalten. Expression Blend 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.30).png

Bei der Auswahl eines Storyboards können Sie ein Popupmenü verwenden, ü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.30).png

Sie können die Eigenschaften von 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 "Szenen".

    Ein Beispiel finden Sie unter Erstellen eines leeren Benutzersteuerelements und Erstellen eines neuen Benutzersteuerelements in einem 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 haben.

    Weitere Informationen finden Sie unter Auswählen und Verwenden von interaktiven Steuerelementen. Ein Beispiel für Windows Presentation Foundation (WPF) finden Sie unter Weiterführende Themen: Hinzufügen einer Animation zu einer Schaltfläche.

  • In einem Status   Wenn Sie die Animation bearbeiten möchten, die nach dem Übergang zu einem neuen Status auftritt, können Sie den Status im Zuständepanel auswählen und anschließend im Panel Objekte und Zeitachsen auf Zeitachse anzeigenCc295346.d5d49398-e7e2-48f6-82e0-7ab34fda33ea(DE-DE,Expression.30).png klicken, um Ihre Änderungen vorzunehmen.

    Weitere Informationen zum Verwenden von Status finden Sie unter Definieren unterschiedlicher visueller Zustände für ein Steuerelement.

Storyboards können mithilfe von Auslösern, die für Objekte festgelegt werden, mithilfe von Verhalten oder mithilfe von Ereignishandlern gesteuert (gestartet, beendet, angehalten) werden.

Weitere Informationen finden Sie unter Steuern des Startzeitpunkts eines Storyboards.

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.

Sie arbeiten mit Animationszeitachsen im Panel Objekte und Zeitachsen. 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.

Keyframes

Ein KeyframeCc295346.fa3c696d-5463-4000-8a6b-650fe6759bf7(DE-DE,Expression.30).png ist ein Marker auf der Zeitachse, der den Zeitpunkt einer Eigenschaftenä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-Objekt oder auf ein Raster, 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 (im Abschnitt "Wie funktionieren Animationen in Expression Blend?" weiter oben in diesem Thema) ist der Keyframe, der in der Zeile der Zeitachse festgelegt wurde, die dem Rectangle-Objekt entspricht, ein 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 "Verwenden von mehreren und überlappenden Zeitachsen" 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.

Übergang zwischen Keyframes

In der Keyframeinterpolation wird beschrieben, wie Eigenschaftenänderungen in der Zeitspanne zwischen zwei Keyframes animiert werden.

Sie können Keyframe-Interpolationswerte bearbeiten, indem Sie vordefinierte Hineinzoomen- oder Herauszoomen-Werte verwenden, indem Sie ein KeySpline-Diagramm bearbeiten oder eine voreingestellte EasingFunction-Option verwenden, die ein komplexes KeySpline-Diagramm darstellt.

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

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

Weitere Informationen finden Sie unter Ändern der Animationsinterpolation zwischen Keyframes.

Manuelles Erstellen von Zeitachsen oder Erstellen von Zeitachsen mit Animationspfaden

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

Animationspfade werden in Microsoft Silverlight-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 NeuCc295346.86937695-03dd-44ea-aa30-28d4029b3ad0(DE-DE,Expression.30).png und zeichnen dann Keyframes auf. Hierzu bewegen Sie zunächst die Zeitachsenposition Cc295346.5626c9eb-40bb-450a-9ca1-3678e5abe429(DE-DE,Expression.30).png und bearbeiten 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 Animationspfad 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 Animationspfads

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

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

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

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

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

Cc295346.f0c1ff71-7814-42ba-806b-7ea92d616e69(DE-DE,Expression.30).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 Animationspfaden finden Sie unter Erstellen, Ändern oder Löschen von Animationspfaden.

Animationspfade werden nicht auf der Zeitachse durch Keyframes dargestellt. Daher können Sie Interpolationseffekte nicht ändern. Sie können jedoch die Anzahl der Wiederholungen ändern.

Weitere Informationen finden Sie unter 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.

Weitere Informationen finden Sie unter "So erreichen Sie, dass sich das Bewegungsobjekt permanent selbst am Pfad ausrichtet" unter Erstellen, Ändern oder Löschen von Animationspfaden.

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

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

Sie können einen Animationspfad in Expression Blend nicht umkehren, indem Sie das Storyboard umkehren, das den Animationspfad enthält. Sie können jedoch den Pfad transformieren (spiegeln), um ihn rückwärts laufen zu lassen, oder Sie können die Storyboard-Eigenschaft AutoReverse verwenden, damit das Storyboard vorwärts und anschließend rückwärts abgespielt wird.

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 Animationspfads 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, weil 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. 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.30).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.

Frameraten

In Expression Blend werden Animationen durch Festlegen von 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 der Position Cc295346.5626c9eb-40bb-450a-9ca1-3678e5abe429(DE-DE,Expression.30).png oder von Keyframes Cc295346.fa3c696d-5463-4000-8a6b-650fe6759bf7(DE-DE,Expression.30).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.30).png und dann auf Andocken klicken, um das Dialogfeld Auflösung zum Andocken anzuzeigen.

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 im Objektepanel über die Kategorie ProjektCc295346.0d8b8d29-1af9-418f-8741-be3097d76eab(DE-DE,Expression.30).png zugegriffen werden. Dann können Sie es wie jedes andere Steuerelement in ein Dokument ziehen.

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

Nachdem Sie dem Projekt ein Benutzersteuerelement hinzugefügt haben, müssen Sie das Projekt erstellen, damit das Benutzersteuerelement im Objektepanel angezeigt wird. Klicken Sie im Menü Projekte 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.30).gifHinweis:

    Auslöser sind in Silverlight-Projekten nicht verfügbar. Sie können jedoch mithilfe von Verhalten Storyboards und Statusübergänge steuern.

    Weitere Informationen finden Sie unter Hinzufügen von Verhalten zu Objekten.

Weitere Informationen zu Benutzersteuerelementen finden Sie unter Erstellen eines leeren Benutzersteuerelements oder "Storyboards in Benutzersteuerelementen" in Steuern des Startzeitpunkts eines Storyboards.

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ü Projekte auf Projekt ausführen oder drücken Sie F5). In der Erstellungsumgebung können Sie die Wiedergabesteuerelemente verwenden, die sich im Panel Objekte und Zeitachsen befinden:

Wiedergabesteuerelemente im Panel "Objekte und Zeitachsen"

Cc295346.ab1e4f11-0317-4ef1-a029-7d749629f0f8(DE-DE,Expression.30).png

  • Erster Frame   Sendet die Position Cc295346.5626c9eb-40bb-450a-9ca1-3678e5abe429(DE-DE,Expression.30).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

Das Panel Objekte und Zeitachsen 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.30).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.30).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 "Frameraten" weiter oben in diesem Thema.

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.30).png

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

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 Verwendung von Auslösern, um das Verhalten eines WPF-Steuerelements festzulegen.

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

Auslöser sind in Silverlight-Projekten nicht verfügbar. Sie können jedoch mithilfe von Verhalten Storyboards und Statusübergänge steuern.

Weitere Informationen finden Sie unter Hinzufügen von Verhalten zu Objekten.

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 WPF- oder Silverlight-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 Weiterführende Themen: Dynamisches Laden einer neuen Seite in die Silverlight-Anwendung.

Codierte Animation

In der Designansicht von Expression Blend können Sie ganze Animationszeitachsen erstellen, ohne dass Sie XAML oder Code in einer CodeBehind-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 CodeBehind-Dateien ändern möchten, ist es hilfreich, wenn Sie Kenntnisse des Animationsmodells der Technologie haben, die Ihre Anwendung verwendet (entweder WPF oder Silverlight).

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 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 CodeBehind-Dateien finden Sie in den Themen zu Animation und zeitliche Steuerung (möglicherweise in englischer Sprache) im Abschnitt zu Windows Presentation Foundation von MSDN. Sie können sich auch die Beispiele und Lernprogramme auf der Website Microsoft Expression (möglicherweise in englischer Sprache) ansehen.