Animacje scenorysowe

Animacje storyboardowe nie są wyłącznie animacjami w znaczeniu wizualnym. Animacja oparta na scenorysie to sposób zmiany wartości właściwości zależności jako funkcji czasu. Jedną z głównych przyczyn, dla których może być potrzebna animacja scenorysu, która nie pochodzi z biblioteki animacji, jest zdefiniowanie stanu wizualizacji dla kontrolki w ramach szablonu kontrolki lub definicji strony.

Definiowanie animacji na podstawie scenorysów

Animacja oparta na scenorysie to sposób zmiany wartości właściwości zależności jako funkcji czasu. Właściwość, którą animujesz, nie zawsze jest właściwością, która bezpośrednio wpływa na interfejs użytkownika aplikacji. Jednak ponieważ język XAML dotyczy definiowania interfejsu użytkownika dla aplikacji, zwykle jest to właściwość związana z interfejsem użytkownika, którą animujesz. Można na przykład animować kąt ObróćTransform lub wartość koloru tła przycisku.

Jednym z głównych powodów, dla których możesz zdefiniować animację ze scenorysem, jest to, że jesteś autorem kontrolki lub zmieniasz szablon kontrolki i definiujesz stany wizualne. Aby uzyskać więcej informacji, zobacz Scenorysowane animacje dla stanów wizualnych.

Niezależnie od tego, czy definiujesz stany wizualizacji, czy niestandardową animację dla aplikacji, koncepcje i interfejsy API dla animacji scenorysów opisanych w tym temacie mają zastosowanie głównie do jednego z tych elementów.

Aby można było animować, właściwość docelowa z animacją scenorysu musi być właściwością zależności. Właściwość zależności jest kluczową funkcją implementacji XAML środowiska uruchomieniowego systemu Windows. Właściwości zapisywalne najczęściej używanych elementów interfejsu użytkownika są zwykle implementowane jako właściwości zależności, dzięki czemu można je animować, stosować wartości powiązane z danymi lub stosować Style i ustawiać właściwość za pomocą Settera. Aby uzyskać więcej informacji o sposobie działania właściwości zależności, zobacz Omówienie właściwości zależności.

W większości przypadków definiujesz animację scenorysu, pisząc kod XAML. Jeśli używasz narzędzia takiego jak Microsoft Visual Studio, to wygeneruje ono dla ciebie XAML. Istnieje również możliwość zdefiniowania animacji scenorysu przy użyciu kodu, ale jest to mniej powszechne.

Przyjrzyjmy się prostego przykładu. W tym przykładzie XAML właściwość Nieprzezroczystości jest animowana na określonym obiekcie Prostokąt .

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>

  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Identyfikowanie obiektu do animowania

W poprzednim przykładzie scenorys animował właściwość Nieprzezroczystościprostokąta. Animacje nie są zadeklarowane na samym obiekcie. Zamiast tego robi się to w definicji animacji storyboardu. Scenorysy są zwykle definiowane w języku XAML, który nie znajduje się w bezpośrednim sąsiedztwie zdefiniowanego UI XAML obiektu do animacji. Zamiast tego są one zwykle konfigurowane jako zasób XAML.

Aby połączyć animację z obiektem docelowym, odwołujesz się do obiektu docelowego, identyfikując jego nazwę programowania. Zawsze należy zastosować atrybut x:Name w definicji interfejsu użytkownika XAML, aby nazwać obiekt, który chcesz animować. Następnie wybierz obiekt, który ma być animowany, ustawiając Storyboard.TargetName w definicji animacji. Dla wartości Storyboard.TargetName należy użyć ciągu nazwy obiektu docelowego, który jest ustawiony wcześniej i gdzie indziej za pomocą atrybutu x:Name.

Określanie wartości docelowej właściwości zależności w celu animowania

Wartość elementu Storyboard.TargetProperty można ustawić w animacji. Określa, która właściwość obiektu docelowego jest animowana.

Czasami musisz odwołać się do właściwości, która nie jest bezpośrednią właściwością obiektu docelowego, lecz jest zagnieżdżona głębiej w relacji obiekt-właściwość. Często trzeba zagłębić się w szczegóły wartości obiektów i właściwości, dopóki nie można odwołać się do typu właściwości, który może być animowany (Double, Point, Color). Ta koncepcja jest nazywana określaniem wartości docelowej pośredniej, a składnia określania wartości docelowej właściwości w ten sposób jest nazywana ścieżką właściwości.

Oto przykład. Jednym z typowych scenariuszy animacji z użyciem scenorysu jest zmiana koloru części interfejsu użytkownika aplikacji lub kontrolki, aby pokazać, że kontrolka jest w określonym stanie. Załóżmy, że chcesz animować pierwszy planelementu TextBlock, tak aby zmieniał się z czerwonego na zielony. Możesz się spodziewać, że ColorAnimation jest w to zaangażowany – i to jest trafne. Jednak żadna z właściwości elementów interfejsu użytkownika, które mają wpływ na kolor obiektu, nie jest rzeczywiście typu Kolor. Zamiast tego są one typu Szczotka. Dlatego elementem docelowym dla animacji jest właściwość Color klasy SolidColorBrush, która jest typem pochodnym Brush, typowo używanym dla właściwości interfejsu użytkownika związanych z kolorami. Oto, jak wygląda to pod względem tworzenia ścieżki właściwości dla właściwości docelowej animacji:

<Storyboard x:Name="myStoryboard">
  <ColorAnimation
    Storyboard.TargetName="tb1"
    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
    From="Red" To="Green"/>
</Storyboard>

Poniżej przedstawiono sposób myślenia o tej składni pod względem jego części:

• Każdy zestaw nawiasów () zawiera nazwę właściwości.
• W nazwie właściwości znajduje się kropka, a kropka oddziela nazwę typu i nazwę właściwości, aby właściwość, którą identyfikujesz, jest jednoznaczna.
• Kropka w środku, ta, która nie znajduje się wewnątrz nawiasów, jest krokiem. Jest to interpretowane przez składnię jako oznaczenie, aby przyjąć wartość pierwszej właściwości (która jest obiektem), wejść w jej model obiektowy i wybrać konkretną właściwość podrzędną tej wartości pierwszej właściwości.

Oto lista scenariuszy stosowania animacji, w których prawdopodobnie będziesz używać pośredniego celowania w właściwości, oraz niektóre ciągi ścieżki właściwości, które przybliżają składnię, której będziesz używać.

• Animowanie wartości X elementu TranslateTransform zgodnie z zastosowaniem do elementu RenderTransform: (UIElement.RenderTransform).(TranslateTransform.X)
• Animowanie koloru w obrębie elementu GradientStop elementu LinearGradientBrush, zgodnie z zastosowaniem do wypełnienia: (Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)
• Animowanie wartości X elementu TranslateTransform, czyli 1 z 4 przekształceń w grupie transform, stosowanej do elementu RenderTransform:(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)

Niektóre z tych przykładów używają nawiasów kwadratowych wokół liczb. Jest to indeksator. Wskazuje, że nazwa właściwości poprzedzającej ją ma kolekcję jako wartość i że chcesz element (zidentyfikowany przez indeks oparty na zerze) z tej kolekcji.

Można również animować dołączone właściwości XAML. Zawsze ujęć pełną dołączoną nazwę właściwości w nawiasy, na przykład (Canvas.Left). Aby uzyskać więcej informacji, zobacz Animowanie dołączonych właściwości XAML.

Aby uzyskać więcej informacji na temat używania ścieżki właściwości do pośredniego określania wartości docelowej właściwości do animowania, zobacz Składnia ścieżki właściwości.

Typy animacji

System animacji w środowisku uruchomieniowym Windows ma trzy określone typy, do których można stosować animacje storyboardowe:

• Double, można animować za pomocą dowolnego DoubleAnimation
• Punkt, można animować za pomocą dowolnej funkcji PointAnimation
• Kolor, można animować za pomocą dowolnej funkcji ColorAnimation

Istnieje również uogólniony typ animacji obiektu dla wartości odwołań do obiektów, które omówimy później.

Określanie animowanych wartości

Do tej pory pokazaliśmy, jak wybrać obiekt i właściwość do animowania, ale jeszcze nie opisaliśmy, co animacja robi z wartością właściwości w trakcie jej działania.

Opisane przez nas typy animacji są czasami nazywane animacjami From/To/By. Oznacza to, że animacja zmienia wartość właściwości w czasie przy użyciu co najmniej jednego z tych danych wejściowych, które pochodzą z definicji animacji:

• Wartość zaczyna się od wartości Od . Jeśli nie określisz wartości Od , wartość początkowa to dowolna wartość, jaką właściwość animowana ma w czasie przed uruchomieniem animacji. Może to być wartość domyślna, wartość ze stylu lub szablonu albo wartość w szczególności stosowana przez definicję interfejsu użytkownika XAML lub kod aplikacji.
• Na końcu animacji wartość to wartość docelowa.
• Lub, aby określić wartość końcową względem wartości początkowej, ustaw właściwość By . Należy ustawić tę właściwość zamiast właściwości To .
• Jeśli nie określisz wartości Do ani wartości By , wartość końcowa to dowolna wartość, jaką właściwość animowana ma w czasie przed uruchomieniem animacji. W takim przypadku lepiej mieć wartość Od , ponieważ w przeciwnym razie animacja w ogóle nie zmieni wartości; wartości początkowe i końcowe są takie same.
• Animacja zwykle ma co najmniej jeden z elementów Od, By lub To, ale nigdy nie wszystkie trzy.

Wróćmy do wcześniejszego przykładu XAML i ponownie przyjrzyjmy się wartościom Od i Do oraz wartościom Czas trwania. W przykładzie animowana jest właściwość Krycie, a typem właściwości Krycie jest Double. Więc animacja do użycia tutaj jest DoubleAnimation.

From="1.0" To="0.0" Określa, że po uruchomieniu animacji właściwość Nieprzezroczystość zaczyna się od wartości 1 i animuje do 0. Innymi słowy, jeśli chodzi o to, co te wartości podwójne oznaczają dla właściwości Nieprzezroczystość , ta animacja spowoduje, że obiekt zacznie się nieprzezroczysty, a następnie zanika do przezroczystości.

...
<Storyboard x:Name="myStoryboard">
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:1"/>
</Storyboard>
...

Duration="0:0:1" określa, jak długo trwa animacja, czyli jak szybko zanika prostokąt. Właściwość Duration jest określana w postaci hours:minutes:seconds. Czas trwania w tym przykładzie to jedna sekunda.

Aby uzyskać więcej informacji na temat wartości czasu trwania i składni XAML, zobacz Czas trwania.

Od/Do/Po mogą być null

Wspomnieliśmy wcześniej, że można pominąć wartości Od, Do lub By , a tym samym używać bieżących wartości nie animowanych jako podstawy dla brakującej wartości. Właściwości from, To lub By animacji nie są typu, który można odgadnąć. Na przykład typ właściwości DoubleAnimation.To nie jest Double. Zamiast tego jest to Nullable dla typu Double. A jego wartość domyślna to null, a nie 0. Ta wartość null to sposób, w jaki system animacji rozróżnia, że nie ustawiono specjalnie wartości dla właściwości From, To lub By .

Inne właściwości animacji

Właściwości opisane w tej sekcji są opcjonalne, ponieważ mają wartości domyślne, które są odpowiednie dla większości animacji.

AutoReverse

Jeśli nie określisz elementu AutoReverse lub RepeatBehavior w animacji, ta animacja zostanie uruchomiona raz i będzie uruchamiana przez czas określony jako czas trwania.

Właściwość AutoReverse określa, czy oś czasu jest odtwarzana odwrotnie po osiągnięciu końca czasu trwania. Jeśli ustawisz ją na true, animacja zostanie odwrócona po osiągnięciu końca zadeklarowanego czasu trwania, zmieniając wartość z wartości końcowej (To) z powrotem na wartość początkową (Od). Oznacza to, że animacja praktycznie działa dwukrotnie w czasie jej trwania.

RepeatBehavior

Właściwość RepeatBehavior określa, ile razy jest odtwarzana oś czasu lub większy czas trwania, w jakim oś czasu powinna być powtarzana. Domyślnie oś czasu ma liczbę iteracji "1x", co oznacza, że odtwarza się raz przez swoją trwałość i nie powtarza się.

Możesz spowodować uruchomienie wielu iteracji animacji. Na przykład wartość "3x" powoduje uruchomienie animacji trzy razy. Możesz też określić inny czas trwaniadla parametru RepeatBehavior. Ten czas trwania powinien być dłuższy niż czas trwania samej animacji, aby był skuteczny. Jeśli na przykład określisz wartość RepeatBehavior "0:0:10", dla animacji o czasie trwania "0:0:2", ta animacja będzie powtarzana pięć razy. Jeśli te nie podzielą się równomiernie, animacja zostanie obcięta, gdy czas RepeatBehavior zostanie osiągnięty, co może oznaczać obcięcie w połowie cyklu. Na koniec możesz określić specjalną wartość "Forever", co powoduje, że animacja będzie uruchamiana w nieskończoność, dopóki nie zostanie celowo zatrzymana.

Aby uzyskać więcej informacji na temat wartości RepeatBehavior i składni XAML, zobacz RepeatBehavior.

FillBehavior="Stop"

Domyślnie po zakończeniu animacji animacja pozostawia wartość właściwości jako ostateczną wartość Do lub Przez zmodyfikowaną nawet po przekroczeniu czasu trwania. Jeśli jednak ustawisz wartość właściwości FillBehavior na FillBehavior.Stop, wartość animowanej wartości zostanie przywrócona do wartości sprzed zastosowania animacji, a dokładniej do bieżącej obowiązującej wartości określonej przez system właściwości zależności (aby uzyskać więcej informacji na temat tego rozróżnienia, zobacz Omówienie właściwości zależności).

BeginTime

Domyślnie właściwość BeginTime animacji to "0:0:0", więc rozpoczyna się zaraz po uruchomieniu scenorysu. Możesz to zmienić, jeśli scenorys zawiera więcej niż jedną animację i chcesz rozłożyć czasy rozpoczęcia innych w porównaniu z początkową animacją lub utworzyć celowe krótkie opóźnienie.

SpeedRatio

Jeśli masz więcej niż jedną animację w scenorysie , możesz zmienić częstotliwość czasu jednej lub większej liczby animacji względem scenorysu. Jest to nadrzędny Storyboard, który ostatecznie kontroluje, jak upływa czas trwania w czasie trwania animacji. Ta właściwość nie jest często używana. Aby uzyskać więcej informacji, zobacz SpeedRatio.

Definiowanie więcej niż jednej animacji w scenorysie

Zawartość scenorysu może zawierać więcej niż jedną definicję animacji. Jeśli stosujesz powiązane animacje do dwóch właściwości tego samego obiektu docelowego, może istnieć więcej niż jedna animacja. Na przykład można zmienić zarówno właściwości TranslateX , jak i TranslateY elementu TranslateTransform używanego jako RenderTransform elementu interfejsu użytkownika; spowoduje to przetłumaczenie elementu po przekątnej. Potrzebujesz dwóch różnych animacji, aby to osiągnąć, ale możesz chcieć, aby animacje były częścią tej samej scenorysu , ponieważ zawsze chcesz, aby te dwie animacje były uruchamiane razem.

Animacje nie muszą być tego samego typu ani kierować się na ten sam obiekt. Mogą mieć różne czasy trwania i nie muszą udostępniać żadnych wartości właściwości.

Po uruchomieniu nadrzędnego Storyboard każda z animacji w nim również zostanie uruchomiona.

Klasa Storyboard ma wiele takich samych właściwości animacji jak typy animacji, ponieważ obie mają klasę bazową Oś czasu . W związku z tym Storyboard może mieć element RepeatBehavior lub BeginTime. Zazwyczaj nie ustawia się ich na scenorysie , chyba że chcesz, aby wszystkie zawarte animacje miały takie zachowanie. Ogólnie rzecz biorąc, każda właściwość Timeline ustawiona na Storyboardzie ma zastosowanie do wszystkich jej animacji podrzędnych. Jeśli program Storyboard nie zostanie ustawiony, będzie miał niejawny czas trwania obliczony na podstawie najdłuższej wartości Duration zawartych animacji. Jawnie ustawiony czas trwania na Scenorysie krótszy niż jedna z jego animacji podrzędnych spowoduje, że animacja zostanie odcięta, co zwykle nie jest pożądane.

Storyboard nie może zawierać dwóch animacji, które próbują oddziaływać na i animować tę samą właściwość tego samego obiektu. Jeśli spróbujesz to zrobić, podczas próby uruchomienia scenorysu zostanie wyświetlony błąd środowiska uruchomieniowego. To ograniczenie ma zastosowanie nawet wtedy, gdy animacje nie nakładają się w czasie z powodu celowo różnych wartości i czasów trwania BeginTime . Jeśli naprawdę chcesz zastosować bardziej złożoną oś czasu animacji do tej samej właściwości w jednym scenorysie, sposobem, aby to zrobić, jest użycie animacji klatek kluczowych. Zobacz Animacje funkcji key-frame i easing.

System animacji może zastosować więcej niż jedną animację do wartości właściwości, jeśli te dane wejściowe pochodzą z wielu scenorysów. Użycie tego zachowania celowo w przypadku jednoczesnego uruchamiania scenorysów nie jest powszechne. Istnieje jednak możliwość, że animacja zdefiniowana przez aplikację zastosowana do właściwości kontrolki będzie modyfikować wartość HoldEnd animacji, która została wcześniej uruchomiona jako część modelu stanu wizualizacji kontrolki.

Definiowanie scenorysu jako zasobu

Storyboard to kontener, w którym umieszcza się obiekty animacji. Zazwyczaj Scenorys definiuje się jako zasób dostępny dla obiektu, który chcesz animować, w Zasobach na poziomie strony lub Application.Resources.

W następnym przykładzie pokazano, jak poprzedni przykład Storyboard byłby zawarty w definicji zasobów na poziomie strony, gdzie Storyboard jest przypisaną zasobem głównej Strony. Zanotuj atrybut x:Name. Ten atrybut to sposób definiowania nazwy zmiennej dla scenorysu, dzięki czemu inne elementy w języku XAML oraz kod mogą odwoływać się do scenorysu później.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>
  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Definiowanie zasobów w katalogu głównym XAML pliku XAML, takiego jak page.xaml lub app.xaml, jest powszechną praktyką w zakresie organizowania kluczowych zasobów w języku XAML. Zasoby można również uwzględnić w osobnych plikach i scalić je z aplikacjami lub stronami. Aby uzyskać więcej informacji, zobacz ResourceDictionary i odniesienia do zasobów XAML.

Tablice sceniczne dla stanów wizualnych

Animacje można również umieścić w jednostce Scenorysu podczas deklarowania animacji stanu wizualnego dla wizualnego wyglądu kontrolki. W takim przypadku zdefiniowane elementy Storyboard przechodzą do kontenera VisualState, który jest zagnieżdżony głębiej w Style (jest to Style, który jest zasobem kluczowym). W tym przypadku nie potrzebujesz klucza ani nazwy dla swojego Storyboard, ponieważ to VisualState posiada nazwę docelową, której może użyć VisualStateManager. Style kontrolek są często uwzględniane w oddzielnych plikach resourceDictionary XAML, a nie w kolekcji zasobów strony lub aplikacji. Aby uzyskać więcej informacji, zobacz Scenorysowane animacje dla stanów wizualnych.

Animacje zależne i niezależne

W tym momencie musimy wprowadzić pewne ważne kwestie dotyczące działania systemu animacji. W szczególności animacja współdziała zasadniczo ze sposobem renderowania aplikacji Środowiska uruchomieniowego systemu Windows na ekranie oraz sposobu, w jaki renderowanie korzysta z wątków przetwarzania. Aplikacja Środowiska uruchomieniowego systemu Windows zawsze ma główny wątek interfejsu użytkownika, a ten wątek jest odpowiedzialny za aktualizowanie ekranu przy użyciu bieżących informacji. Ponadto aplikacja Środowiska uruchomieniowego systemu Windows ma wątek kompozycji, który jest używany do wstępnego obliczania układów bezpośrednio przed ich pokazaniem. Podczas animacji interfejsu użytkownika może to prowadzić do zwiększenia obciążenia wątku interfejsu użytkownika. System musi ponownie rysować duże obszary ekranu przy użyciu dość krótkich interwałów czasu między poszczególnymi odświeżeniami. Jest to konieczne do przechwycenia najnowszej wartości właściwości animowanej. Jeśli nie będziesz ostrożny, istnieje ryzyko, że animacja może sprawić, że interfejs użytkownika będzie mniej responsywny lub wpłynie na wydajność innych funkcji aplikacji, które również działają w tym samym wątku interfejsu użytkownika.

Animacja, która może spowolnić wątek interfejsu użytkownika, jest nazywana animacją zależną. Animacja, która nie podlega temu ryzyku, jest niezależną animacją. Rozróżnienie między animacjami zależnymi i niezależnymi nie jest określane tylko przez typy animacji (DoubleAnimation i tak dalej), jak opisano wcześniej. Zamiast tego zależy od tego, które właściwości są animowane, i inne czynniki, takie jak dziedziczenie i kompozycja kontrolek. Istnieją okoliczności, w których nawet jeśli animacja zmienia interfejs użytkownika, animacja może mieć minimalny wpływ na wątek interfejsu użytkownika i może być obsługiwana przez wątek kompozycji jako niezależną animację.

Animacja jest niezależna, jeśli ma dowolną z tych cech:

• Czas trwania animacji wynosi 0 sekund (zobacz Ostrzeżenie)
• Animacja dotyczy UIElement.Opacity
• Animacja jest przeznaczona dla wartości właściwości podrzędnej tych właściwości UIElement : Transform3D, RenderTransform, Projection, Clip
• Animacja targetuje Canvas.Left lub Canvas.Top
• Animacja jest przeznaczona dla wartości Brush i używa elementu SolidColorBrush, animując jego kolor
• Animacja to ObjectAnimationUsingKeyFrames

<Storyboard>
  <DoubleAnimationUsingKeyFrames
    Duration="0"
    Storyboard.TargetName="Button2"
    Storyboard.TargetProperty="Width">
    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="200"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

Jeśli animacja nie spełnia tych kryteriów, prawdopodobnie jest to animacja zależna. Domyślnie system animacji nie uruchamia animacji zależnej. Dlatego podczas opracowywania i testowania możesz nawet nie zobaczyć uruchomionej animacji. Nadal można używać tej animacji, ale musisz włączyć każdą taką animację zależną. Aby włączyć animację, ustaw właściwość EnableDependentAnimation obiektu animacji na true. (Każda podklasa Oś czasu reprezentująca animację ma inną implementację właściwości, ale wszystkie są nazwane EnableDependentAnimation).

Wymaganie dotyczące włączenia zależnych animacji, należących do obowiązków dewelopera aplikacji, jest świadomym aspektem projektowania systemu animacji i doświadczenia deweloperskiego. Chcemy, aby deweloperzy zdawali sobie sprawę, że animacje mogą mieć koszt związany z wydajnością i wpływać na reaktywność interfejsu użytkownika. Niska wydajność animacji jest trudna do izolowania i debugowania w aplikacji o pełnej skali. Dlatego lepiej jest włączyć tylko zależne animacje, których naprawdę potrzebujesz w środowisku interfejsu użytkownika aplikacji. Nie chcieliśmy zbyt łatwo naruszyć wydajność aplikacji z powodu animacji dekoracyjnych korzystających z wielu cykli. Aby uzyskać więcej informacji na temat wskazówek dotyczących wydajności animacji, zobacz Optymalizowanie animacji i multimediów.

Jako deweloper aplikacji możesz również zastosować ustawienie dla całej aplikacji, które zawsze wyłącza animacje zależne, nawet wtedy, gdy wartość EnableDependentAnimation jest prawdziwa. Zobacz Timeline.AllowDependentAnimations.

Uruchamianie i kontrolowanie animacji

Wszystko, co pokazaliśmy do tej pory, nie powoduje faktycznego uruchomienia ani zastosowania animacji! Dopóki animacja nie zostanie rozpoczęta i działa, zmiany wartości deklarowane przez animację w XAML są utajone i nie zostaną jeszcze wdrożone. Musisz jawnie uruchomić animację w jakiś sposób, który jest związany z okresem istnienia aplikacji lub środowiskiem użytkownika. Na najprostszym poziomie rozpoczynasz animację, wywołując metodę Begin na Storyboardzie, który jest rodzicem dla tej animacji. Nie można bezpośrednio wywoływać metod z kodu XAML, więc cokolwiek zrobisz, aby włączyć animacje, będziesz wykonywać je z poziomu kodu. Będzie to kod do stron lub składników aplikacji, a może logika kontrolki, jeśli definiujesz niestandardową klasę sterowania.

Zazwyczaj wywołasz metodę Begin i po prostu pozwolisz, aby animacja trwała do końca swojego czasu trwania. Można jednak również użyć metod wstrzymywania, wznawiania i zatrzymywania w celu kontrolowania scenorysu w czasie wykonywania, a także innych interfejsów API, które są używane w bardziej zaawansowanych scenariuszach kontroli animacji.

Po wywołaniu metody Begin w scenorysie zawierającym animację, która powtarza się w nieskończoność (RepeatBehavior="Forever"), animacja działa do momentu rozładowania strony, która ją zawiera, lub wywołania funkcji Wstrzymaj lub Zatrzymaj.

Uruchamianie animacji z poziomu kodu aplikacji

Animacje można uruchamiać automatycznie lub w odpowiedzi na akcje użytkownika. W przypadku trybu automatycznego zazwyczaj używasz zdarzenia cyklu życia obiektu, takiego jak Załadowano, aby działało jako wyzwalacz animacji. Załadowane zdarzenie jest dobrym zdarzeniem do użycia, ponieważ w tym momencie interfejs użytkownika jest gotowy do interakcji, a animacja nie zostanie odcięta na początku, ponieważ inna część interfejsu użytkownika nadal ładowała.

W tym przykładzie zdarzenie PointerPressed jest dołączone do prostokąta, aby po kliknięciu prostokąta przez użytkownika rozpoczynała się animacja.

<Rectangle PointerPressed="Rectangle_Tapped"
  x:Name="MyAnimatedRectangle"
  Width="300" Height="200" Fill="Blue"/>

Procedura obsługi zdarzeń uruchamia scenorys (animację) przy użyciu metody Beginscenorysu.

myStoryboard.Begin();

myStoryboard().Begin();

Zdarzenie Ukończone można obsłużyć, jeśli chcesz, aby inna logika została uruchomiona po zakończeniu stosowania wartości animacji. Ponadto w przypadku rozwiązywania problemów z interakcjami systemu właściwości/animacji metoda GetAnimationBaseValue może być przydatna.

Animacje dla stanów wizualnych

Zachowanie uruchamiania scenorysu używanego do definiowania stanu wizualizacji kontrolki różni się od tego, jak aplikacja może uruchamiać scenorys bezpośrednio. Zgodnie z definicją stanu wizualnego w języku XAML, Storyboard jest elementem w VisualState, a stan jako całość jest kontrolowany przy użyciu interfejsu VisualStateManager API. Wszystkie animacje w ramach programu będą uruchamiane zgodnie z ich wartościami animacji i właściwościami osi czasu , gdy element zawierający element VisualState jest używany przez kontrolkę. Aby uzyskać więcej informacji, zobacz Storyboards for visual states (Scenorysy stanów wizualizacji). W przypadku stanów wizualnych widoczna funkcja FillBehavior jest inna. Jeśli stan wizualizacji zostanie zmieniony na inny, wszystkie zmiany właściwości zastosowane przez poprzedni stan wizualizacji i jej animacje zostaną anulowane, nawet jeśli nowy stan wizualizacji nie zastosuje specjalnie nowej animacji do właściwości.

Storyboard i EventTrigger

Istnieje jeden ze sposobów rozpoczęcia animacji, którą można zadeklarować całkowicie w języku XAML. Jednak ta technika nie jest już powszechnie używana. Jest to starsza składnia z WPF i wczesnych wersji programu Silverlight przed obsługą visualStateManager . Ta składnia EventTrigger nadal działa w środowisku uruchomieniowym systemu Windows XAML ze względów importu/zgodności, ale działa tylko w przypadku zachowania wyzwalacza na podstawie zdarzenia FrameworkElement.Loaded ; próba wyzwolenia innych zdarzeń spowoduje zgłoszenie wyjątków lub nie można skompilować. Aby uzyskać więcej informacji, zobacz EventTrigger lub BeginStoryboard.

Animowanie dołączonych właściwości XAML

Nie jest to typowy scenariusz, ale można zastosować animowaną wartość do dołączanej właściwości XAML. Aby uzyskać więcej informacji na temat dołączonych właściwości i sposobu ich działania, zobacz Omówienie dołączonych właściwości. Celowanie w dołączoną właściwość wymaga składni ścieżki właściwości, która zamyka nazwę właściwości w nawiasach. Możesz animować wbudowane dołączone właściwości, takie jak Canvas.ZIndex , przy użyciu objectAnimationUsingKeyFrames , które stosują dyskretne wartości całkowite. Jednak istniejące ograniczenie implementacji XAML środowiska uruchomieniowego systemu Windows polega na tym, że nie można animować niestandardowej dołączonej właściwości.

Więcej typów animacji i kolejne kroki dotyczące animowania interfejsu użytkownika

Do tej pory pokazaliśmy niestandardowe animacje, które animują się między dwiema wartościami, a następnie liniowo interpolują wartości w razie potrzeby podczas uruchamiania animacji. Są one nazywane Od/Do/Przez animacjami. Istnieje jednak inny typ animacji, który umożliwia deklarowanie wartości pośrednich, które mieszczą się między rozpoczęciem a końcem. Są one nazywane animacjami klatek kluczowych. Istnieje również sposób zmiany zasady interpolacji w animacji From/To/By lub animacji z kluczowymi klatkami. Obejmuje to zastosowanie funkcji złagodzenia. Aby uzyskać więcej informacji na temat tych pojęć, zobacz Animacje klatki kluczowej i funkcji złagodzenia.

Różnice w porównaniu do WPF

Jeśli znasz program Windows Presentation Foundation (WPF), przeczytaj tę sekcję; w przeciwnym razie możesz go pominąć.

Ogólnie rzecz biorąc, tworzenie animacji z użyciem scenorysów w aplikacji na platformie Windows Runtime jest podobne do WPF. Istnieje jednak wiele ważnych różnic:

• Animacje scenorysowe nie są jedynym sposobem wizualnego animowania interfejsu użytkownika ani nie są one koniecznie najprostszym sposobem, w jaki deweloperzy aplikacji to robią. Zamiast używać animacji opartych na scenorysach, często lepszym rozwiązaniem jest użycie animacji motywu i animacji przejścia. Mogą one szybko tworzyć zalecane animacje interfejsu użytkownika bez przechodzenia do zawiłości określania wartości docelowej właściwości animacji. Aby uzyskać więcej informacji, zobacz Animacje w języku XAML.
• W środowisku uruchomieniowym systemu Windows wiele kontrolek XAML obejmuje animacje motywu i animacje przejścia w ramach ich wbudowanego zachowania. W większości przypadków kontrolki WPF nie miały domyślnego zachowania animacji.
• Nie wszystkie niestandardowe animacje tworzone domyślnie mogą być uruchamiane w aplikacji Środowiska uruchomieniowego systemu Windows, jeśli system animacji ustali, że animacja może spowodować złą wydajność interfejsu użytkownika. Animacje, w których system określa, że może wystąpić wpływ na wydajność, są nazywane animacjami zależnymi. Jest to zależne, ponieważ czasowanie animacji działa bezpośrednio względem wątku interfejsu użytkownika, który jest także miejscem, gdzie aktywne dane wejściowe użytkownika oraz inne aktualizacje próbują wprowadzić zmiany w czasie wykonywania do interfejsu użytkownika. Zależna animacja, która zużywa obszerne zasoby systemowe w wątku interfejsu użytkownika, może sprawić, że aplikacja nie odpowiada w pewnych sytuacjach. Jeśli animacja powoduje zmianę układu lub w inny sposób może mieć wpływ na wydajność wątku interfejsu użytkownika, często trzeba jawnie włączyć animację, aby zobaczyć jej uruchomienie. Jest to właściwość EnableDependentAnimation dla określonych klas animacji. Aby uzyskać więcej informacji, zobacz Animacje zależne i niezależne .
• Niestandardowe funkcje luzowania nie są obecnie obsługiwane w środowisku uruchomieniowym systemu Windows.

Tematy pokrewne

• Składnia ścieżki właściwości
• Omówienie właściwości zależności
• Animacje klatek kluczowych i funkcji łagodzenia
• Storybordowe animacje dla stanów wizualnych
• Szablony kontrolek
• Storyboard
• Storyboard.TargetProperty