Schnellstart: Animieren der Benutzeroberfläche mithilfe von Bibliothekanimationen
Language: HTML | XAML

Schnellstart: Animieren der Benutzeroberfläche anhand von Bibliotheksanimationen (XAML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Mit Animationen in der Windows-Runtime kann Ihre App durch Hinzufügen von Bewegung und Interaktivität optimiert werden. Durch Verwendung der Animationen aus der Windows-Runtime-Animationsbibliothek können Sie deren Erscheinungsbild in Ihre App integrieren.

Hinweis  Ein Beispiel, in dem viele der in diesem Thema erläuterten Konzepte veranschaulicht werden, finden Sie unter XAML-Beispiel für Charakteranimationen.
 

Roadmap: Wie hängt dieses Thema mit anderen zusammen? Informationen finden Sie unter:

Übergangsanimationen

Im Optimalfall verwendet Ihre App Animationen, um die Benutzeroberfläche interessanter und ansprechender zu gestalten, ohne dabei die Benutzer zu irritieren. Das erreichen Sie unter anderem mit animierten UI-Übergängen: Beim Ein- und Ausblenden von Elementen und anderen Änderungen lenkt die Animation die Aufmerksamkeit des Benutzers auf den betreffenden Aspekt. Beispielsweise können Sie Schaltflächen mit einer schnellen Bewegung ein- oder ausblenden, statt diese einfach nur hinzuzufügen oder zu entfernen. Wir haben eine Reihe von APIs für empfohlene und typische Animationsübergänge entwickelt, die sich nahtlos einfügen. Dieses Beispiel zeigt, wie Sie eine Animation auf eine Schaltfläche anwenden, damit diese schnell in die Ansicht gezogen wird.


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

In diesem Codebeispiel haben wir der Übergangssammlung der Schaltfläche das EntranceThemeTransition-Objekt hinzugefügt. Beim ersten Rendern der Schaltfläche wird diese dann mit einer schnellen Bewegung in die Ansicht gezogen und nicht einfach nur der Anzeige hinzugefügt. Sie können für das Animationsobjekt bestimmte Eigenschaften festlegen, um einzustellen, wie weit und aus welcher Richtung das Objekt gezogen wird. Die API ist jedoch einfach gehalten und für ein konkretes Szenario gedacht: einen interessanten Eingang.

In den Stilressourcen der App können Sie außerdem Übergangsanimationsdesigns definieren und den gewünschten Effekt auf diese Weise einheitlich anwenden. Dieses Beispiel deckt sich mit dem vorhergehenden Beispiel, mit dem Unterschied, dass hier ein Style verwendet wird:


<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 Beispiele oben wenden einen Designübergang auf ein einzelnes Steuerelement an. Sie steigern die Wirkung von Designübergängen jedoch weiter, wenn Sie diese auf einen Objektcontainer anwenden. Dabei wird der Übergang auf alle untergeordneten Objekte in dem betreffenden Container angewendet. In dem folgenden Beispiel wird eine EntranceThemeTransition-Animation auf ein Grid von Rechtecken 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 Grid werden visuell ansprechend nacheinander eingeblendet – und nicht alle auf einmal, wie bei der Anwendung der Animation auf jedes Rechteck einzeln.

Im folgenden Video wird die Animation demonstriert:

|

Untergeordnete Objekte in einem Container können außerdem mit einer fließenden Bewegung neu angeordnet werden, wenn sich die Position eines oder mehrerer untergeordneter Objekte ändert. In dem folgenden Beispiel wird eine RepositionThemeTransition-Animation auf ein Rechteckraster angewendet. Wird eines der Rechtecke entfernt, bewegen sich die anderen Rechtecke an ihre neue Position.


<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);
    }		  		  		  
}

Das Video demonstriert die Animation, die für die Rechtecke ausgeführt werden, die entfernt werden:

|

Sie können mehrere Übergangsanimationen auf ein einzelnes Objekt oder einen Objektcontainer anwenden. Wenn Sie beispielsweise die Rechteckliste mit einer Animation einblenden und außerdem Positionsänderungen animieren möchten, können Sie RepositionThemeTransition und EntranceThemeTransition wie folgt anwenden:



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

Es stehen verschiedene Übergangseffekte zur Verfügung, um UI-Elemente beim Hinzufügen, Entfernen, Neuanordnen usw. zu animieren. Die Namen dieser APIs enthalten alle "ThemeTransition":

APIBeschreibung
AddDeleteThemeTransition Stellt animiertes Übergangsverhalten für das Hinzufügen oder Löschen von untergeordneten Objekten oder Inhalten über Steuerelemente bereit. Das betreffende Steuerelement ist dabei typischerweise ein Elementcontainer.
ContentThemeTransition Stellt animiertes Übergangsverhalten für Änderungen der Inhalte eines Steuerelements bereit. Sie können diese Animation zusammen mit AddDeleteThemeTransition anwenden.
EdgeUIThemeTransition Stellt das animierte Übergangsverhalten für (kleine) Rand-UI-Übergänge bereit.
EntranceThemeTransition Stellt das animierte Übergangsverhalten für die erste Anzeige eines Steuerelements bereit.
PaneThemeTransition Stellt das animierte Übergangsverhalten für Bereich-UI-Übergänge (große Rand-UI) bereit.
PopupThemeTransition Stellt das animierte Übergangsverhalten bereit, das für Einblendkomponenten von Steuerelementen (z. B. QuickInfo-UI eines Objekts) gilt, wenn diese eingeblendet werden.
ReorderThemeTransition Stellt animiertes Übergangsverhalten für Änderungen in der Anordnung der Elemente von Listenansicht-Steuerelementen bereit. Dies ist typischerweise die Folge von Drag & Drop-Vorgängen. Die Animationsmerkmale können sich je nach Steuerelement und Design unterscheiden.
RepositionThemeTransition Stellt animiertes Übergangsverhalten für Positionsänderungen von Steuerelementen bereit.

 

Designanimationen

Die Anwendung von Übergangsanimationen ist denkbar einfach. Aber vielleicht möchten Sie Zeit und Abfolge der Animationseffekte genauer steuern. Auch Designanimationen verwenden ein einheitliches Design für das Animationsverhalten, umfassen jedoch mehr Steuerungsmöglichkeiten. Für Designanimationen ist weniger Markup erforderlich als für benutzerdefinierte Animationen. Hier blenden wir mit FadeOutThemeAnimation ein Rechteck aus.


<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();
}

Anders als Übergangsanimationen besitzt eine Designanimation keinen integrierten Trigger (der Übergang), der sie automatisch ausführt. Verwenden Sie ein Storyboard, um eine Designanimation bei Definition in XAML zu integrieren. Außerdem können Sie das Standardverhalten der Animation ändern. Sie können z. B. die Geschwindigkeit beim Ausblenden verringern, indem Sie den Duration-Zeitwert für FadeOutThemeAnimation erhöhen.

Hinweis  Zur Veranschaulichung grundlegender Animationsverfahren verwenden wir App-Code, um die Animation durch den Aufruf von Storyboard-Methoden zu starten. Sie können mit Begin-, Stop-, Pause- und Resume-Methoden (Storyboard) steuern, wie die Storyboard-Animationen ausgeführt werden. Bibliotheksanimationen werden so jedoch normalerweise nicht in Apps integriert. Integrieren Sie stattdessen Bibliotheksanimationen in die XAML-Stile und -Vorlagen für Steuerelemente oder Elemente. Vorlagen und Ansichtszustände sind etwas komplexer. Die Verwendung von Bibliotheksanimationen in Ansichtszuständen wird jedoch im Thema Storyboardanimationen für visuelle Zustände behandelt.
 

Sie können noch eine Reihe weiterer Designanimationen auf UI-Elemente anwenden und so Animationseffekte erreichen. Die Namen dieser APIs enthalten alle "ThemeAnimation":

APIBeschreibung
DragItemThemeAnimation Stellt die vorkonfigurierte Animation dar, die auf gezogene Elemente angewendet wird.
DragOverThemeAnimation Stellt die vorkonfigurierte Animation dar, die auf Elemente unter gezogenen Elementen angewendet wird.
DropTargetItemThemeAnimation Vorkonfigurierte Animation, die auf mögliche Dropzielelemente angewendet wird.
FadeInThemeAnimation Vorkonfigurierte Deckkraftanimation, die beim ersten Einblenden von Steuerelementen angewendet wird.
FadeOutThemeAnimation Vorkonfigurierte Deckkraftanimation, die beim Ausblenden oder Entfernen von Steuerelementen aus der UI angewendet wird.
PointerDownThemeAnimation Vorkonfigurierte Animation für Benutzeraktionen, bei denen auf ein Element getippt oder geklickt wird.
PointerUpThemeAnimation Vorkonfigurierte Animation für eine Benutzeraktion, die nach dem Tippen auf ein Element und Auslösen der Aktion ausgeführt wird.
PopInThemeAnimation Vorkonfigurierte Animation, die auf Einblendkomponenten von Steuerelementen beim Anzeigen angewendet wird. In dieser Animation sind Deckkraft und Translation kombiniert.
PopOutThemeAnimation Vorkonfigurierte Animation, die auf Einblendkomponenten von Steuerelementen beim Schließen oder Entfernen angewendet wird. In dieser Animation sind Deckkraft und Translation kombiniert.
RepositionThemeAnimation Vorkonfigurierte Animation für die Neupositionierung eines Objekts.
SplitCloseThemeAnimation Vorkonfigurierte Animation, die eine Zielbenutzeroberfläche mithilfe einer geteilten Animation verdeckt.
SplitOpenThemeAnimation In der vorkonfigurierten Animation wird eine Zielbenutzeroberfläche mithilfe einer geteilten Animation verdeutlicht.
SwipeBackThemeAnimation Vorkonfigurierte Animation für Steuerelemente, wenn sich ein Element nach einer Wischinteraktion in den Layoutschlitz zurückbewegt.
SwipeHintThemeAnimation Vorkonfigurierte Animation, die die Möglichkeit einer Wischbewegung angibt.

 

Integrierte Animationen für Steuerelemente

In einige Windows-Runtime-Steuerelemente sind als Teil ihrer Steuerlogik und XAML-Standardvorlagen Animationen integriert. Wir empfehlen, sich mit diesen Steuerelementen vertraut zu machen, damit Sie diese für Ihre Animationen in der UI verwenden können.

Animationen sind u. a. in folgende Steuerelemente integriert:

Hinweis  Diese Liste ist nicht vollständig. Weitere Infos finden Sie in den Animationsthemen im selben Bereich oder den Themen für Stile und Vorlagen für bestimmte Steuerelemente.
 

Erstellen eigener Animationen

Wenn Designanimationen für Ihre Zwecke nicht ausreichen, können Sie eigene Animationen erstellen. Sie animieren Objekte, indem Sie mindestens einen ihrer Eigenschaftenwerte animieren. Beispielsweise können Sie die Breite eines Rechtecks, den Winkel einer RotateTransform oder den Farbwert einer Schaltfläche animieren. Wir bezeichnen diese Art der benutzerdefinierten Animation als Storyboardanimation, um sie von den Bibliotheksanimationen zu unterscheiden, die von der Windows-Runtime bereits als vorkonfigurierter Animationstyp bereitgestellt werden. Für Storyboardanimationen verwenden Sie eine Animation, die Werte eines bestimmten Typs ändern kann (beispielsweise DoubleAnimation, zum Animieren eines Double-Elements), und platzieren die Animation in ein Storyboard, um sie zu steuern.

Damit eine Eigenschaft animiert werden kann, muss es sich um eine Abhängigkeitseigenschaft handeln. Weitere Informationen zu Abhängigkeitseigenschaften finden Sie unter Übersicht über Abhängigkeitseigenschaften. Weitere Informationen zum Erstellen von benutzerdefinierten Storyboardanimationen, u. a. zum Ausrichten und Steuern der Animationen, finden Sie unter Storyboardanimationen.

Der größte Bereich einer App-UI-Definition in XAML, in dem benutzerdefinierte Storyboardanimationen definiert werden, ist das Definieren visueller Zustände für Steuerelemente in XAML. Dies erfolgt entweder beim Erstellen einer neuen Steuerelementklasse oder beim erneuten Erstellen einer Vorlage für ein vorhandenes Steuerelement, das visuelle Zustände in der Steuerelementvorlage aufweist. Weitere Informationen finden Sie unter Storyboardanimationen für visuelle Zustände. Bei diesen Animationen handelt es sich in der Regel nicht um langsame, sondern unmittelbare Übergänge. Sie dienen eher als Technik zum Definieren einer Reihe von Eigenschaftsänderungen für einen Zustand. Sie wenden nicht unbedingt ein visuell animiertes Verhalten auf eine UI an, obwohl die visuellen Zustände für Steuerelemente häufig selbst Bibliotheksanimationen enthalten. In diesem Fall wenden die Designanimationen eine Änderung über einen bestimmten, wenn auch nur kurzen, Zeitraum an.

Verwandte Themen

Roadmap für das Erstellen von Apps mit C# oder VB
Property-path-Syntax
Übersicht über Abhängigkeitseigenschaften
Storyboardanimationen
Storyboardanimationen für visuelle Zustände
Keyframeanimationen und Animationen für Beschleunigungsfunktionen
Storyboard
Storyboard.TargetProperty

 

 

Anzeigen:
© 2017 Microsoft