Animacje ruchu naturalnego

Ten artykuł zawiera krótkie omówienie przestrzeni NaturalMotionAnimation i sposób koncepcyjnego myślenia o używaniu tych typów animacji w interfejsie użytkownika.

Sprawiając, że ruch czuje się znajomy i naturalny

Świetne aplikacje to te, które tworzą środowiska, które przechwytują i zachowują uwagę użytkownika, i ułatwiają użytkownikom wykonywanie zadań. Ruch to kluczowy czynnik różnicujący, który oddziela interfejs użytkownika od środowiska użytkownika — wywołując połączenie między użytkownikami a aplikacją, z którą korzystają. Im lepsze połączenie, tym większe zaangażowanie i zadowolenie użytkowników końcowych.

Jednym ze sposobów, w jaki ruch może pomóc w tworzeniu tego połączenia, jest utworzenie środowisk, które wyglądają i czują się znajome dla użytkowników. Użytkownicy mają nieświadome oczekiwania na to, jak postrzegają ruch oparty na rzeczywistych doświadczeniach życia. Widzimy, jak obiekty przesuwają się po podłodze, spadają ze stołu, odbijają się od siebie i oscylują na sprężynie. Ruch, który wykorzystuje to oczekiwanie, opierając się na rzeczywistej fizyce wygląda i czuje się bardziej naturalny w naszych oczach. Ruch staje się bardziej naturalny i interaktywny, ale co ważniejsze, całe doświadczenie staje się bardziej pamiętne i wspaniałe.

Wynik netto to większe zaangażowanie i retencja użytkowników w Twojej aplikacji.

Równoważenie kontroli i dynamizmu

W tradycyjnym interfejsie użytkownika KeyFrameAnimation są dominującym sposobem opisywania ruchu. Ramki kluczowe zapewniają najwyższą kontrolę projektantom i deweloperom w celu zdefiniowania początku, końca i interpolacji. Chociaż jest to bardzo przydatne w wielu przypadkach, animacje z kluczowymi klatkami nie są bardzo dynamiczne; ruch nie dostosowuje się do warunków i wygląda tak samo w każdych warunkach.

Na drugim końcu spektrum znajdują się symulacje często spotykane w silnikach gier i fizyki. Te doświadczenia często są najbardziej podobne do życia i dynamiczne, z którymi użytkownicy wchodzą w interakcję — tworząc takie poczucie atmosfery i losowości, które użytkownicy widzą każdego dnia. Chociaż sprawia to, że ruch czuje się bardziej żywy i dynamiczny, projektanci i deweloperzy mają mniejszą kontrolę, co utrudnia integrację z tradycyjnym interfejsem użytkownika.

NaturalMotionAnimation istnieją, aby wspomóc zniwelowanie tej przepaści, oferując równowagę kontroli nad kluczowymi elementami animacji, takimi jak rozpoczęcie i zakończenie, jednocześnie zachowując ruch, który wygląda i odczuwany jest jako naturalny i dynamiczny.

Uwaga / Notatka

NaturalMotionAnimations nie są przeznaczone jako zamiennik animacji klatek kluczowych — w języku projektowania Fluent nadal zaleca się używanie KeyFrame Animations. Animacje NaturalMotion są przeznaczone do użycia w miejscach, w których ruch jest wymagany, ale animacje klatek kluczowych nie są wystarczająco dynamiczne.

Korzystanie z funkcji NaturalMotionAnimation

W systemie WinUI i zestawie SDK aplikacji systemu Windows masz dostęp do środowiska naturalnego ruchu: animacji sprężynowych. Zobacz animacje sprężyn aby uzyskać bardziej szczegółowy przewodnik po sprężynach.

Ten typ ruchu jest osiągany poprzez użycie nowego rodzaju animacji NaturalMotionAnimation – nowego typu animacji, który umożliwia deweloperom tworzenie bardziej znajomego i naturalnie odczuwanego ruchu w interfejsie użytkownika, zachowując równowagę między kontrolą a dynamiką. Udostępniają one następujące możliwości:

• Zdefiniuj wartości początkowe i końcowe.
• Zdefiniuj wartość InitialVelocity i związaj z danymi wejściowymi za pomocą elementu InteractionTracker.
• Zdefiniuj właściwości specyficzne dla ruchu (takie jak DampingRatio dla sprężyn).

Formuła ogólna, aby rozpocząć pracę:

1. Utwórz NaturalMotionAnimation w kompozytorze, korzystając z jednej z metod Create.
2. Zdefiniuj właściwości animacji.
3. Przekaż parametr NaturalMotionAnimation jako parametr do wywołania StartAnimation obiektu CompositionObject.
   • Możesz też ustawić właściwość Motion inertiaModifier elementu InteractionTracker.

Podstawowy przykład użycia spring NaturalMotionAnimation w celu utworzenia wizualizacji "spring" do nowej lokalizacji przesunięcia X:

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