Udostępnij za pośrednictwem

Animacje w Windows app

Czas, złagodzenie, kierunek i grawitacja współpracują ze sobą, aby stworzyć podstawę ruchu Fluent. Każda z nich musi być brana pod uwagę w kontekście innych i stosowana odpowiednio w kontekście aplikacji.

Poniżej przedstawiono 3 sposoby stosowania podstaw ruchu Fluent w aplikacji.

  • Animacja domyślna
    Automatyczne tweenowanie i ustawienia czasu między wartościami podczas zmiany parametru w celu osiągnięcia bardzo prostego ruchu w stylu Fluent, przy użyciu standardowych wartości.
  • Wbudowana animacja
    Składniki systemowe, takie jak typowe kontrolki i współdzielony ruch, są domyślnie „Fluent”. Zasady zostały zastosowane w sposób zgodny z ich domyślnym zastosowaniem.
  • Niestandardowa animacja zgodnie z zaleceniami dotyczącymi instrukcji
    Czasami system nie zapewnia jeszcze dokładnego rozwiązania ruchu dla danego scenariusza. W takich przypadkach należy użyć podstawowych zaleceń jako punkt wyjścia dla twoich doświadczeń.

Przykład przejścia

animacja funkcjonalna

kierunku do przodu:
Wygaszenie: 150 m; Wygładzanie: Domyślne Przyspieszanie Kierunek Do przodu w:
Przesuń w górę 150 pikseli: 300 ms; Złagodzenie: domyślne spowolnienie

Kierunek Wsteczny Na Zewnątrz:
Przesuń w dół o 150 pikseli: 150 ms; Złagodzenie: domyślne przyspieszanie kierunek: do tyłu
Zanikaj w: 300 ms; Złagodzenie: domyślne spowolnienie

Przykład obiektu

300 ms ruchu

kierunek rozwijania:
Wzrost: 300 ms; Przyspieszenie: Standard

Kierunek Umowy:
Wzrost: 150 ms; Złagodzenie: przyspieszenie domyślne

Animacje niejawne

Niejawne animacje to prosty sposób na uzyskanie płynnego ruchu zgodnego z zasadami Fluent, automatycznie interpolując między starymi a nowymi wartościami podczas zmiany parametru.

Otwórz aplikację Galeria WinUI 3 i zobacz Przejścia domyślne w działaniu

Ikona galerii WinUI 3 Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady kontrolek i funkcji WinUI. Pobierz aplikację z Microsoft Store lub przejrzyj kod źródłowy GitHub.

Możesz niejawnie animować zmiany w następujących właściwościach:

Każda właściwość, której zmiany mogą być animowane w sposób niejawny, ma odpowiednią właściwość przejścia . Aby animować właściwość, należy przypisać typ przejścia do odpowiadającej właściwości przejścia . W tej tabeli przedstawiono właściwości przejścia i typ przejścia, który należy zastosować dla każdego z nich.

Animowana właściwość Właściwość Transition Niejawny typ przejścia
UIElement.Opacity PrzejściePrzezroczystości Przejście skalarne
UIElement.Rotation Przejście Obrotowe Przejście skalarne
UIElement.Scale ScaleTransition Vector3Transition
UIElement.Translation TłumaczenieTransition Vector3Transition
Border.Background Przejście tła BrushTransition (Przejście pędzla)
ContentPresenter.Background Przejście tła BrushTransition (Przejście pędzla)
Panel.Tło Przejście tła BrushTransition (Przejście pędzla)

W tym przykładzie pokazano, jak używać właściwości Przezroczystość i przejść, aby przycisk pojawiał się, gdy kontrolka jest włączona, i znikał, gdy jest wyłączona.

<Button x:Name="SubmitButton"
        Content="Submit"
        Opacity="{x:Bind OpaqueIfEnabled(SubmitButton.IsEnabled), Mode=OneWay}">
    <Button.OpacityTransition>
        <ScalarTransition />
    </Button.OpacityTransition>
</Button>

public double OpaqueIfEnabled(bool IsEnabled)
{
    return IsEnabled ? 1.0 : 0.2;
}
  • Last updated on