Animationen für natürliche Bewegungen

Dieser Artikel bietet eine kurze Übersicht über den NaturalMotionAnimation-Raum und die konzeptionellen Überlegungen zur Verwendung dieser Arten von Animationen auf der Benutzeroberfläche.

Bewegung vertraut und natürlich machen

Großartige Apps sind Solche, die Benutzererlebnisse schaffen, die die Aufmerksamkeit der Benutzer erfassen und beibehalten und Benutzer durch Aufgaben führen. Bewegung ist der wichtigste Unterscheidungsfaktor, der eine Benutzeroberfläche von einer Benutzeroberfläche trennt und eine Verbindung zwischen Benutzern und der Anwendung herstellt, mit der sie interagieren. Je besser die Verbindung, desto höher das Engagement und die Zufriedenheit der Endbenutzer.

Eine Möglichkeit, diese Verbindung herzustellen, besteht darin, Erfahrungen zu schaffen, die den Benutzern vertraut sind. Benutzer haben eine unbewusste Erwartung, wie sie Bewegung wahrnehmen, die auf realen Erfahrungen basiert. Wir sehen, wie Objekte über den Boden gleiten, vom Tisch fallen, ineinander springen und mit einer Feder oszillieren. Bewegung, die diese Erwartung nutzt, indem sie auf der realen Physik basiert, sieht in unseren Augen natürlicher aus und fühlt sich an. Die Bewegung wird natürlicher und interaktiver, aber noch wichtiger, die gesamte Erfahrung wird unvergesslicher und entzückend.

Das Nettoergebnis ist eine höhere Benutzerbindung und -aufbewahrung mit der App.

Ausgleichssteuerung und Dynamik

In der herkömmlichen Benutzeroberfläche sind KeyFrameAnimations die vorherrschende Methode, um Bewegung zu beschreiben. KeyFrames bietet Designern und Entwicklern die größtmögliche Kontrolle über die Definition von Start, Ende und Interpolation. Obwohl dies in vielen Fällen sehr nützlich ist, sind Keyframeanimationen nicht sehr dynamisch; die Bewegung ist nicht anpassungsfähig und sieht unter allen Bedingungen gleich aus.

Am anderen Ende des Spektrums gibt es Simulationen, die häufig in Gaming- und Physik-Engines zu sehen sind. Diese Erfahrungen sind oft die lebenseigen und dynamischsten, mit denen Benutzer interagieren – das Gefühl des Ambientes und der Zufälligkeit, das Benutzer jeden Tag sehen. Obwohl dies das Bewegungsgefühl lebendiger und dynamischer macht, haben Designer und Entwickler weniger Kontrolle, was die Integration in die herkömmliche Benutzeroberfläche erschwert.

NaturalMotionAnimationgibt es, um diese Kluft zu überbrücken – ein Gleichgewicht der Kontrolle für die wichtigen Elemente einer Animation wie Start/Ende zu ermöglichen, aber die Bewegung aufrechtzuerhalten, die natürlich und dynamisch aussieht und sich anfühlt.

Hinweis

NaturalMotionAnimations ist nicht als Ersatz für Keyframeanimationen gedacht – es gibt immer noch Orte in der Fluent-Entwurfssprache, an denen Keyframes empfohlen werden. NaturalMotionAnimations ist für die Verwendung an Orten vorgesehen, an denen Bewegung erforderlich ist, aber Keyframeanimationen nicht dynamisch genug sind.

Verwenden von NaturalMotionAnimations

Ab dem Fall Creators Update haben Sie Zugriff auf eine neue Bewegungsumgebung: Federanimationen. Eine ausführlichere Exemplarische Vorgehensweise für Federn finden Sie unter Federanimationen .

Dieser Bewegungstyp wird durch die Verwendung der neuen NaturalMotionAnimation erreicht – ein neuer Animationstyp, der es Entwicklern ermöglicht, vertraute und natürliche Gefühlsbewegung in ihre Benutzeroberfläche zu integrieren, mit einer Balance von Kontrolle und Dynamik. Sie machen die folgenden Funktionen verfügbar:

• Definieren Sie die Start- und Endwerte.
• Definieren Sie InitialVelocity, und binden Sie mit InteractionTracker an die Eingabe.
• Definieren Sie bewegungsspezifische Eigenschaften (z. B. DampingRatio für Federn).

Allgemeine Formel für die ersten Schritte:

1. Erstellen Sie die NaturalMotionAnimation mithilfe einer der Create-Methoden aus dem Compositor.
2. Definieren Sie die Eigenschaften der Animation.
3. Übergeben Sie naturalMotionAnimation als Parameter an den StartAnimation-Aufruf eines CompositionObject.
   • Oder legen Sie auf die Motion-Eigenschaft eines InteractionTracker InertiaModifier fest.

Ein einfaches Beispiel, in dem eine Feder NaturalMotionAnimation verwendet wird, um eine visuelle "Feder" an eine neue X Offset-Position zu machen:

_springAnimation = _compositor.CreateSpringScalarAnimation();
_springAnimation.Period = TimeSpan.FromSeconds(0.07);
_springAnimation.DelayTime = TimeSpan.FromSeconds(1);
_springAnimation.EndPoint = 500f;
sectionNav.StartAnimation("Offset.X", _springAnimation);