Animace zpracované ve storyboardu

Animace ve scénáři nejsou jen animace ve vizuálním smyslu. Animace ve scénáři představuje způsob, jak změnit hodnotu vlastnosti závislosti jako funkci času. Jedním z hlavních důvodů, proč můžete potřebovat animaci ve scénáři, která není z knihovny animací, je definovat vizuální stav ovládacího prvku jako součást šablony ovládacího prvku nebo definice stránky.

Definování animací s scénářem

Animace ve scénáři představuje způsob, jak změnit hodnotu vlastnosti závislosti jako funkci času. Vlastnost, kterou animujete, není vždy vlastností, která přímo ovlivňuje uživatelské rozhraní vaší aplikace. Vzhledem k tomu, že XAML definuje uživatelské rozhraní pro aplikaci, obvykle se jedná o vlastnost související s uživatelským rozhraním, kterou animujete. Můžete například animovat úhel objektu RotateTransform nebo hodnotu barvy pozadí tlačítka.

Jedním z hlavních důvodů, proč můžete definovat animaci ve scénáři, je to, že jste autor ovládacího prvku nebo znovu šablonujete ovládací prvek a definujete vizuální stavy. Další informace najdete v tématu Animace se scénářem pro vizuální stavy.

Ať už definujete vizuální stavy nebo vlastní animaci aplikace, použijí se koncepty a rozhraní API pro scénáře animací popsané v tomto tématu.

Aby bylo možné animovat, vlastnost, na kterou cílíte, musí být vlastností závislosti. Vlastnost závislosti je klíčovou funkcí implementace XAML prostředí prostředí Windows Runtime. Zapisovatelné vlastnosti nejběžnějších prvků uživatelského rozhraní jsou obvykle implementovány jako vlastnosti závislosti, takže je můžete animovat, použít hodnoty vázané na data nebo použít styl a cílit na vlastnost setter. Další informace o tom, jak vlastnosti závislostí fungují, najdete v tématu Přehled vlastností závislostí.

Ve většině případů definujete animaci s scénářem tak, že napíšete XAML. Pokud používáte nástroj, jako je Microsoft Visual Studio, vytvoří za vás XAML. Pomocí kódu je také možné definovat animaci s scénářem, ale to je méně běžné.

Podívejme se na jednoduchý příklad. V tomto příkladu XAML je vlastnost Neprůhlednost animované u konkrétního obdélníkového objektu .

<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>

Identifikace objektu, který se má animovat

V předchozím příkladu animace animovala vlastnost Neprůhlednostobdélníku. Animace samotného objektu nehlásíte. Místo toho to uděláte v definici animace scénáře. Scénáře jsou obvykle definovány v jazyce XAML, který není v bezprostřední blízkosti definice uživatelského rozhraní XAML objektu k animaci. Místo toho jsou obvykle nastavené jako prostředek XAML.

Pokud chcete připojit animaci k cíli, odkazujete na cíl pomocí jeho programového identifikačního názvu. Atribut x:Name v definici uživatelského rozhraní XAML byste měli vždy použít k pojmenování objektu, který chcete animovat. Pak cílíte na objekt, který chcete animovat nastavením Storyboard.TargetName v rámci definice animace. Pro hodnotu Storyboard.TargetName použijte řetězec názvu cílového objektu, což je to, co jste nastavili dříve a jinde s atributem x:Name.

Cílení na vlastnost závislosti, která se má animovat

V animaci nastavíte hodnotu Storyboard.TargetProperty . Určuje, která konkrétní vlastnost cílového objektu je animovaná.

Někdy potřebujete cílit na vlastnost, která není okamžitou vlastností cílového objektu, ale je vnořená hlouběji v relaci vlastností objektu. Často to musíte udělat, abyste mohli přejít k podrobnostem o sadě hodnot přispívajících objektů a vlastností, dokud nebudete moct odkazovat na typ vlastnosti, který může být animovaný (Double, Point, Color). Tento koncept se nazývá nepřímé cílení a syntaxe pro cílení na vlastnost tímto způsobem se označuje jako cesta vlastnosti.

Následuje příklad. Jedním z běžných scénářů pro storyboarded animaci je změna barvy části uživatelského rozhraní aplikace nebo ovládacího prvku, aby představoval, že ovládací prvek je v určitém stavu. Řekněme, že chcete animovat popředíobjektu TextBlock, takže se změní z červené na zelenou. Očekávali byste, že se jedná o ColorAnimation , a to je správné. Žádná z vlastností prvků uživatelského rozhraní, které mají vliv na barvu objektu, však ve skutečnosti není typu Color. Místo toho jsou typu Brush. Takže to, co skutečně potřebujete cílit při animaci, je vlastnost Color třídy SolidColorBrush, což je typ odvozený od štětce, který se obvykle používá pro barevné vlastnosti uživatelského rozhraní. A takto to vypadá z hlediska vytvoření cesty vlastností pro cílení vlastností animace:

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

Tady je postup, jak si tuto syntaxi představit z hlediska jejích částí:

  • Každá sada () závorek obsahuje název vlastnosti.
  • V názvu vlastnosti je tečka a tato tečka odděluje název typu a název vlastnosti, aby identifikovaná vlastnost byla jednoznačná.
  • Tečka uprostřed, ta, která není uvnitř závorek, je krok. Toto je syntakticky vyloženo tak, že vezmete hodnotu první vlastnosti (která je objektem), procházíte jejím objektovým modelem a zaměříte se na konkrétní podvlastnost hodnoty první vlastnosti.

Zde je seznam scénářů cílení animací, ve kterých pravděpodobně použijete cílení na nepřímé vlastnosti, a několik řetězců cest vlastností, které se blíží syntaxi, jež použijete:

Všimněte si, že některé z těchto příkladů používají hranaté závorky kolem čísel. Toto je indexer. Označuje, že předcházející název vlastnosti má kolekci jako hodnotu a že chcete položku z této kolekce (určenou indexem začínajícím od nuly).

Můžete také animovat připojené vlastnosti XAML. Vždy uzavřete úplný název připojené vlastnosti do závorek, například (Canvas.Left). Další informace najdete v tématu Animace připojených vlastností XAML.

Další informace o tom, jak použít cestu vlastnosti pro nepřímé cílení vlastnosti, kterou chcete animovat, naleznete v tématu Syntaxe cesty k vlastnosti.

Typy animací

Animační systém prostředí Windows Runtime má tři konkrétní typy, na které se můžou použít animace s scénářem:

Existuje také generalizovaný typ animace objektu pro referenční hodnoty objektu, který probereme později.

Určení animovaných hodnot

Zatím jsme vám ukázali, jak směřovat na objekt a vlastnost, které chcete animovat, ale dosud jsme nepopisovali, co animace provádí s hodnotou vlastnosti, když se spuští.

Typy animací, které jsme popsali, se někdy označují jako Od/Do/By animace. To znamená, že animace mění hodnotu vlastnosti v průběhu času pomocí jednoho nebo více těchto vstupů, které pocházejí z definice animace:

  • Hodnota začíná na hodnotě Od . Pokud hodnotu From nezadáte, počáteční hodnota je jakákoli hodnota, kterou má animace v době před spuštěním animace. Může to být výchozí hodnota, hodnota ze stylu nebo šablony nebo hodnota, která je konkrétně použita definicí uživatelského rozhraní XAML nebo kódem aplikace.
  • Na konci animace je hodnota To .
  • Pokud chcete zadat koncovou hodnotu vzhledem k počáteční hodnotě, nastavte vlastnost By . Tuto možnost byste nastavili místo vlastnosti To .
  • Pokud nezadáte hodnotu To nebo By , koncová hodnota je jakákoli hodnota, kterou animované vlastnosti má v době před spuštěním animace. V tomto případě byste raději měli hodnotu Od , protože jinak animace nezmění hodnotu vůbec; počáteční i koncové hodnoty jsou stejné.
  • Animace obvykle obsahuje alespoň jednu z možností Od, By nebo To , ale nikdy všechny tři.

Pojďme se znovu podívat na předchozí příklad XAML a znovu se podívat na hodnoty From a To a Duration. Příklad animuje vlastnost Opacity a typ vlastnosti Opacity je Double. Animace, která se sem použije, je DoubleAnimation.

From="1.0" To="0.0" určuje, že když se animace spustí, vlastnost Neprůhlednost začíná hodnotou 1 a animuje na hodnotu 0. Jinými slovy, pokud jde o to, co tyto dvojité hodnoty znamenají pro vlastnost Neprůhlednost , tato animace způsobí, že objekt začne neprůhledný a pak zmizí na průhledný.

...
<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" určuje, jak dlouho animace trvá, tedy jak rychle obdélník zmizí. Vlastnost Duration je určena ve formě hodin:minutes:seconds. Doba trvání v tomto příkladu je jedna sekunda.

Další informace o hodnotách Doby trvání a syntaxi XAML najdete v tématu Doba trvání.

Poznámka:

V příkladu, který jsme ukázali, pokud jste si jisti, že počáteční stav animovaného objektu má Opacity vždy rovnu 1, a to buď výchozím nastavením nebo explicitní sadou, mohli byste vynechat hodnotu From, animace by použila implicitní počáteční hodnotu a výsledek by byl stejný.

Z/Do/By jsou nullable

Zmínili jsme se dříve, že můžete vynechat hodnotu Od, Do nebo By a použít tak aktuální neanimované hodnoty jako náhrady za chybějící hodnotu. Vlastnosti Od, To nebo By animace nejsou typu, který byste mohli odhadnout. Například typ vlastnosti DoubleAnimation.To není Double. Místo toho jde o Nullable pro Double. Výchozí hodnota je null, nikoli 0. Tato hodnota null je způsob, jakým animační systém rozlišuje, že jste konkrétně nenastavili hodnotu pro vlastnost From, To nebo By .

Další vlastnosti animace

Další vlastnosti popsané v této části jsou všechny volitelné v tom, že mají výchozí hodnoty, které jsou vhodné pro většinu animací.

AutoReverse

Pokud v animaci nezadáte funkci AutoReverse nebo RepeatBehavior , spustí se tato animace jednou a spustí se po dobu určenou jako Doba trvání.

Vlastnost AutoReverse určuje, zda se časová osa přehrává obráceně po dosažení konce doby trvání. Pokud nastavíte hodnotu true, animace se vrátí po dosažení konce deklarované doby trvání a změní hodnotu z jeho koncové hodnoty (To) zpět na počáteční hodnotu (Od). To znamená, že animace efektivně běží dvakrát déle než její trvání.

RepeatBehavior

RepeatBehavior vlastnost určuje, buď kolikrát se časová osa přehraje, nebo dobu trvání, během níž se časová osa má opakovat. Ve výchozím nastavení má časová osa počet iterací 1x, což znamená, že se pro dobu trvání přehrává jednou a neopakuje se.

Animaci můžete způsobit, že spustíte více iterací. Například hodnota "3x" způsobí, že animace se spustí třikrát. Nebo můžete zadat jinou dobu trvání pro RepeatBehavior. Tato doba trvání by měla být delší než doba trvání samotné animace, aby byla efektivní. Pokud například zadáte RepeatBehavior 0:0:10, pro animaci s dobou trvání 0:0:2 se animace opakuje pětkrát. Pokud se nerozdělí rovnoměrně, animace se zkrátí ve chvíli, kdy je dosaženo času RepeatBehavior, což může být uprostřed jejího průběhu. Nakonec můžete zadat speciální hodnotu "Navždy", která způsobí nekonečné spuštění animace, dokud se záměrně nezastaví.

Další informace o hodnotách RepeatBehavior a syntaxi XAML naleznete v tématu RepeatBehavior.

FillBehavior="Stop"

Když animace skončí, animace ve výchozím nastavení ponechá hodnotu vlastnosti jako konečnou hodnotu do nebo po úpravě i po překročení její doby trvání. Pokud však nastavíte hodnotu FillBehavior vlastnost FillBehavior.Stop, hodnota animované hodnoty se vrátí k libovolné hodnotě před použitím animace, nebo přesněji na aktuální efektivní hodnotu určenou systémem vlastností závislostí (další informace o tomto rozdílu naleznete v přehledu vlastností závislostí).

Počáteční čas

Ve výchozím nastavení je BeginTime animace "0:0:0", takže začne se ihned, jakmile se spustí obsahující Storyboard. To můžete změnit, pokud storyboard obsahuje více než jednu animaci a chcete rozsadit časy spuštění ostatních a počáteční animaci nebo vytvořit záměrné krátké zpoždění.

SpeedRatio

Pokud máte ve storyboardu více animací, můžete změnit časovou frekvenci jedné nebo více animací vzhledem ke scénáři. Je to nadřazený Storyboard, který nakonec řídí, jak doba trvání plyne během běhu animací. Tato vlastnost se moc často nepoužívá. Další informace najdete v tématu SpeedRatio.

Definování více než jedné animace ve storyboardu

Obsah scénáře může být více než jedna definice animace. Pokud používáte související animace na dvě vlastnosti stejného cílového objektu, můžete mít více než jednu animaci. Můžete například změnit jak vlastnosti TranslateX, tak TranslateY u TranslateTransform, použitých jako RenderTransform prvku uživatelského rozhraní; to způsobí, že prvek se posune diagonálně. K tomu potřebujete dvě různé animace, ale možná budete chtít, aby byly animace součástí stejné scénáře , protože chcete, aby se tyto dvě animace spouštějí společně.

Animace nemusí být stejného typu nebo cílit na stejný objekt. Můžou mít různé doby trvání a nemusí sdílet žádné hodnoty vlastností.

Když se spustí nadřazená storyboard , spustí se také každá animace v rámci.

Třída Storyboard má ve skutečnosti hodně stejných animačních vlastností jako typy animací, protože obě sdílejí základní třídu časové osy . Storyboard tedy může mít RepeatBehavior nebo BeginTime. Obvykle je ale nenastavíte na storyboard , pokud nechcete, aby toto chování obsahovaly všechny obsažené animace. Obecně platí, že jakákoli vlastnost časové osy nastavená na storyboard se vztahuje na všechny podřízené animace. Pokud je ponecháno bez nastavení, Storyboard má implicitní dobu trvání, která se vypočítá z nejdelší hodnoty Doby trvání obsažených animací. Explicitně nastavená doba trvání na Storyboard, která je kratší než jedna z podřízených animací, způsobí přerušení animace, což obvykle není žádoucí.

Scénář nemůže obsahovat dvě animace, které se pokusí cílit na stejnou vlastnost a animovat stejnou vlastnost na stejném objektu. Pokud to vyzkoušíte, při pokusu o spuštění storyboardu se zobrazí runtime error. Toto omezení platí i v případě, že se animace nepřekrývají v čase kvůli záměrně odlišným hodnotám a dobám počátečního času. Pokud opravdu chcete použít složitější časovou osu animace na stejnou vlastnost v jediném scénáři, je třeba použít klíčovou animaci. Viz Klávesové rámečky a usnadnění animací funkcí.

Animační systém může použít více než jednu animaci na hodnotu vlastnosti, pokud tyto vstupy pocházejí z více scénářů. Použití tohoto chování záměrně pro souběžné spouštění scénářů není běžné. Je však možné, že animace definovaná aplikací, kterou použijete u vlastnosti ovládacího prvku, upraví hodnotu HoldEnd animace, která byla dříve spuštěna jako součást modelu vizuálního stavu ovládacího prvku.

Definování scénáře jako prostředku

Storyboard je kontejner, do kterého vkládáte objekty animace. Storyboard obvykle definujete jako prostředek, který je k dispozici pro objekt, který chcete animovat, buď v prostředcích na úrovni stránky, nebo v Application.Resources.

Tento další příklad ukazuje, jak by předchozí příklad Storyboard byl obsažen v definici Resources na úrovni stránky, kde Storyboard je pojmenovaný prostředek kořenové Page. Poznamenejte si atribut x:Name. Tento atribut je způsob, jakým definujete název proměnné pro Storyboard, aby ostatní prvky v XAML a kód mohly odkazovat na Storyboard později.

<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>

Definování prostředků v kořenovém adresáři XAML souboru XAML, jako je page.xaml nebo app.xaml, je běžným postupem, jak uspořádat klíčové prostředky v XAML. Prostředky můžete také začlenit do samostatných souborů a sloučit je do aplikací nebo stránek. Další informace najdete v tématu ResourceDictionary a odkazy na prostředky XAML.

Poznámka:

Xaml prostředí prostředí Windows Runtime podporuje identifikaci prostředků pomocí atributu x:Key nebo atributu x:Name. Použití atributu x:Name je pro Storyboard častější, protože na něj budete chtít odkazovat podle názvu proměnné, abyste mohli volat jeho metodu Begin a spustit animace. Pokud používáte atribut x:Key, budete muset použít metody ResourceDictionary, jako je indexer Item, abyste ho získali jako zdroj s klíčem, a pak přetypovat načtený prostředek na Storyboard pro použití metod Storyboard.

Scénáře pro vizuální stavy

Také vložíte animace do jednotky Storyboard, když deklarujete vizuální stavy animací pro vizuální vzhled ovládacího prvku. V takovém případě prvky storyboardu , které definujete, přejdou do kontejneru VisualState , který je hlouběji vnořený do stylu (jedná se o styl , který je klíčovým prostředkem). V tomto případě nepotřebujete klíč ani název pro váš Storyboard, protože VisualState má cílový název, který může VisualStateManager vyvolat. Styly ovládacích prvků jsou často rozděleny do samostatných souborů XAML ResourceDictionary místo toho, aby byly umístěny do kolekce Resources na stránce nebo v aplikaci. Další informace najdete v tématu Animace se scénářem pro vizuální stavy.

Závislé a nezávislé animace

V tomto okamžiku musíme uvést některé důležité body týkající se fungování animačního systému. Konkrétně animace zásadně souvisí se způsobem, jakým aplikace WinUI 3 vykresluje obsah na obrazovku, a se způsobem, jakým toto vykreslování využívá zpracovatelská vlákna. Aplikace WinUI 3 má vždy hlavní vlákno uživatelského rozhraní a toto vlákno zodpovídá za aktualizaci obrazovky s aktuálními informacemi. Aplikace WinUI 3 má navíc kompoziční vlákno, které se používá k předběžnému výpočtu rozložení těsně před jejich zobrazením. Když animujete uživatelské rozhraní, může to způsobit spoustu práce pro vlákno uživatelského rozhraní. Systém musí překreslit velké oblasti obrazovky pomocí poměrně krátkých časových intervalů mezi jednotlivými aktualizacemi. To je nezbytné pro zachycení nejnovější hodnoty animované vlastnosti. Pokud nejste opatrní, existuje riziko, že animace může uživatelské rozhraní méně reagovat nebo bude mít vliv na výkon jiných funkcí aplikací, které jsou také ve stejném vlákně uživatelského rozhraní.

Řada animací, která je určena, aby měla určité riziko zpomalení vlákna uživatelského rozhraní, se nazývá závislá animace. Animace, která není předmětem tohoto rizika, je nezávislá animace. Rozdíl mezi závislými a nezávislými animacemi není určen pouze typy animací (DoubleAnimation atd.), jak jsme popsali dříve. Místo toho je určena konkrétními vlastnostmi, které animujete, a další faktory, jako je dědičnost a složení ovládacích prvků. Existují okolnosti, kdy i když animace změní uživatelské rozhraní, může mít animace minimální dopad na vlákno uživatelského rozhraní a místo toho ji může zpracovat vlákno složení jako nezávislá animace.

Animace je nezávislá, pokud má některou z těchto vlastností:

Výstraha

Aby byla animace považována za nezávislá, musíte explicitně nastavit Duration="0". Pokud například odeberete Duration="0" z tohoto XAML, animace se považuje za závislou, i když KeyTime rámce je "0:0:0".

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

Pokud animace nesplňuje tato kritéria, pravděpodobně se jedná o závislou animaci. Ve výchozím nastavení nebude animační systém spouštět závislé animace. Během procesu vývoje a testování se tedy animace nemusí ani zobrazit. Tuto animaci můžete dál používat, ale musíte výslovně povolit každou takovou závislou animaci. Pokud chcete povolit animaci, nastavte Vlastnost EnableDependentAnimation objektu animace na hodnotu true. (Každá podtřída časové osy , která představuje animaci, má jinou implementaci vlastnosti, ale všechny mají název EnableDependentAnimation.)

Požadavek na aktivaci závislých animací, které se přenáší na vývojáře aplikací, je promyšlený aspekt návrhu animačního systému a zkušenosti z vývoje. Chceme, aby vývojáři věděli, že animace mají náklady na rychlost odezvy uživatelského rozhraní. Špatně výkonné animace jsou obtížné izolovat a ladit v plnohodnotné aplikaci. Proto je lepší zapnout jenom závislé animace, které opravdu potřebujete pro uživatelské rozhraní vaší aplikace. Nechtěli jsme, aby bylo příliš snadné ohrozit výkon vaší aplikace kvůli dekorativním animacím, které používají velké množství cyklů. Další informace o tipech k výkonu animace najdete v tématu Optimalizace animací a médií.

Jako vývojář aplikací se také můžete rozhodnout použít nastavení pro celou aplikaci, které vždy zakáže závislé animace, i ty, u kterých je EnableDependentAnimationtrue. Viz Timeline.AllowDependentAnimations.

Návod

Pokud v Blendu pro Visual Studio 2019 používáte panel Animací, při každém pokusu o aplikaci závislé animace na vlastnost vizuálního stavu se v návrháři zobrazí upozornění. Upozornění se nezobrazí ve výstupu sestavení nebo v seznamu chyb. Pokud upravujete XAML ručně, návrhář nezobrazí upozornění. Při ladění se ve výstupním podokně zobrazí upozornění, že animace není nezávislá a bude přeskočena.

Spuštění a řízení animace

Všechno, co jsme vám zatím ukázali, ve skutečnosti nezpůsobí spuštění nebo aplikaci animace. Dokud se animace nezahájí a nespustí, změny hodnot, které animace deklaruje v XAML, zůstanou latentní a neproběhnou. Animace musíte explicitně spustit nějakým způsobem, který souvisí s životností aplikace nebo uživatelským prostředím. Na nejjednodušší úrovni spustíte animaci zavoláním metody Begin na storyboardu , který je nadřazený pro danou animaci. Metody z XAML nemůžete volat přímo, takže cokoli uděláte pro povolení animací, bude pocházet z kódu. To bude buď kód pro stránky nebo komponenty vaší aplikace, nebo možná logika vašeho ovládacího prvku, pokud definujete vlastní třídu ovládacích prvků.

Obvykle zavoláte Begin a necháte animaci běžet až do jejího dokončení. Pomocí metod Pause, Resume a Stop však můžete řídit scénář za běhu i další rozhraní API, která se používají pro pokročilejší scénáře řízení animace.

Když zavoláte Begin na scénáře, který obsahuje animaci, která se opakuje neomezeně (RepeatBehavior="Forever"), spustí se tato animace, dokud se nenačte stránka obsahující ji, nebo konkrétně zavoláte Pozastavit nebo Zastavit.

Spuštění animace z kódu aplikace

Animace můžete spustit automaticky nebo v reakci na akce uživatelů. V případě automatického případu obvykle používáte událost životnosti objektu, například Načteno , aby fungovala jako aktivační událost animace. Událost Načtená je dobrou událostí, která se má použít, protože v tomto okamžiku je uživatelské rozhraní připravené k interakci a animace se na začátku neoříznou, protože se ještě načítala jiná část uživatelského rozhraní.

V tomto příkladu je událost PointerPressed připojena k obdélníku, takže když uživatel klikne na obdélník, animace začne.

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

Obslužná rutina události spustí Storyboard (animaci) pomocí metody Begin třídy Storyboard.

myStoryboard.Begin();

myStoryboard().Begin();

Událost Dokončeno můžete zpracovat, pokud chcete, aby se po dokončení animace po použití hodnot spustila jiná logika. Pro řešení potíží se systémem vlastností nebo animačními interakcemi může být užitečná metoda GetAnimationBaseValue .

Návod

Pokaždé, když kódujete pro scénář aplikace, ve kterém spouštíte animaci z kódu aplikace, můžete zkontrolovat, jestli animace nebo přechod už v knihovně animací pro váš scénář uživatelského rozhraní existuje. Animace knihoven umožňují konzistentnější uživatelské rozhraní ve všech aplikacích windows Runtime a snadněji se používají.

Animace pro vizuální stavy

Chování spuštění Storyboardu, který se používá k definování vizuálního stavu ovládacího prvku, se liší od toho, jak může aplikace spouštět storyboard přímo. Jak je použito u definice stavu vizuálu v XAML, Storyboard je prvek obsahující VisualState a stav jako celek je řízen pomocí rozhraní VisualStateManager API. Všechny animace v rámci se budou spouštět podle jejich hodnot animací a vlastností časové osy , pokud ovládací prvek obsahuje VisualState . Další informace najdete v tématu Storyboardy pro vizuální stavy. U vizuálních stavů se zjevná FillBehavior liší. Pokud se stav vizuálu změní na jiný stav, všechny změny vlastností použité předchozím stavem vizuálu a jeho animace se zruší, i když nový stav vizuálu výslovně nepoužije novou animaci na vlastnost.

Storyboard a EventTrigger

Existuje jeden způsob, jak spustit animaci, která se dá deklarovat zcela v XAML. Tato technika se už ale běžně nepoužívá. Jedná se o starší syntaxi z WPF (Windows Presentation Foundation) a dřívějších verzí Silverlightu před podporou VisualStateManageru . Tato syntaxe EventTriggeru stále funguje v xaml modulu prostředí Windows Runtime z důvodů importu a kompatibility, ale funguje pouze pro chování triggeru na základě události FrameworkElement.Loaded ; při pokusu o aktivaci jiných událostí dojde k výjimkám nebo se nezdaří kompilace. Další informace najdete v tématu EventTrigger nebo BeginStoryboard.

Animace připojených vlastností XAML

Nejedná se o běžný scénář, ale u připojené vlastnosti XAML můžete použít animovanou hodnotu. Další informace o tom, co jsou připojené vlastnosti a jak fungují, najdete v přehledu připojených vlastností. Cílení na připojenou vlastnost vyžaduje syntaxi cesty vlastností , která uzavře název vlastnosti do závorek. Předdefinované připojené vlastnosti, jako je Canvas.ZIndex , můžete animovat pomocí ObjectAnimationUsingKeyFrames , které používají diskrétní celočíselné hodnoty. Existující omezení implementace XAML modulu prostředí Windows Runtime však spočívá v tom, že nemůžete animovat vlastní připojenou vlastnost.

Další typy animací a další kroky pro seznámení s animací uživatelského rozhraní

Až doteď jsme předvedli vlastní animace, které animují mezi dvěma hodnotami a poté lineárně interpolují hodnoty podle potřeby. Ty se nazývají Od/Do/Podle animacemi. Existuje ale jiný typ animace, který umožňuje deklarovat přechodné hodnoty, které spadají mezi začátek a konec. Tyto animace se nazývají animace s klíčovými snímky. Existuje také způsob, jak změnit logiku interpolace u animace From/To/By nebo u animace s klíčovými snímky. To zahrnuje použití funkce pro usnadnění. Další informace o těchto konceptech najdete v tématu Klávesové snímky a usnadnění animací funkcí.

Rozdíly mezi WPF (Windows Presentation Foundation)

Pokud znáte Windows Presentation Foundation (WPF (Windows Presentation Foundation)), přečtěte si tuto část; v opačném případě ho můžete přeskočit.

Obecně platí, že vytváření scénářů animací v aplikaci WinUI 3 se podobá WPF (Windows Presentation Foundation). Existuje ale řada důležitých rozdílů:

  • Animace ve scénářích nejsou jediným způsobem, jak vizuálně animovat uživatelské rozhraní, ani nemusí být nejjednodušším způsobem, jak to vývojáři aplikací udělat. Místo použití animací s scénářem je často lepším postupem návrhu používat animace motivu a přechodové animace. Tyto nástroje mohou rychle vytvářet doporučené animace uživatelského rozhraní, aniž by se zabývaly složitostmi cílení na vlastnosti animace. Další informace najdete v tématu Animace v XAML.
  • V prostředí prostředí Windows Runtime zahrnuje mnoho ovládacích prvků XAML animace motivu a přechodové animace jako součást jejich integrovaného chování. Ve většině případů ovládací prvky WPF (Windows Presentation Foundation) neměly výchozí chování animace.
  • Ne všechny vlastní animace, které vytvoříte, se dají spustit ve výchozím nastavení v aplikaci WinUI 3, pokud animační systém zjistí, že animace může způsobit špatný výkon v uživatelském rozhraní. Animace, ve kterých systém určuje, že může mít vliv na výkon, se označují jako závislé animace. Je to závislé, protože načasování vaší animace přímo pracuje proti vláknu uživatelského rozhraní, což je místo, kde se aktivní uživatelský vstup a další aktualizace snaží aplikovat změny běhového prostředí na uživatelské rozhraní. Závislá animace, která využívá rozsáhlé systémové prostředky ve vlákně uživatelského rozhraní, může v určitých situacích aplikaci zobrazovat jako nereagující. Pokud animace způsobí změnu rozložení nebo jinak může mít vliv na výkon ve vlákně uživatelského rozhraní, často musíte animaci explicitně povolit, aby se spustila. K tomu je vlastnost EnableDependentAnimation pro konkrétní třídy animace. Další informace najdete v tématu Závislé a nezávislé animace .
  • Vlastní funkce easingu se v současné době nepodporují v prostředí prostředí Windows Runtime.
  • Last updated on