Animace v XAML

Animace můžou aplikaci vylepšit přidáním pohybu a interaktivity. Pomocí animací z knihovny animací prostředí Windows Runtime můžete integrovat vzhled a chování Windows do své aplikace. Toto téma obsahuje souhrn animací a příkladů typických scénářů, ve kterých se jednotlivé scénáře používají.

Animace z knihovny animací prostředí Windows Runtime poskytují tyto výhody:

• Pohyby, které odpovídají pokynům pro animace
• Rychlé, proměnlivé přechody mezi stavy uživatelského rozhraní, které uživatele informují, ale neruší uživatele
• Vizuální chování, které uživateli naznačuje přechody v aplikaci

Například, když uživatel přidá položku do seznamu, nová položka se místo okamžitého zobrazení v seznamu animuje na své místo. Ostatní položky v seznamu se animují na nové pozice během krátkého časového období, což zpřístupňuje místo pro přidanou položku. Chování přechodu zde dělá interakci ovládacích prvků pro uživatele zjevnější.

Windows 10 verze 1607 zavádí nové rozhraní API ConnectedAnimationService pro implementaci animací, ve kterých se prvek při přechodu zobrazení animuje během navigace. Toto rozhraní API má jiný způsob použití než jiné rozhraní API animační knihovny. Použití ConnectedAnimationService je popsáno na referenční stránce.

Knihovna animací neposkytuje animace pro každý možný scénář. Existují případy, kdy můžete chtít vytvořit vlastní animaci v XAML. Další informace najdete v tématu Animace ve scénářích.

V některých pokročilých scénářích, jako je animace položky na základě pozice posouvání scrollVieweru, mohou vývojáři chtít k implementaci vlastních animací použít interoperaci vizuální vrstvy. Podívejte se na vizuální vrstvu pro více informací.

Typy animací

Animační systém Windows Runtime a knihovna animací slouží k většímu cíli povolení ovládacích prvků a dalších částí uživatelského rozhraní, aby měly animované chování. Existuje několik různých typů animací.

• Motivové přechody jsou automaticky použity, když se v uživatelském rozhraní změní určité podmínky, včetně ovládacích prvků nebo prvků z předdefinovaných XAML typů uživatelského rozhraní Windows Runtime. Jedná se o přechody motivů , protože animace podporují vzhled a chování Windows a definují, co všechny aplikace dělají pro konkrétní scénáře uživatelského rozhraní, když se změní z jednoho režimu interakce na jiný. Přechody témat jsou součástí knihovny animací.
• Animace motivu jsou animace jedné nebo více vlastností předdefinovaných typů uživatelského rozhraní XAML prostředí Windows Runtime. Animace motivu se liší od přechodů motivu, protože animace motivu cílí na jeden konkrétní prvek a existují v konkrétních vizuálních stavech v rámci ovládacího prvku, zatímco přechody motivu jsou přiřazeny k vlastnostem ovládacího prvku, který existuje mimo stavy vizuálu, a ovlivňují přechody mezi těmito stavy. Mnoho ovládacích prvků XAML ve Windows Runtime zahrnuje animace motivu v rámci časových os, které jsou součástí jejich šablony ovládacího prvku, a animace aktivované vizuálními stavy. Pokud šablony neupravujete, budete mít k dispozici integrované animace motivu pro ovládací prvky v uživatelském rozhraní. Nicméně, pokud šablony nahradíte, odeberete také předdefinované animace motivů řízení. Abyste je získali zpět, musíte definovat scénář, který obsahuje animace motivu v rámci sady vizuálních stavů ovládacího prvku. Animace motivu můžete spustit také z scénářů, které nejsou ve vizuálních stavech, a začít je pomocí metody Begin, ale to je méně časté. Animace motivu patří do knihovny animací.
• Vizuální přechody se použijí, když ovládací prvek přejde z jednoho z definovaných vizuálních stavů do jiného stavu. Jedná se o vlastní animace, které píšete, a obvykle souvisí s vlastní šablonou, kterou píšete pro ovládací prvek, a definice stavu vizuálu v rámci této šablony. Animace se spouští jenom během doby mezi stavy a obvykle je to jen krátká doba, maximálně několik sekund. Další informace najdete v části nazvané "VisualTransition" animací pomocí storyboardů pro vizuální stavy.
• Storyboardové animace animují hodnotu závislostní vlastnosti Windows Runtime v průběhu času. Storyboardy lze definovat jako součást vizuálního přechodu nebo je aktivovat během běhu aplikace. Další informace najdete v tématu Animace ve scénářích. Další informace o vlastnostech závislostí a jejich umístění najdete v přehledu vlastností závislostí.
• připojených animací, které poskytuje nová ConnectedAnimationService API, umožňují vývojářům snadno vytvořit efekt, ve kterém se prvek zobrazuje k animaci mezi zobrazeními během navigace. Toto rozhraní API je dostupné od Windows 10 verze 1607. Další informace najdete v ConnectedAnimationService.

Animace dostupné v knihovně

Následující animace jsou dodávány v knihovně animací. Kliknutím na název animace se dozvíte více o jejich hlavních scénářích použití, o tom, jak je definovat, a podívat se na příklad animace.

• přechod stránky: Animace přechodů stránek v rámečku.
• obsah a vstupní přechod: Animuje zobrazení nebo skrytí jedné části nebo sady obsahu.
• Prolnutí dovnitř/ven a křížové prolnutí: Zobrazuje přechodné prvky a ovládací prvky nebo obnovuje oblast obsahu.
• kurzor nahoru/dolů: Poskytuje vizuální zpětnou vazbu při klepnutí nebo kliknutí na dlaždici.
• Změna umístění: Přesune prvek do nové pozice.
• Zobrazit/Skrýt vyskakovací okno: Zobrazuje kontextové uživatelské rozhraní nad zobrazením.
• Zobrazit/skryť uživatelské rozhraní na okraji: Posouvá uživatelské rozhraní na okraji, včetně velkého uživatelského rozhraní, jako je panel, do nebo mimo zobrazení.
• Změny položky seznamu: Přidá nebo odstraní položku ze seznamu nebo změní pořadí položek.
• přetahování a upouštění: Poskytuje vizuální zpětnou vazbu během operace přetahování a upouštění.

Přechod stránky

K animaci navigace v aplikaci můžete použít přechody stránek. Vzhledem k tomu, že téměř všechny aplikace používají nějaký druh navigace, jsou animace přechodů stránek nejběžnějším typem animace motivu používané aplikacemi. Další informace o rozhraních API pro přechod mezi stránkami najdete pod názvem NavigationThemeTransition.

Přechod obsahu a vstupní přechod

Pomocí animací přechodu obsahu (ContentThemeTransition) můžete přesunout část nebo sadu obsahu do aktuálního zobrazení nebo z něj. Například animace přechodu obsahu zobrazují obsah, který nebyl připraven k zobrazení při prvním načtení stránky nebo při změně obsahu v oddílu stránky.

EntranceThemeTransition představuje pohyb, který se může použít na obsah při prvním načtení stránky nebo velké části uživatelského rozhraní. První vzhled obsahu tak může nabídnout jinou zpětnou vazbu než změna obsahu. EntranceThemeTransition je ekvivalentní k NavigationThemeTransition s výchozími parametry, ale může být použit mimo Frame.

Postupné zmizení/zobrazení a křížové prolínání

Použijte animace postupného zesvětlení a ztmavení k zobrazení nebo skrytí přechodného uživatelského rozhraní nebo ovládacích prvků. V jazyce XAML jsou reprezentovány jako FadeInThemeAnimation a FadeOutThemeAnimation. Jedním z příkladů je panel aplikace, ve kterém se můžou nové ovládací prvky zobrazovat kvůli interakci uživatele. Dalším příkladem je přechodný posuvník nebo indikátor posouvání, který se po určité době bez vstupu uživatele postupně vytratí. Aplikace by také měly při přechodu ze zástupné položky na konečnou položku použít animaci, protože se obsah načítá dynamicky.

Použití křížové animace k vyhlazení přechodu při změně stavu položky; Například když aplikace aktualizuje aktuální obsah zobrazení. Knihovna animací XAML neposkytuje vyhrazenou křížovou animaci, ale stejný výsledek můžete dosáhnout pomocí FadeInThemeAnimation a FadeOutThemeAnimation s překrývajícím se časováním.

Ukazatel nahoru/dolů

Pomocí animací PointerUpThemeAnimation a PointerDownThemeAnimation poskytněte uživateli zpětnou vazbu k úspěšnému klepnutí nebo kliknutí na dlaždici. Například když uživatel klikne nebo klepne na dlaždici dolů, přehraje se animace ukazatele dolů. Po uvolnění kliknutí nebo klepnutí se přehraje animace ukazatele nahoru.

Přemístit

Pomocí animací reposition (RepositionThemeAnimation nebo RepositionThemeTransition) přesuňte prvek do nové pozice. Například přesunutí záhlaví v ovládacím prvku položek používá animaci pro přemísťování.

Zobrazit/skrýt vyskakovací okno

PopInThemeAnimation a PopOutThemeAnimation, když zobrazujete a skrýváte vyskakovací okno nebo podobné kontextové uživatelské rozhraní nad aktuálním zobrazením. PopupThemeTransition je přechod motivu, který je užitečný pro rychlé zavření vyskakovacího okna jako zpětné vazby.

Zobrazení nebo skrytí okrajového uživatelského rozhraní

Použijte animaci EdgeUIThemeTransition k posunutí malého uživatelského rozhraní založeného na hranách do zobrazení a mimo zobrazení. Tyto animace můžete použít například při zobrazení vlastního panelu aplikací v horní nebo dolní části obrazovky nebo povrchu uživatelského rozhraní pro chyby a upozornění v horní části obrazovky.

Pomocí animace PaneThemeTransition můžete zobrazit a skrýt podokno nebo panel. Toto je pro velké uživatelské rozhraní založené na okrajích, jako je vlastní klávesnice nebo podokno úloh.

Změny položek seznamu

Pomocí animace AddDeleteThemeTransition můžete přidat animované chování při přidání nebo odstranění položky v existujícím seznamu. U přidání bude přechod nejprve přemísťovat existující položky v seznamu, aby se uvolnilo místo pro nové položky, a následně přidá nové položky. Pro odstranění přechodně odebere položky ze seznamu a v případě potřeby, jakmile jsou odstraněné položky odebrány, přemístí zbývající položky seznamu.

Existuje také samostatný ReorderThemeTransition , který použijete, pokud položka změní pozici v seznamu. Toto je animované jinak než odstranění položky a jeho přidání na nové místo s přidruženými animacemi pro odstranění nebo přidání.

Tyto animace jsou zahrnuty ve výchozí šabloně ListView a GridView, takže nemusíte tyto animace přidávat ručně, pokud už tyto ovládací prvky používáte.

Přetáhněte/Pusťte

Použijte animace přetahování (DragItemThemeAnimation, DragOverThemeAnimation) a animaci upuštění (DropTargetItemThemeAnimation) k poskytnutí vizuální zpětné vazby, když uživatel přetáhne nebo upustí položku.

Když jsou animace aktivní, zobrazí se uživateli, že seznam se dá změnit podle vyřazené položky. Je užitečné, aby uživatelé věděli, kam bude položka v seznamu umístěna, pokud je položena na aktuálním místě. Animace poskytují vizuální zpětnou vazbu, že položku lze umístit mezi dvě další položky v seznamu a že se tyto položky posunou stranou.

Použití animací s vlastními ovládacími prvky

Následující tabulka shrnuje naše doporučení, kterou animaci byste měli použít při vytváření vlastní verze těchto ovládacích prvků prostředí Windows Runtime:

Příklady přechodových animací

V ideálním případě vaše aplikace používá animace k vylepšení uživatelského rozhraní nebo k tomu, aby byla atraktivnější, aniž by to obtěžující uživatele. Jedním ze způsobů, jak toho dosáhnout, je použít animované přechody v uživatelském rozhraní tak, aby když něco vstoupí na obrazovku nebo ji opustí, případně se jinak změní, animace přitáhla pozornost uživatele ke změně. Tlačítka se například můžou rychle zeslabovat a zmizet místo toho, aby se zobrazovala a zmizela. Vytvořili jsme řadu rozhraní API, která se dají použít k vytvoření doporučených nebo typických animačních přechodů, které jsou konzistentní. V tomto příkladu se dozvíte, jak použít animaci na tlačítko, aby se rychle posunula do zobrazení.

<Button Content="Transitioning Button">
     <Button.Transitions>
         <TransitionCollection> 
             <EntranceThemeTransition/>
         </TransitionCollection>
     </Button.Transitions>
 </Button>

V tomto kódu přidáme Objekt EntranceThemeTransition do přechodové kolekce tlačítka. Když se tlačítko poprvé vykreslí, rychle se posune do viditelnosti, a ne jen se objeví. U animačního objektu můžete nastavit několik vlastností, abyste mohli upravit, jak daleko se posouvá a z jakého směru animace vychází, ale je to opravdu jednoduché API určené pro konkrétní scénář, tedy pro vytvoření poutavého vstupu.

Motivy animací přechodu můžete také definovat v prostředcích stylu aplikace, což vám umožní efekt použít jednotně. Tento příklad je ekvivalentní předchozímu, používá se pouze pomocístylu :

<UserControl.Resources>
     <Style x:Key="DefaultButtonStyle" TargetType="Button">
         <Setter Property="Transitions">
             <Setter.Value>
                 <TransitionCollection>
                     <EntranceThemeTransition/>
                 </TransitionCollection>
             </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
      
<StackPanel x:Name="LayoutRoot">
    <Button Style="{StaticResource DefaultButtonStyle}" Content="Transitioning Button"/>
</StackPanel>

Předchozí příklady používají přechod motivu na jednotlivé ovládací prvky, ale přechody motivu jsou ještě zajímavější, když je použijete na kontejner objektů. Když to uděláte, všechny podřízené objekty kontejneru se účastní přechodu. V následujícím příkladu se EntranceThemeTransition použije na Mřížku obdélníků.

<!-- If you set an EntranceThemeTransition animation on a panel, the
     children of the panel will automatically offset when they animate
     into view to create a visually appealing entrance. -->        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- The sequence children appear depends on their order in 
         the panel's children, not necessarily on where they render
         on the screen. Be sure to arrange your child elements in
         the order you want them to transition into view. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

Podřízené obdélníky mřížky přecházejí do zobrazení jeden po druhém vizuálně příjemným způsobem, namísto toho, aby se zobrazily všechny najednou, jak by tomu bylo, kdybyste tuto animaci použili na jednotlivé obdélníky zvlášť.

Tady je ukázka této animace:

Podřízené objekty kontejneru můžou také znovu tokovat, když se změní pozice jednoho nebo více podřízených objektů. V následujícím příkladu použijeme RepositionThemeTransition na mřížku obdélníků. Když odeberete jeden z obdélníků, všechny ostatní obdélníky se přeuspořádají do nových pozic.

<Button Content="Remove Rectangle" Click="RemoveButton_Click"/>
        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
                    
            <!-- Without this, there would be no animation when items 
                 are removed. -->
            <RepositionThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- All these rectangles are just to demonstrate how the items
         in the grid re-flow into position when one of the child items
         are removed. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
    if (rectangleItems.Items.Count > 0)
    {    
        rectangleItems.Items.RemoveAt(0);
    }                         
}

U jednoho objektu nebo kontejneru objektů můžete použít více animací přechodu. Pokud například chcete, aby se seznam obdélníků animoval při zobrazení a také při změně pozice, můžete takto aplikovat RepositionThemeTransition a EntranceThemeTransition:

...
<ItemsControl.ItemContainerTransitions>
    <TransitionCollection>
        <EntranceThemeTransition/>                    
        <RepositionThemeTransition/>
    </TransitionCollection>
</ItemsControl.ItemContainerTransitions>
...      

Můžete použít několik přechodových efektů k vytváření animací na prvcích uživatelského rozhraní, když jsou přidány, odebrány, přeřazeny a tak dále. Názvy těchto rozhraní API obsahují "ThemeTransition":

Příklady animací motivu

Přechodové animace se dají jednoduše použít. Možná ale budete chtít mít větší kontrolu nad načasováním a pořadím animačních efektů. Animace motivu můžete použít ke získání větší kontroly, přičemž stále zachováváte konzistentní motiv pro chování animace. Animace motivu také vyžadují méně kódu než vlastní animace. Tady použijeme FadeOutThemeAnimation k tomu, aby obdélník zmizel z dohledu.

<StackPanel>    
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <FadeOutThemeAnimation TargetName="myRectangle" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle PointerPressed="Rectangle_Tapped" x:Name="myRectangle"  
              Fill="Blue" Width="200" Height="300"/>
</StackPanel>

// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}

Na rozdíl od přechodových animací animace motivu nemá předdefinovanou aktivační událost (přechod), která ji spouští automaticky. Při definování v jazyce XAML je nutné použít Storyboardu pro zahrnutí animace motivu. Můžete také změnit výchozí chování animace. Můžete například zpomalit prolnutí zvýšením hodnoty časového údaje doba trvání na FadeOutThemeAnimation.

Můžete použít několik dalších animačních motivů na prvky uživatelského rozhraní k vytvoření animačních efektů. Názvy těchto rozhraní API obsahují "ThemeAnimation":

Vytvoření vlastních animací

Pokud animace motivu nestačí vašim potřebám, můžete si vytvořit vlastní animace. Animujete objekty animací jedné nebo více hodnot jejich vlastností. Můžete například animovat šířku obdélníku, úhel objektu RotateTransform nebo barevnou hodnotu tlačítka. Tento typ vlastní animace označujeme jako "animaci podle storyboardu", abychom ji odlišili od animací knihovny, které už prostředí Windows Runtime poskytuje jako předkonfigurovaný typ animace. U animací se scénářem použijete animaci, která může měnit hodnoty určitého typu (například DoubleAnimation pro animaci Double) a umístíte tuto animaci do storyboardu, abyste ji ovládali.

Aby animace fungovala správně, vlastnost, kterou animujete, musí být závislostní vlastností . Další informace o vlastnostech závislostí naleznete v tématu Přehled vlastností závislostí. Další informace o vytváření vlastních storyboardovaných animací, včetně toho, jak je cílit a ovládat, najdete v části Storyboardované animace.

Největší oblastí definice uživatelského rozhraní aplikace v JAZYCE XAML, ve které definujete vlastní animace scénářů, je, pokud definujete vizuální stavy pro ovládací prvky v JAZYCE XAML. Provedete to buď proto, že vytváříte novou třídu ovládacího prvku, nebo proto, že přepracováváte existující ovládací prvek, který má ve své šabloně vizuální stavy. Další informace najdete v tématu Animace se scénářem pro vizuální stavy.