Freigeben über

Animationen in XAML

  • Artikel

Animationen können Ihre App verbessern, indem Sie Bewegung und Interaktivität hinzufügen. Mithilfe der Animationen aus der Windows-Runtime Animationsbibliothek können Sie das Windows-Erscheinungsbild in Ihre App integrieren. Dieses Thema enthält eine Zusammenfassung der Animationen und Beispiele für typische Szenarien, in denen die einzelnen Szenarien verwendet werden.

Tipp

Die Windows-Runtime-Steuerelemente für XAML enthalten bestimmte Arten von Animationen als integrierte Verhaltensweisen, die aus einer Animationsbibliothek stammen. Wenn Sie diese Steuerelemente in Ihrer App verwenden, können Sie das animierte Erscheinungsbild erhalten, ohne sie selbst programmieren zu müssen.

Animationen aus der Windows-Runtime Animationsbibliothek bieten folgende Vorteile:

  • Bewegungen, die an den Richtlinien für Animationen ausgerichtet sind
  • Schnelle, flüssige Übergänge zwischen UI-Zuständen, die den Benutzer informieren, aber nicht ablenken
  • Visuelles Verhalten, das Übergänge innerhalb einer App an den Benutzer angibt

Wenn der Benutzer z. B. einer Liste ein Element hinzufügt, anstatt dass das neue Element sofort in der Liste angezeigt wird, wird das neue Element animiert. Die anderen Elemente in der Liste werden über einen kurzen Zeitraum an ihre neuen Positionen animiert, wodurch Platz für das hinzugefügte Element besteht. Das Übergangsverhalten macht die Steuerelementinteraktion für den Benutzer sichtbarer.

In Windows 10, Version 1607, wird eine neue ConnectedAnimationService-API für die Implementierung von Animationen eingeführt, bei denen ein Element während einer Navigation zwischen Ansichten animiert wird. Diese API weist ein anderes Verwendungsmuster als die anderen Animationsbibliotheks-APIs auf. Die Verwendung von ConnectedAnimationService wird auf der Referenzseite behandelt.

Die Animationsbibliothek stellt keine Animationen für jedes mögliche Szenario bereit. Es gibt Fälle, in denen Sie möglicherweise eine benutzerdefinierte Animation in XAML erstellen möchten. Weitere Informationen finden Sie unter Storyboardanimationen.

Darüber hinaus möchten Entwickler für bestimmte erweiterte Szenarien wie das Animieren eines Elements basierend auf der Bildlaufposition eines ScrollViewer möglicherweise die Visual Layer-Interoperabilität verwenden, um benutzerdefinierte Animationen zu implementieren. Weitere Informationen finden Sie unter Visual Layer .

Arten von Animationen

Das Windows-Runtime Animationssystem und die Animationsbibliothek dienen dem größeren Ziel, Steuerelemente und andere Teile der Benutzeroberfläche zu aktivieren, um ein animiertes Verhalten zu haben. Es gibt mehrere verschiedene Arten von Animationen.

  • Designübergänge werden automatisch angewendet, wenn bestimmte Bedingungen in der Benutzeroberfläche geändert werden, wobei Steuerelemente oder Elemente aus den vordefinierten Windows-Runtime XAML-UI-Typen einbezogen werden. Diese werden als Designübergänge bezeichnet, da die Animationen das Windows-Erscheinungsbild unterstützen und definieren, was alle Apps für bestimmte UI-Szenarien tun, wenn sie von einem Interaktionsmodus in einen anderen wechseln. Die Designübergänge sind Teil der Animationsbibliothek.
  • Designanimationen sind Animationen für eine oder mehrere Eigenschaften vordefinierter Windows-Runtime XAML-UI-Typen. Designanimationen unterscheiden sich von Designübergängen, da Designanimationen auf ein bestimmtes Element abzielen und in bestimmten visuellen Zuständen innerhalb eines Steuerelements vorhanden sind, während den Designübergängen Eigenschaften des Steuerelements zugewiesen werden, die außerhalb der visuellen Zustände vorhanden sind und die Übergänge zwischen diesen Zuständen beeinflussen. Viele der Windows-Runtime XAML-Steuerelemente enthalten Designanimationen in Storyboards, die Teil ihrer Steuerelementvorlage sind, mit den animationen, die durch visuelle Zustände ausgelöst werden. Solange Sie die Vorlagen nicht ändern, stehen ihnen diese integrierten Designanimationen für die Steuerelemente in der Benutzeroberfläche zur Verfügung. Wenn Sie jedoch Vorlagen ersetzen, entfernen Sie auch die integrierten Steuerelementdesignanimationen. Um sie zurückzuerhalten, müssen Sie ein Storyboard definieren, das Designanimationen innerhalb der Gruppe visueller Zustände des Steuerelements enthält. Sie können Auch Designanimationen aus Storyboards ausführen, die sich nicht innerhalb visueller Zustände befinden, und sie mit der Begin-Methode beginnen, aber das ist weniger häufig. Designanimationen sind Teil der Animationsbibliothek.
  • Visuelle Übergänge werden angewendet, wenn ein Steuerelement von einem seiner definierten visuellen Zustände zu einem anderen Zustand wechselt. Hierbei handelt es sich um benutzerdefinierte Animationen, die Sie schreiben, und sind in der Regel mit der benutzerdefinierten Vorlage verknüpft, die Sie für ein Steuerelement und die Definitionen des visuellen Zustands innerhalb dieser Vorlage schreiben. Die Animation wird nur während der Zeit zwischen den Zuständen ausgeführt, und dies ist in der Regel eine kurze Zeitspanne, höchstens ein paar Sekunden. Weitere Informationen finden Sie im Abschnitt "VisualTransition" von Storyboardanimationen für visuelle Zustände.
  • Storyboardanimationen animieren den Wert einer Windows-Runtime Abhängigkeitseigenschaft im Laufe der Zeit. Storyboards können als Teil eines visuellen Übergangs definiert oder zur Laufzeit von der Anwendung ausgelöst werden. Weitere Informationen finden Sie unter Storyboardanimationen. Weitere Informationen zu Abhängigkeitseigenschaften und wo sie vorhanden sind, finden Sie in der Übersicht über Abhängigkeitseigenschaften.
  • Verbundene Animationen , die von der neuen ConnectedAnimationService-API bereitgestellt werden, ermöglichen Entwicklern das einfache Erstellen eines Effekts, bei dem ein Element während einer Navigation zwischen Ansichten animiert wird. Diese API ist ab Windows 10, Version 1607, verfügbar. Weitere Informationen finden Sie unter ConnectedAnimationService.

In der Bibliothek verfügbare Animationen

Die folgenden Animationen werden in der Animationsbibliothek bereitgestellt. Klicken Sie auf den Namen einer Animation, um mehr über ihre wichtigsten Verwendungsszenarien zu erfahren, wie sie definiert werden, und um ein Beispiel für die Animation anzuzeigen.

Seitenübergang

Verwenden Sie Seitenübergänge, um die Navigation innerhalb einer App zu animieren. Da fast alle Apps eine Art von Navigation verwenden, sind Seitenübergangsanimationen die gängigste Art von Designanimation, die von Apps verwendet wird. Weitere Informationen zu den Seitenübergangs-APIs finden Sie unter NavigationThemeTransition.

Inhaltsübergang und Eingangsübergang

Verwenden Sie Inhaltsübergangsanimationen (ContentThemeTransition), um einen Teil oder eine Gruppe von Inhalten in oder aus der aktuellen Ansicht zu verschieben. Beispielsweise zeigen die Inhaltsübergangsanimationen Inhalte an, die beim ersten Laden der Seite nicht angezeigt werden konnten oder wenn sich der Inhalt in einem Abschnitt einer Seite ändert.

EntranceThemeTransition stellt eine Bewegung dar, die auf Inhalte angewendet werden kann, wenn eine Seite oder ein großer Abschnitt der Benutzeroberfläche zum ersten Mal geladen wird. Daher kann die erste Darstellung von Inhalten ein anderes Feedback bieten als eine Änderung an Inhalten. "EntranceThemeTransition" entspricht einer NavigationThemeTransition mit den Standardparametern, kann aber außerhalb eines Frames verwendet werden.

Ein-/Ausblenden und Querziehen

Verwenden Sie Ein- und Ausblendungsanimationen, um vorübergehende UI oder Steuerelemente ein- oder auszublenden. In XAML werden diese als FadeInThemeAnimation und FadeOutThemeAnimation dargestellt. Ein Beispiel ist in einer App-Leiste, in der neue Steuerelemente aufgrund der Benutzerinteraktion angezeigt werden können. Ein weiteres Beispiel ist eine vorübergehende Bildlaufleiste oder eine Verschiebungsanzeige, die ausgeblendet wird, nachdem keine Benutzereingabe seit einiger Zeit erkannt wurde. Apps sollten auch die Einblendungsanimation verwenden, wenn sie von einem Platzhalterelement zum endgültigen Element wechseln, wenn Inhalte dynamisch geladen werden.

Verwenden Sie eine Crossfade-Animation, um den Übergang zu glätten, wenn sich der Zustand eines Elements ändert. Beispiel: Wenn die App den aktuellen Inhalt einer Ansicht aktualisiert. Die XAML-Animationsbibliothek stellt keine dedizierte Crossfade-Animation (keine Entsprechung für crossFade) zur Verfügung, aber Sie können dasselbe Ergebnis mithilfe von FadeInThemeAnimation und FadeOutThemeAnimation mit überlappendem Timing erzielen.

Zeiger nach oben/unten

Verwenden Sie die Animationen "PointerUpThemeAnimation" und "PointerDownThemeAnimation", um dem Benutzer Feedback zu einem erfolgreichen Tippen oder Klicken auf eine Kachel zu geben. Wenn ein Benutzer z. B. auf eine Kachel klickt oder nach unten tippt, wird die Zeiger-Abwärtsanimation wiedergegeben. Sobald das Klicken oder Tippen losgelassen wurde, wird die Zeigeranimation wiedergegeben.

Ändern der Position

Verwenden Sie die Neupositionsanimationen (RepositionThemeAnimation oder RepositionThemeTransition), um ein Element an eine neue Position zu verschieben. Das Verschieben der Kopfzeilen in einem Elementsteuerelement verwendet z. B. die Animation für die Neupositionierung.

Popup ein-/ausblenden

Verwenden Sie popInThemeAnimation und PopOutThemeAnimation, wenn Sie ein Popup oder eine ähnliche Kontextbenutzeroberfläche über der aktuellen Ansicht ein- und ausblenden. PopupThemeTransition ist ein Designübergang, der hilfreiches Feedback ist, wenn Sie ein Popup ausblenden möchten.

Rand-UI ein-/ausblenden

Verwenden Sie die EdgeUIThemeTransition-Animation , um kleine, randbasierte UI-Elemente in die ansichtsfreie Ansicht zu ziehen. Verwenden Sie diese Animationen beispielsweise, wenn Sie oben oder unten auf dem Bildschirm eine benutzerdefinierte App-Leiste oder eine Ui-Oberfläche für Fehler und Warnungen am oberen Rand des Bildschirms anzeigen.

Verwenden Sie die PaneThemeTransition-Animation , um einen Bereich oder einen Bereich ein- oder auszublenden. Dies gilt für große randbasierte Ui-Elemente wie eine benutzerdefinierte Tastatur oder einen Aufgabenbereich.

Listenelementänderungen

Verwenden Sie die AddDeleteThemeTransition-Animation , um animiertes Verhalten hinzuzufügen, wenn Sie ein Element in einer vorhandenen Liste hinzufügen oder löschen. Zum Hinzufügen wird der Übergang zuerst vorhandene Elemente in der Liste neu positionieren, um Platz für die neuen Elemente zu schaffen und dann die neuen Elemente hinzuzufügen. Beim Löschen entfernt der Übergang Elemente aus einer Liste und positioniert ggf. die verbleibenden Listenelemente, nachdem die gelöschten Elemente entfernt wurden.

Es gibt auch eine separate ReorderThemeTransition , die Sie anwenden, wenn ein Element die Position in einer Liste ändert. Dies ist anders als das Löschen eines Elements und das Hinzufügen an einer neuen Stelle mit den zugehörigen Lösch-/Add-Animationen.

Beachten Sie, dass diese Animationen in den Standardmäßigvorlagen ListView und GridView enthalten sind, damit Sie diese Animationen nicht manuell hinzufügen müssen, wenn Sie diese Steuerelemente bereits verwenden.

Ziehen/Ablegen

Verwenden Sie die Ziehanimationen (DragItemThemeAnimation, DragOverThemeAnimation) und Drop-Animation (DropTargetItemThemeAnimation), um visuelles Feedback zu geben, wenn der Benutzer ein Element zieht oder abbricht.

Wenn die Animationen aktiv sind, zeigen die Animationen dem Benutzer an, dass die Liste um ein abgelegtes Element neu angeordnet werden kann. Es ist hilfreich, dass Benutzer wissen, wo das Element in einer Liste platziert wird, wenn es an der aktuellen Position abgelegt wird. Die Animationen geben visuelles Feedback, dass ein gezogenes Element zwischen zwei anderen Elementen in der Liste abgelegt werden kann und dass sich diese Elemente wegbewegen.

Verwenden von Animationen mit benutzerdefinierten Steuerelementen

In der folgenden Tabelle sind unsere Empfehlungen für die Animation zusammengefasst, die Sie beim Erstellen einer benutzerdefinierten Version dieser Windows-Runtime-Steuerelemente verwenden sollten:

UI-Typ Empfohlene Animation
Dialogfeld FadeInThemeAnimation und FadeOutThemeAnimation
Flyout PopInThemeAnimation und PopOutThemeAnimation
QuickInfo FadeInThemeAnimation und FadeOutThemeAnimation
Kontextmenü PopInThemeAnimation und PopOutThemeAnimation
Befehlsleiste EdgeUIThemeTransition
Aufgabenbereich oder randbasiertes Panel PaneThemeTransition
Inhalt eines ui-Containers ContentThemeTransition
Für Steuerelemente oder wenn keine andere Animation gilt FadeInThemeAnimation und FadeOutThemeAnimation

 

Beispiele für Übergangsanimationen

Im Idealfall verwendet Ihre App Animationen, um die Benutzeroberfläche zu verbessern oder sie attraktiver zu gestalten, ohne Ihre Benutzer zu stören. Eine Möglichkeit, dies zu tun, ist das Anwenden animierter Übergänge auf die Benutzeroberfläche, sodass die Animation, wenn etwas in den Bildschirm wechselt oder sich ändert, die Aufmerksamkeit des Benutzers auf die Änderung lenkt. Beispielsweise können Ihre Schaltflächen schnell eingeblendet und nicht nur angezeigt und ausgeblendet werden. Wir haben eine Reihe von APIs erstellt, mit denen empfohlene oder typische Animationsübergänge erstellt werden können, die konsistent sind. Das folgende Beispiel zeigt, wie Sie eine Animation auf eine Schaltfläche anwenden, sodass sie schnell in die Ansicht gleitet.

<Button Content="Transitioning Button">
     <Button.Transitions>
         <TransitionCollection> 
             <EntranceThemeTransition/>
         </TransitionCollection>
     </Button.Transitions>
 </Button>

In diesem Code fügen wir das EntranceThemeTransition -Objekt zur Übergangsauflistung der Schaltfläche hinzu. Wenn die Schaltfläche zum ersten Mal gerendert wird, gleitet sie schnell in die Ansicht und nicht nur in die Anzeige. Sie können einige Eigenschaften für das Animationsobjekt festlegen, um anzupassen, wie weit es folien und aus welcher Richtung, aber es ist wirklich eine einfache API für ein bestimmtes Szenario, d. h. ein auffälliger Eingang zu machen.

Sie können auch Übergangsanimationsdesigns in den Stilressourcen Ihrer App definieren, sodass Sie den Effekt einheitlich anwenden können. Dieses Beispiel entspricht dem vorherigen, es wird nur mithilfe einer Formatvorlage angewendet:

<UserControl.Resources>
     <Style x:Key="DefaultButtonStyle" TargetType="Button">
         <Setter Property="Transitions">
             <Setter.Value>
                 <TransitionCollection>
                     <EntranceThemeTransition/>
                 </TransitionCollection>
             </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
      
<StackPanel x:Name="LayoutRoot">
    <Button Style="{StaticResource DefaultButtonStyle}" Content="Transitioning Button"/>
</StackPanel>

Die vorherigen Beispiele wenden einen Designübergang auf ein einzelnes Steuerelement an. Designübergänge sind jedoch noch interessanter, wenn Sie sie auf einen Container von Objekten anwenden. In diesem Fall nehmen alle untergeordneten Objekte des Containers am Übergang teil. Im folgenden Beispiel wird eine EntranceThemeTransition auf ein Rechteckraster angewendet.

<!-- If you set an EntranceThemeTransition animation on a panel, the
     children of the panel will automatically offset when they animate
     into view to create a visually appealing entrance. -->        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- The sequence children appear depends on their order in 
         the panel's children, not necessarily on where they render
         on the screen. Be sure to arrange your child elements in
         the order you want them to transition into view. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

Die untergeordneten Rechtecke des Rasters werden nacheinander visuell ansprechender und nicht alle gleichzeitig angezeigt, wie es der Fall wäre, wenn Sie diese Animation einzeln auf die Rechtecke angewendet haben.

Hier ist eine Demonstration dieser Animation:

Animation mit untergeordnetem Rechteck, das in die Ansicht wechselt

Untergeordnete Objekte eines Containers können auch erneut fließen, wenn eine oder mehrere dieser untergeordneten Elemente die Position ändern. Im folgenden Beispiel wenden wir eine RepositionThemeTransition auf ein Rechteckraster an. Wenn Sie eines der Rechtecke entfernen, werden alle anderen Rechtecke wieder an ihre neue Position fließen.

<Button Content="Remove Rectangle" Click="RemoveButton_Click"/>
        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
                    
            <!-- Without this, there would be no animation when items 
                 are removed. -->
            <RepositionThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- All these rectangles are just to demonstrate how the items
         in the grid re-flow into position when one of the child items
         are removed. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
    if (rectangleItems.Items.Count > 0)
    {    
        rectangleItems.Items.RemoveAt(0);
    }                         
}

// .h
private:
void RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

//.cpp
void BlankPage::RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    if (rectangleItems->Items->Size > 0)
    {    
        rectangleItems->Items->RemoveAt(0);
    }
}

Sie können mehrere Übergangsanimationen auf ein einzelnes Objekt oder einen Objektcontainer anwenden. Wenn beispielsweise die Liste der Rechtecke in der Ansicht animiert und auch animiert werden soll, wenn sie die Position ändern, können Sie die RepositionThemeTransition und die EntranceThemeTransition wie folgt anwenden:

...
<ItemsControl.ItemContainerTransitions>
    <TransitionCollection>
        <EntranceThemeTransition/>                    
        <RepositionThemeTransition/>
    </TransitionCollection>
</ItemsControl.ItemContainerTransitions>
...

Es gibt mehrere Übergangseffekte zum Erstellen von Animationen für Ui-Elemente, während sie hinzugefügt, entfernt, neu angeordnet usw. werden. Die Namen dieser APIs enthalten alle "ThemeTransition":

API Beschreibung
NavigationThemeTransition Stellt eine Windows-Persönlichkeitsanimation für die Seitennavigation in einem Frame bereit.
AddDeleteThemeTransition Stellt das animierte Übergangsverhalten bereit, wenn Steuerelemente untergeordnete Elemente oder Inhalte hinzufügen oder löschen. In der Regel ist das Steuerelement ein Elementcontainer.
ContentThemeTransition Stellt das animierte Übergangsverhalten bereit, wenn sich der Inhalt eines Steuerelements ändert. Sie können dies zusätzlich zu AddDeleteThemeTransition anwenden.
EdgeUIThemeTransition Stellt das animierte Übergangsverhalten für einen (kleinen) Rand-UI-Übergang bereit.
EntranceThemeTransition Stellt das animierte Übergangsverhalten für das erste Anzeigen von Steuerelementen bereit.
PaneThemeTransition Stellt das animierte Übergangsverhalten für einen Ui-Übergang eines Panels (große Rand-UI) bereit.
PopupThemeTransition Stellt das animierte Übergangsverhalten bereit, das für Pop-In-Komponenten von Steuerelementen (z. B. QuickInfo-ähnliche UI für ein Objekt) gilt, während sie angezeigt werden.
ReorderThemeTransition Stellt das animierte Übergangsverhalten bereit, wenn Elemente in der Listenansicht die Reihenfolge ändern. Dies geschieht in der Regel als Ergebnis eines Drag-Drop-Vorgangs. Verschiedene Steuerelemente und Designs können unterschiedliche Merkmale für die Animationen aufweisen.
RepositionThemeTransition Stellt das animierte Übergangsverhalten bereit, wenn Steuerelemente die Position ändern.

 

Beispiele für Designanimationen

Übergangsanimationen sind einfach anzuwenden. Vielleicht möchten Sie aber etwas mehr Kontrolle über die Anzeigedauer und Reihenfolge Ihrer Animationseffekte haben. Sie können Designanimationen verwenden, um mehr Kontrolle zu ermöglichen und gleichzeitig ein einheitliches Design für das Verhalten Ihrer Animation zu verwenden. Designanimationen erfordern auch weniger Markup als benutzerdefinierte Animationen. Hier verwenden wir die FadeOutThemeAnimation , um ein Rechteck aus der Sicht zu verblassen.

<StackPanel>    
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <FadeOutThemeAnimation TargetName="myRectangle" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle PointerPressed="Rectangle_Tapped" x:Name="myRectangle"  
              Fill="Blue" Width="200" Height="300"/>
</StackPanel>

// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}

' When the user taps the rectangle, the animation begins.
Private Sub Rectangle_Tapped(sender As Object, e As PointerRoutedEventArgs)
    myStoryboard.Begin()
End Sub

//.h
void Rectangle_Tapped(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e);

//.cpp
void BlankPage::Rectangle_Tapped(Object^ sender, PointerRoutedEventArgs^ e)
{
    myStoryboard->Begin();
}

Im Gegensatz zu Übergangsanimationen verfügt eine Designanimation nicht über einen integrierten Trigger (den Übergang), der ihn automatisch ausführt. Sie müssen ein Storyboard verwenden, um eine Designanimation zu enthalten, wenn Sie es in XAML definieren. Sie können auch das Standardverhalten der Animation ändern. Sie können z. B. das Ausblenden verlangsamen, indem Sie den Zeitwert "Dauer" auf der FadeOutThemeAnimation erhöhen.

Hinweis Zum Anzeigen grundlegender Animationstechniken verwenden wir App-Code, um die Animation durch Aufrufen von Methoden von Storyboard zu starten. Sie können steuern, wie die Storyboardanimationen mit den Methoden "Begin", "Stop", "Pause" und "Resume Storyboard" ausgeführt werden. Dies ist jedoch in der Regel nicht deren Einbeziehung von Bibliotheksanimationen in Apps. Stattdessen integrieren Sie die Bibliotheksanimationen in die XAML-Stile und -Vorlagen, die auf Steuerelemente oder Elemente angewendet werden. Das Erlernen von Vorlagen und visuellen Zuständen ist etwas mehr beteiligt. Wir behandeln jedoch die Verwendung von Bibliotheksanimationen in visuellen Zuständen als Teil der Storyboardanimationen für das Thema visuelle Zustände .

 

Sie können mehrere andere Designanimationen auf Ihre UI-Elemente anwenden, um Animationseffekte zu erstellen. Die Namen dieser API enthalten alle "ThemeAnimation":

API Beschreibung
DragItemThemeAnimation Stellt die vorkonfigurierte Animation dar, die für Elementelemente gilt, die gezogen werden.
DragOverThemeAnimation Stellt die vorkonfigurierte Animation dar, die auf die Elemente unter einem gezogenen Element angewendet wird.
DropTargetItemThemeAnimation Die vorkonfigurierte Animation, die für potenzielle Dropzielelemente gilt.
FadeInThemeAnimation Die vorkonfigurierte Deckkraftanimation, die bei der ersten Anzeige auf Steuerelemente angewendet wird.
FadeOutThemeAnimation Die vorkonfigurierte Deckkraftanimation, die für Steuerelemente gilt, wenn sie aus der Benutzeroberfläche entfernt oder ausgeblendet werden.
PointerDownThemeAnimation Vorkonfigurierte Animation für Benutzeraktion, die auf ein Element oder Element tippt oder klickt.
PointerUpThemeAnimation Vorkonfigurierte Animation für Benutzeraktion, die ausgeführt wird, nachdem ein Benutzer auf ein Element oder Element tippt und die Aktion losgelassen wird.
PopInThemeAnimation Die vorkonfigurierte Animation, die für Pop-In-Komponenten von Steuerelementen gilt, während sie angezeigt werden. Diese Animation kombiniert Deckkraft und Übersetzung.
PopOutThemeAnimation Die vorkonfigurierte Animation, die für Pop-In-Komponenten von Steuerelementen gilt, während sie geschlossen oder entfernt werden. Diese Animation kombiniert Deckkraft und Übersetzung.
RepositionThemeAnimation Die vorkonfigurierte Animation für ein Objekt, während es neu positioniert wird.
SplitCloseThemeAnimation Die vorkonfigurierte Animation, die eine Zielbenutzeroberfläche mit einer Animation im Stil eines ComboBox-Öffnens und Schließens verdeckt.
SplitOpenThemeAnimation Die vorkonfigurierte Animation, die eine Zielbenutzeroberfläche mit einer Animation im Stil eines ComboBox-Öffnens und Schließens anzeigt.
DrillInThemeAnimation Stellt eine vorkonfigurierte Animation dar, die ausgeführt wird, wenn ein Benutzer in einer logischen Hierarchie vorwärts navigiert, z. B. von einer Listenseite zu einer Detailseite.
DrillOutThemeAnimation Stellt eine vorkonfigurierte Animation dar, die ausgeführt wird, wenn ein Benutzer rückwärts in einer logischen Hierarchie navigiert, z. B. von einer Detailseite zu einer Listenseite.

 

Erstellen eigener Animationen

Wenn Designanimationen für Ihre Anforderungen nicht ausreichen, können Sie eigene Animationen erstellen. Sie animieren Objekte, indem Sie einen oder mehrere ihrer Eigenschaftswerte animieren. Sie können beispielsweise die Breite eines Rechtecks, den Winkel einer RotateTransform oder den Farbwert einer Schaltfläche animieren. Wir bezeichnen diese Art von benutzerdefinierter Animation als Storyboardanimation, um sie von den Bibliotheksanimationen zu unterscheiden, die der Windows-Runtime bereits als vorkonfigurierten Animationstyp bereitstellt. Bei Storyboardanimationen verwenden Sie eine Animation, die Werte eines bestimmten Typs ändern kann (z. B. DoubleAnimation zum Animieren eines Double-Elements), und diese Animation in ein Storyboard einfügen, um sie zu steuern.

Um animiert zu werden, muss die Eigenschaft, die Sie animieren, eine Abhängigkeitseigenschaft sein. Weitere Informationen zu Abhängigkeitseigenschaften finden Sie in der Übersicht über Abhängigkeitseigenschaften. Weitere Informationen zum Erstellen von benutzerdefinierten Storyboardanimationen, einschließlich der Ziel- und Steuerelementerstellung, finden Sie unter Storyboardanimationen.

Der größte Bereich der App-UI-Definition in XAML, in dem Sie benutzerdefinierte Storyboardanimationen definieren, ist, wenn Sie visuelle Zustände für Steuerelemente in XAML definieren. Dies geschieht entweder, weil Sie eine neue Steuerelementklasse erstellen oder ein vorhandenes Steuerelement mit visuellen Zuständen in der Steuerelementvorlage neu erstellen. Weitere Informationen finden Sie unter Storyboardanimationen für visuelle Zustände.