Schnelle und flüssige Animationen sorgen für lebendige Apps. Bei der Verwendung der Windows 8 Consumer Preview werden Sie feststellen, dass Animationen einen entscheidenden Teil der Benutzeroberfläche ausmachen. Beim Start des PCs werden die Elemente im Startmenü mit einer Animation eingeblendet. Wenn Sie eine App starten oder auf das Startmenü zoomen, erfolgt dies mithilfe einer flüssigen Animation, die die Benutzeroberfläche aufwertet. Animationen dienen auch dazu, Benutzern Rückmeldung zu einer bestimmten Aktion zu bieten. Durch dieses visuelle Feedback wird dem Benutzer angezeigt, dass die App reagiert. Selbst das einfache Hinzufügen oder Entfernen eine Listeneintrags lässt sich mithilfe einer dezenten Animation flüssig, modern und informativ gestalten (wie in Jensen Harris' //build/-Präsentation ca. bei Minute 25:00 dargestellt).

Dieses kurze Video zeigt, wie sich eine Benutzeroberfläche mit flüssigen Animationen aufwerten lässt.


Laden Sie dieses Video herunter, und spielen Sie es in einem geeigneten Media-Player ab:
MP4 in hoher Qualität | MP4 in niedriger Qualität

Animationen sind unter Windows 8 ein wichtiger Bestandteil des Charakters, der den Metro-Stil ausmacht. Diesen Charakter können Sie auch Ihren Apps verleihen.

In diesem Blog-Beitrag gehen wir auf folgende Themen ein:

  1. Eine kurze Übersicht über das Animationsmodul
  2. Erste Schritte mit der Animationsbibliothek
  3. Benutzerdefinierte Animationen und Verwendung der Verbesserungen am Animationsmodul
  4. Tipps und Tricks zum Einbinden von Animationen in Apps im Metro-Stil

Unabhängige Animation

Ein großer Teil der Benutzeroberfläche von Windows 8 besteht aus flüssigen, ruckelfreien Animationen. Diese nutzen eine Funktion, die wir als unabhängige Animation bezeichnen. Als unabhängige Animation werden Animationen bezeichnet, die unabhängig vom Thread der grundlegenden UI-Logik ausgeführt werden. (Eine abhängige Animation wird im UI-Thread ausgeführt.) Unter Windows 8 werden zahlreiche animierte Elemente mithilfe eines Kompositionsmoduls umgesetzt, das in einem separaten Thread ausgeführt wird. Die Arbeitslast des Moduls wird von der CPU in die GPU ausgelagert. Das Auslagern der Komposition in einen unabhängigen Thread hat den Vorteil, dass die Animation durch die Arbeitslast der App im UI-Thread (z. B. das Ausführen von JavaScript-Code oder Synchronisierungsvorgänge) nicht beeinträchtigt wird. Die GPU ist speziell auf hochwertige Grafiken ausgelegt und nutzt die Ressourcen des Videospeichers. Der Rückgriff auf die GPU führt zu einer deutlichen Leistungssteigerung, dank der Animationen flüssig und mit konstanter Framerate ausgeführt werden.

Damit Animationen von der Funktion für unabhängige Animationen profitieren, ist kein zusätzliches Markup erforderlich. Das System ermittelt, wann sich eine Animation unabhängig umsetzen lässt. Befolgen Sie die Richtlinien für unabhängige Animationen im Entwicklungscenter, um Ihre Apps mit leistungsfähigen und flüssigen Animationen zu versehen. Diese Richtlinien sind beim Erstellen benutzerdefinierter Animationen besonders hilfreich. Dies wird im Folgenden noch erläutert.

Werfen wir jedoch zunächst einen Blick darauf, wie Sie Apps mithilfe der Animationen im Metro-Stil aufwerten, die in der Animationsbibliothek bereitgestellt werden.

Animationsbibliothek

Bei der Animationsbibliothek handelt es sich um eine Sammlung von Animationen im Metro-Stil, die speziell für den Zweck zusammengestellt wurde, die Vorteile der plattformeigenen Funktion für unabhängige Animationen zu nutzen. Diese Animationen finden Sie in der gesamten Windows-Benutzeroberfläche, und sie können auch in Apps im Metro-Stil eingesetzt werden. Diese Bibliothek enthält schnelle und flüssige Animationen, die Ihren Anforderungen entsprechen.

Wir greifen bei der Entwicklung von Apps selbst gerne auf die Bibliothek zurück, da wir so Animationen im Design von Windows 8 nicht jedes Mal neu erstellen müssen. Verwenden Sie einfach die Animationsbibliothek, und Ihre App fügt sich nahtlos in die Benutzeroberfläche von Windows ein.

Mithilfe dieser Bibliothek wird auch die Windows-UI selbst animiert. Diese Animationen sind übersichtlich und zweckorientiert. Wir haben besonderen Wert auf die Genauigkeit von Timing und Animationskurven gelegt, sodass Benutzer bei der Verwendung der Windows-UI rasch und flüssig Feedback erhalten. Wir empfehlen Ihnen, beim Entwerfen von Animationen für Ihre Apps zunächst einen Blick in die Animationsbibliothek zu werfen, und nach einer Animation zu suchen, die Ihren Anforderungen entspricht.

Ganz gleich, ob Sie HTML oder XAML verwenden, die Animationsbibliothek bietet Animationen, die für eine schnelle und flüssige Benutzeroberfläche sorgen. Sehen wir uns einige Beispiele an.

JavaScript-Beispiel

Die JavaScript/HTML Personality Library wurde mithilfe von CSS3-Animationen und -Übergängen erstellt. Diese Animationen werden für die App-Navigation, Übergänge bei Inhalten und die Steuerelemente von Windows 8 verwendet.

Eine einfache und überzeugende Animation ist beispielsweise die EnterPage-Animation. Verwenden Sie diese beim erstmaligen Anzeigen von Inhalten oder bei Übergängen zwischen Seiten in einer ausgeführten App.

In diesem Beispiel sehen Sie, wie Sie diese einfache API in einer App verwenden können.

HTML

<html>
<body>
<div id="input">
Some content here
</div>
<button onclick="runAnimation()", Run animation&lt;/button>
</body>
</html>

CSS

<style>
#input
{
background-color:blue;
}
</style>

JavaScript

<script>       
function runAnimation(){
enterPage = WinJS.UI.Animation.enterPage(input);
}
</script>

XAML-Beispiel

In XAML umfasst die integrierte Animationsbibliothek zwei Konzepte: Designübergänge und Designanimationen.

Designübergänge werden in der Regel verwendet, um Grafiken auf dem Bildschirm zu animieren, während diese ein- und ausgeblendet bzw. verschoben werden. Das XAML-Layoutsystem startet diese integrierten Animationen, wenn das Layout der Seite geändert wird.

Zu diesen Layout-Triggern zählen:

  1. Hinzufügen eines UI-Elements zur Seite bzw. der visuellen Struktur
  2. Entfernen eines UI-Elements von der Seite bzw. aus der visuellen Struktur
  3. Aktualisieren der Layouteigenschaften eines vorhandenen UI-Elements auf der Seite oder in der visuellen Struktur, durch das die Größe bzw. der Anzeigeort des UI-Elements geändert wird.

Ein bestimmter Designübergang kann auf einen oder alle Layout-Trigger reagieren. EntranceThemeTransition reagiert auf Trigger 1 und animiert UI-Elemente, die zur Seite bzw. der visuellen Struktur hinzugefügt werden. Im nächsten Beispiel werden sämtliche Grid untergeordneten Elemente mithilfe von EntranceThemeTransition animiert.

<Grid>
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>

<!-- Grid's children go here -->
</Grid>

Bei Designanimationen handelt es sich um integrierte Animationen, die in der Regel bei Benutzereingaben ausgeführt werden. Diese müssen mithilfe eines Triggers ausgeführt werden. Die einfachste Möglichkeit, eine Designanimation auszuführen, ist das Aufrufen der Begin-Methode der Storyboard-Klasse. Wenn Sie mit VisualStateManager (VSM) bereits vertraut sind, lässt sich eine Designanimation auch in einem visuellen Zustand eines Steuerelements unterbringen. Dieses Beispiel zeigt, wie eine Designanimation mithilfe der Begin-Methode ausgelöst wird:

XAML

<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
<Grid.Resources>
<Storyboard x:Name="downAnimation">
<TapDownThemeAnimation TargetName="rectangle"/>
</Storyboard>
<Storyboard x:Name="upAnimation">
<TapUpThemeAnimation TargetName="rectangle"/>
</Storyboard>
</Grid.Resources>

<Rectangle x:Name="rectangle"
PointerPressed="Rectangle_PointerPressed"
PointerReleased="rectangle_PointerReleased"/>
</Grid>

Code


private void Rectangle_PointerPressed(object sender, PointerEventArgs e)
{
downAnimation.Begin();
}

private void rectangle_PointerReleased(object sender, PointerEventArgs e)
{
upAnimation.Begin();
}

Benutzerdefinierte Animationen

Die Animationsbibliothek bietet zahlreiche Inhalte, kann jedoch selbstverständlich nicht alle Szenarien abdecken. Aus diesem Grund können Sie benutzerdefinierte Animationen erstellen, die vom System unabhängig ausgeführt werden. (Hinweise zum Entwurf beim Erstellen eigener Animationen finden Sie unter Animating.) In diesem Fall müssen Sie besonders darauf achten, das die erstellte Animation nicht im UI-Thread ausgeführt wird.

Sie können in Apps weiterhin abhängige Animationen verwenden. Wir empfehlen Ihnen, die Richtlinien für unabhängige Animationen zu befolgen, wenn Sie benutzerdefinierte Animationen erstellen. Falls Sie jedoch an einem Szenario arbeiten, dass Animationen erfordert, die nicht unabhängig ausgeführt werden können, ist eine abhängige Ausführung weiterhin möglich.

Dieses Beispiel zeigt eine nicht affine unabhängige 3D-Animation, die in der Animationsbibliothek nicht vorhanden ist.

JavaScript

Bei JavaScript-Apps können Sie auf die Funktion für unabhängige Animationen mithilfe der CSS3-Syntax Animation und Transition zugreifen, die in IE10 neu zur Microsoft-Webplattform hinzugefügt wurde. Die unabhängige Animation unterstützt ausschließlich Eigenschaften, die kein erneutes Erstellen des Layouts und kein erneutes Rendering erfordern. Dies bedeutet, dass die unabhängige Animation für JavaScript-Apps nur auf CSS-Animationen/-Übergänge angewendet werden kann, die CSS3-Transformationen oder die CSS3-Deckkraft in 2D oder 3D verwenden. Animationen anderer CSS-Eigenschaften werden im UI-Thread abhängig ausgeführt.

Beispiel für eine benutzerdefinierte HTML-Animation

Dieses Beispiel zeigt eine einfache CSS-3D-Spiegelung.

HTML

<html>
<head>
<title>Html animations CSS3</title>
</head>
<body>
<div id="parent">
<div id="box" onclick="className='move'" >Click me for CSS Change!</div>
</div>
</body>
</html>

CSS

<style>
body
{
background-color:gray;
}
#box
{
position: relative;
background-color:green;
width:300px;
height:300px
}

#box.move
{
-ms-transition-property: -ms-transform;
-ms-transition-duration: 1s;
-ms-transition-timing-function: ease-in;
-ms-transform: rotateY(-180deg);
-ms-transform-origin: 50% 50%;
}

#parent{-ms-perspective: 600px;}
</style>

XAML

Bei XAML-Apps wird eine bestimmte Teilmenge von Eigenschaften unabhängig unterstützt. (Weitere Informationen finden Sie im Windows 8-Entwicklungscenter). Zu diesen Eigenschaften gehören Canvas-Positionierung, Deckkraft, das Rendern von Übergängen, Projektionen, Clips und Farbe.

Das Animieren von Eigenschaften, die nicht in der obigen Liste enthalten sind, erfordert eine abhängige Animation. Das heißt, die Animation wird im UI-Thread ausgeführt und ist daher möglicherweise nicht immer ruckelfrei. Um die Entwicklung von schneller und flüssiger UI zu fördern, führt XAML ausschließlich unabhängige Animationen aus, solange abhängige Animationen nicht explizit aktiviert werden. Wenn Sie eine abhängige Animation ausführen möchten, können Sie die EnableDependentAnimation-Eigenschaft von Timeline verwenden. Außerdem steht eine globale statische AllowDependentAnimations-Eigenschaft zur Verfügung, die Sie auf „false“ festlegen können, um alle abhängigen Animationen in einer App zu deaktivieren.

Beispiel für eine benutzerdefinierte XAML-Animation

Das folgende Beispiel zeigt das Animieren von Eigenschaften in PlaneProjection, die vom System unabhängig ausgeführt werden. Die Konzepte und die Syntax der Animation entsprechen anderen XAML-Technologien, wurden unter Windows 8 jedoch so verbessert, dass sie unabhängig ausgeführt werden, was zu einer Verbesserung der Leistungsmerkmale von Apps führt.

<Grid>
<Grid.Resources>
<Storyboard x:Name="customAnimation">
<DoubleAnimation Storyboard.TargetProperty="RotationY" Storyboard.TargetName="projection"
Duration="0:0:1" To="-180" />
</Storyboard>
</Grid.Resources>

<Grid Background="Red" Height="400" Width="600" PointerPressed="Grid_PointerPressed">
<Grid.Projection>
<PlaneProjection x:Name="projection"/>
</Grid.Projection>

<!-- Grid's children go here -->

</Grid>
</Grid>
 
private void Grid_PointerPressed(object sender, PointerEventArgs e)
{
customAnimation.Begin();
}

Bewährte Methoden für unabhängige Animationen

Wie bei allen anderen Systemen auch bestehen für unabhängige Animation einige Einschränkungen. Diese Beschränkungen unterscheiden sich, je nach Verwendung der HTML- bzw. XAML-Plattform. Im Allgemeinen werden unabhängige Animationen in allen außer den folgenden Fällen verwendet:

  1. Animieren von Eigenschaften, die sich auf das Layout auswirken: Diese CSS-Eigenschaften wie beispielsweise „Width“ lösen ein erneutes Erstellen des Layout aus und unterstützen nicht das unabhängige Ausführen.
  2. Der Status des animierten Elements entspricht nicht den Richtlinien für die unabhängige Animation: Unabhängige Animationen, die den Richtlinien nicht entsprechen (weitere Informationen erhalten Sie im Beitrag Animating), werden vom System nicht unterstützt.
  3. Unzureichende Systemressourcen: Sind Systemressourcen (z. B. der Videospeicher) unzureichend, wird eine abhängige Animation verwendet.

Es folgen einige Richtlinien für unabhängige Animationen.

JavaScript

  1. Vermeiden Sie Animationen in Endlosschleife: Bei der Verwendung unabhängiger Animationen, wird von der GPU Videospeicher zugewiesen. In CSS kann –ms-iteration-count: infinite angegeben werden. Wenn Sie diesen Eigenschaftswert festlegen, wird die Animation dauerhaft ausgeführt. Das heißt, dass die App den für die Animation des Elements zugewiesenen Videospeicher belegt, bis Sie die Animation beenden. Um eine dauerhaft ausgeführte Animation zu beenden, können Sie den Wert –ms-animation-name entfernen oder die Anzeigeeigenschaft des Elements zu display: none ändern.
  2. Wechseln Sie nicht die CSS-Eigenschaft „Visibility“: Wenn Sie für ein unabhängig animiertes Element visibility: hidden festlegen, und anschließend zurück zu visibility: visible wechseln, handelt es sich nicht länger um ein unabhängiges Element. Die Animation wird fortgesetzt, wird jedoch im UI-Thread ausgeführt.
  3. Zeigen Sie unabhängig animierte Elemente im Vordergrund an: Da bei der unabhängigen Komposition die GPU verwendet wird, besteht im System ein Limit für die unabhängige Komposition. Wenn sich die unabhängige Animation hinter anderen UI-Elementen befindet, erfolgt auch für die UI-Elemente im Vordergrund eine unabhängige Komposition. Dabei wird unnötig Videospeicher verbraucht. Stellen Sie sicher, dass alle unabhängigen Animationen vor anderen UI-Elementen ausgeführt werden, um dieses Problem zu vermeiden. Wenn sich Ihre unabhängige Animation weit im Hintergrund befindet, wird diese womöglich als abhängige Animation ausgeführt.

    Sie können unabhängige Animationen folgendermaßen im Vordergrund anzeigen:

    • Weisen Sie unabhängig animierten Elementen einen hohen z-Index zu.
    • Verwenden Sie keinen negativen z-Index für eine unabhängig animiertes Element.
    • Lassen Sie unabhängige Animationen nicht durch andere Elemente überlappen.
  4. Verwenden Sie keine großen Oberflächen und nicht zu viele unabhängige Animationen: Ebenso wie auf die Anzeige unabhängiger Animationen im Vordergrund, sollten Sie auf die Größe des animierten Elements achten und darauf, wie viele Elemente gleichzeitig animiert werden. Unabhängige Animationen unterliegen einer Beschränkung durch die GPU des Systems. Wird diese Beschränkung überschritten, werden Animationen im abhängigen UI-Thread ausgeführt. Wenn Sie feststellen, dass Animationen nicht flüssig ausgeführt werden, können Sie die IsIndependentlyComposed-API für eine Abfrage des Elements verwenden.
  5. Verwenden Sie die „IsIndependentlyComposed“-API: Mithilfe dieser API können Sie ermitteln, ob ein HTML-Element unabhängig vom UI-Thread erstellt wird. Diese Eigenschaft gibt für unabhängig animierte Elemente, Subscroller und überlappende Elemente „true“ zurück.

XAML

  1. Skalieren Sie Elemente, wenn deren Höhe bzw. Breite animiert werden soll: Animieren der Eigenschaften Height und/oder Width von UIElement führt zu einer abhängigen Animation, da dies eine Layoutänderung erfordert, die nur im UI-Thread ausgeführt werden kann. Einen mit der Animation von Height oder Width vergleichbaren Effekt erzielen Sie mithilfe der Animation der „Scale“-Eigenschaft des Steuerelements. ScaleTransform wird unabhängig animiert. Dieser Ansatz stellt eine höhere Framerate sicher.
  2. Animieren Sie keine zwischengespeicherten Inhalte: Wenn Sie die CacheMode-Eigenschaft (UIElement.CacheMode) eines Elements auf BitmapCache festlegen, werden alle Animationen in der visuellen Unterstruktur abhängig ausgeführt. Der Grund hierfür ist die Notwendigkeit, den gesamten Zwischenspeicher für jeden Frame neu zu erstellen. Die Lösung besteht darin, einfach keine zwischengespeicherten Elemente zu animieren.
  3. Verwenden Sie keine dauerhaften Animationen für „Progress“-Steuerelemente: ProgressRing und ProgressBar verfügen über dauerhafte Animationen, die auch ausgeführt werden, wenn das Steuerelement nicht auf der Seite angezeigt wird. Dies verhindert unter Umständen, dass die CPU in den Energiespar- oder Leerlaufmodus wechselt. Wir empfehlen, die Eigenschaften ProgressRing.IsActive und ProgressBar.IsIndeterminate auf „false“ festzulegen, wenn die entsprechenden Steuerelemente nicht angezeigt werden.

Zusammenfassung

Wir freuen uns, mit der unabhängigen Animation schnelle und flüssige Benutzeroberflächen von Windows 8-Apps ermöglichen zu können. Wir hoffen, dass Sie beim Erstellen ansprechender Benutzeroberflächen für Ihre Apps im Metro-Stil für Windows 8 die Animationsbibliothek und die Unterstützung benutzerdefinierter Animationen, die unabhängig vom UI-Thread ausgeführt werden, nützlich finden werden.

– Angelina Gambo und Hamid Mahmood
    Programmanager, Windows