Sdílet prostřednictvím

Přehled animace

  • Článek

Windows Presentation Foundation (WPF) poskytuje výkonnou sadu grafických a rozložení funkcí, které umožňují vytvářet atraktivní uživatelská rozhraní a atraktivní dokumenty. Animace může ještě působivější a použitelnější uživatelské rozhraní. Stačí animovat barvu pozadí nebo použít animovaný Transform, můžete vytvořit dramatický přechod na obrazovku nebo poskytnout užitečné vizuální pomůcky.

Tento přehled obsahuje úvod do systému animací a časování WPF. Zaměřuje se na animaci objektů WPF pomocí scénářů.

Představení animací

Animace je iluzí, kterou vytváří rychlá cyklistika řadou obrázků, přičemž každá se mírně liší od poslední. Mozek vnímá skupinu obrázků jako jednu měnící se scénu. Ve filmu je tato iluze vytvořena pomocí fotoaparátů, které zaznamenávají mnoho fotografií, nebo snímků, každý druhý. Když se snímky přehrají projektorem, publikum uvidí pohyblivý obrázek.

Animace na počítači je podobná. Například program, který vytváří kresbu obdélníku ze pohledu, může fungovat následovně.

  • Program vytvoří časovač.

  • Program zkontroluje časovač v nastavených intervalech a zjistí, kolik času uplynulo.

  • Pokaždé, když program zkontroluje časovač, vypočítá aktuální hodnotu neprůhlednosti pro obdélník na základě toho, kolik času uplynulo.

  • Program pak aktualizuje obdélník novou hodnotou a překreslí ho.

Před WPF museli vývojáři Microsoft Windows vytvářet a spravovat vlastní systémy časování nebo používat speciální vlastní knihovny. WPF obsahuje efektivní systém časování, který je vystavený prostřednictvím spravovaného kódu a XAML a který je hluboce integrovaný do architektury WPF. Animace WPF usnadňuje animaci ovládacích prvků a dalších grafických objektů.

WPF zpracovává veškerou práci na pozadí správy systému časování a efektivní překreslení obrazovky. Poskytuje třídy časování, které vám umožní zaměřit se na efekty, které chcete vytvořit, a ne na mechaniku dosažení těchto efektů. WPF také usnadňuje vytváření vlastních animací zveřejněním základních tříd animace, ze kterých mohou třídy dědit, a vytvářet přizpůsobené animace. Tyto vlastní animace získají řadu výhod výkonu standardních tříd animací.

Animační systém vlastností WPF

Pokud rozumíte několika důležitým konceptům systému časování, můžou se animace WPF snadněji používat. Nejdůležitější je, že ve WPF animujete objekty použitím animace na jejich jednotlivé vlastnosti. Pokud například chcete, aby se prvek architektury zvětšil, animujete jeho Width a Height vlastnosti. Pokud chcete objekt ze zobrazení zesvětlovat, animujete jeho Opacity vlastnost.

Aby vlastnost měla možnosti animace, musí splňovat následující tři požadavky:

  • Musí to být vlastnost závislosti.

  • Musí patřit do třídy, která dědí z DependencyObject a implementuje IAnimatable rozhraní.

  • K dispozici musí být kompatibilní typ animace. (Pokud WPF ho neposkytuje, můžete si vytvořit vlastní. Viz přehled vlastních animací.)

WPF obsahuje mnoho objektů, které mají IAnimatable vlastnosti. Ovládací prvky jako Button a , TabControla také Panel a Shape objekty dědí z DependencyObject. Většina jejich vlastností jsou vlastnosti závislostí.

Animace můžete používat téměř kdekoli, což zahrnuje styly a šablony ovládacích prvků. Animace nemusí být vizuální; Objekty, které nejsou součástí uživatelského rozhraní, můžete animovat, pokud splňují kritéria popsaná v této části.

Příklad: Zesvětlit prvek a z zobrazení

Tento příklad ukazuje, jak pomocí animace WPF animovat hodnotu vlastnosti závislosti. Používá DoubleAnimation, což je typ animace, která generuje Double hodnoty, k animaci Opacity vlastnosti Rectangle. V důsledku toho Rectangle se zeslabí a zmizí z pohledu.

První část příkladu vytvoří Rectangle prvek. Následující postup ukazuje, jak vytvořit animaci a použít ji u vlastnosti obdélníku Opacity .

Následující příklad ukazuje, jak vytvořit Rectangle prvek v StackPanel xaml.

<StackPanel Margin="10">
    <Rectangle
        Name="MyRectangle"
        Width="100" 
        Height="100"
        Fill="Blue">
    </Rectangle>
</StackPanel>

Následující příklad ukazuje, jak vytvořit Rectangle prvek v StackPanel kódu.

var myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);

var myRectangle = new Rectangle();
myRectangle.Name = "myRectangle";
this.RegisterName(myRectangle.Name, myRectangle);
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = Brushes.Blue;
myPanel.Children.Add(myRectangle);
this.Content = myPanel;

Dim myPanel As New StackPanel()
myPanel.Margin = New Thickness(10)

Dim myRectangle As New Rectangle()
myRectangle.Name = "myRectangle"
Me.RegisterName(myRectangle.Name, myRectangle)
myRectangle.Width = 100
myRectangle.Height = 100
myRectangle.Fill = Brushes.Blue

myPanel.Children.Add(myRectangle)
Me.Content = myPanel

Část 1: Vytvoření doubleAnimation

Jedním ze způsobů, jak prvek zesvětlit a ze zobrazení, je animovat jeho Opacity vlastnost. Vzhledem k tomu, že Opacity vlastnost je typu Double, potřebujete animaci, která vytváří dvojité hodnoty. A DoubleAnimation je jednou z takových animací. A DoubleAnimation vytvoří přechod mezi dvěma dvojitými hodnotami. Chcete-li zadat počáteční hodnotu, nastavíte její From vlastnost. Chcete-li zadat její koncovou hodnotu, nastavte její To vlastnost.

  1. Hodnota neprůhlednosti 1.0 objektu je zcela neprůhledná a neprůhledná hodnota 0.0 z něj činí zcela neviditelnou. Chcete-li nastavit přechod animace z nastavení jeho vlastnosti na a jeho To vlastnost na 0.0.1.0 From 0.0 1.0 Následující příklad ukazuje, jak vytvořit DoubleAnimation v JAZYCE XAML.

    <DoubleAnimation From="1.0" To="0.0" />

    Následující příklad ukazuje, jak vytvořit DoubleAnimation v kódu.

    var myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;

    Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0

  2. Dále je nutné zadat .Duration Animace Duration určuje, jak dlouho trvá přechod od počáteční hodnoty do cílové hodnoty. Následující příklad ukazuje, jak v XAML nastavit Duration hodnotu na pět sekund.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />

    Následující příklad ukazuje, jak v kódu nastavit Duration hodnotu na pět sekund.

    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

    myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

  3. Předchozí kód ukázal animaci, která přechází z 1.0 0.0, což způsobí, že cílový prvek zmizí z zcela neprůhledné na zcela neviditelný. Chcete-li prvek zesvětlovat zpět do zobrazení poté, co zmizí, nastavte AutoReverse vlastnost animace na true. Pokud chcete, aby se animace opakovala neomezeně dlouho, nastavte její RepeatBehavior vlastnost na Forever. Následující příklad ukazuje, jak nastavit AutoReverse vlastnosti a RepeatBehavior vlastnosti v XAML.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>

    Následující příklad ukazuje, jak nastavit AutoReverse vlastnosti a RepeatBehavior vlastnosti v kódu.

    myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

    myDoubleAnimation.AutoReverse = True
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

Část 2: Vytvoření scénáře

Pokud chcete použít animaci u objektu, vytvoříte Storyboard a použijete TargetName a TargetProperty připojíte vlastnosti k určení objektu a vlastnosti k animaci.

  1. Storyboard Vytvořte a přidejte animaci jako její podřízenou. Následující příklad ukazuje, jak vytvořit Storyboard v JAZYCE XAML.

    <Storyboard>
    <DoubleAnimation
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    Chcete-li vytvořit Storyboard v kódu, deklarujte proměnnou Storyboard na úrovni třídy.

    public partial class MainWindow : Window
{
    private Storyboard myStoryboard;

    Class MainWindow

    Private myStoryboard As Storyboard

    Potom inicializujte Storyboard a přidejte animaci jako její podřízenou položku.

    myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

    myStoryboard = New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

  2. Musí Storyboard vědět, kde použít animaci. K určení objektu, který chcete animovat, použijte připojenou Storyboard.TargetName vlastnost. Následující příklad ukazuje, jak nastavit cílový název objektu DoubleAnimation v MyRectangle jazyce XAML.

    <Storyboard>
    <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    Následující příklad ukazuje, jak nastavit cílový název DoubleAnimation MyRectangle kódu.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

  3. TargetProperty Pomocí připojené vlastnosti určete vlastnost, která se má animovat. Následující příklad ukazuje, jak je animace nakonfigurována tak, aby cílila na Opacity vlastnost Rectangle v xaml.

    <Storyboard>
    <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    Následující příklad ukazuje, jak je animace nakonfigurována tak, aby cílila na Opacity vlastnost Rectangle v kódu.

    Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

    Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

Další informace o TargetProperty syntaxi a dalších příkladech najdete v přehledu scénářů.

Část 3 (XAML): Přidružení scénáře k triggeru

Nejjednodušší způsob, jak použít a spustit Storyboard v XAML, je použít trigger události. Tato část ukazuje, jak přidružit trigger k triggeru Storyboard v XAML.

  1. Vytvořte BeginStoryboard objekt a přidružte k němu scénář. A BeginStoryboard je typTriggerAction, který se použije a spustí .Storyboard

    <BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="MyRectangle" 
      Storyboard.TargetProperty="Opacity"
      From="1.0" To="0.0" Duration="0:0:5" 
      AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</BeginStoryboard>

  2. Vytvořte EventTrigger kolekci a přidejte ji BeginStoryboard do její Actions kolekce. RoutedEvent Nastavte vlastnost EventTrigger na směrovanou událost, kterou chcete spustit Storyboard. (Další informace o směrovaných událostech najdete v tématu Přehled směrovaných událostí.)

    <!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
  <BeginStoryboard>
    <Storyboard>
      <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
  </BeginStoryboard>
</EventTrigger>

  3. EventTrigger Přidejte do Triggers kolekce obdélníku.

    <Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>
    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Část 3 (kód): Přidružení scénáře k obslužné rutině události

Nejjednodušší způsob, jak použít a spustit Storyboard v kódu, je použít obslužnou rutinu události. Tato část ukazuje, jak přidružit obslužnou rutinu Storyboard události v kódu.

  1. Zaregistrujte událost Loaded obdélníku.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

  2. Deklarujte obslužnou rutinu události. V obslužné rutině události použijte Begin metodu pro použití scénáře.

    private void myRectangleLoaded(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin(this);
}

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Begin(Me)
End Sub

Kompletní příklad

Následující příklad ukazuje, jak vytvořit obdélník, který v XAML zmizí a z zobrazení.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Margin="10">
            <Rectangle
                Name="MyRectangle"
                Width="100" 
                Height="100"
                Fill="Blue">
                <Rectangle.Triggers>
                    <!-- Animates the rectangle's opacity. -->
                    <EventTrigger RoutedEvent="Rectangle.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="MyRectangle" 
                                    Storyboard.TargetProperty="Opacity"
                                    From="1.0" To="0.0" Duration="0:0:5" 
                                    AutoReverse="True" RepeatBehavior="Forever" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Rectangle.Triggers>
            </Rectangle>
        </StackPanel>
    </Grid>
</Window>

Následující příklad ukazuje, jak vytvořit obdélník, který v kódu zmizí a z zobrazení.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;

        public MainWindow()
        {
            InitializeComponent();

            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 1.0;
            myDoubleAnimation.To = 0.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            // Use the Loaded event to start the Storyboard.
            myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
            myPanel.Children.Add(myRectangle);
            this.Content = myPanel;
        }

        private void myRectangleLoaded(object sender, RoutedEventArgs e)
        {
            myStoryboard.Begin(this);
        }
    }
}

Imports System.Windows.Media.Animation

Class MainWindow

    Private myStoryboard As Storyboard

    Public Sub New()
        InitializeComponent()

        Dim myPanel As New StackPanel()
        myPanel.Margin = New Thickness(10)

        Dim myRectangle As New Rectangle()
        myRectangle.Name = "myRectangle"
        Me.RegisterName(myRectangle.Name, myRectangle)
        myRectangle.Width = 100
        myRectangle.Height = 100
        myRectangle.Fill = Brushes.Blue

        Dim myDoubleAnimation As New DoubleAnimation()
        myDoubleAnimation.From = 1.0
        myDoubleAnimation.To = 0.0
        myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
        myDoubleAnimation.AutoReverse = True
        myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

        myStoryboard = New Storyboard()
        myStoryboard.Children.Add(myDoubleAnimation)
        Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
        Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

        ' Use the Loaded event to start the Storyboard.
        AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

        myPanel.Children.Add(myRectangle)
        Me.Content = myPanel
    End Sub

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myStoryboard.Begin(Me)
    End Sub

End Class

Typy animací

Vzhledem k tomu, že animace generují hodnoty vlastností, existují různé typy animací pro různé typy vlastností. Chcete-li animovat vlastnost, která přebírá Double, například Width vlastnost elementu, použijte animaci, která vytváří Double hodnoty. Chcete-li animovat vlastnost, která přebírá Point, použijte animaci, která vytváří Point hodnoty atd. Vzhledem k počtu různých typů vlastností existuje v System.Windows.Media.Animation oboru názvů několik tříd animace. Naštěstí se řídí striktními konvencemi pojmenování, které usnadňují rozlišení mezi nimi:

  • <Animace typu>

    Tato animace se označuje jako "Od/Do/Podle" nebo "základní" animace mezi počáteční a cílovou hodnotou nebo přidáním hodnoty posunu do počáteční hodnoty.

    • Chcete-li zadat počáteční hodnotu, nastavte vlastnost From animace.

    • Chcete-li zadat koncovou hodnotu, nastavte vlastnost To animace.

    • Chcete-li zadat hodnotu posunu, nastavte vlastnost By animace.

    Příklady v tomto přehledu používají tyto animace, protože jsou nejjednodušší použít. Animace From/To/By jsou podrobně popsány v přehledu animací Od/Do/Podle.

  • <Type>AnimationUsingKeyFrames

    Animace klíčových snímků jsou výkonnější než animace Od/Do/By, protože můžete zadat libovolný počet cílových hodnot a dokonce řídit jejich interpolační metodu. Některé typy můžou být animované jenom pomocí animací snímků kláves. Animace klíčovýchsnímkůch

  • <Type>AnimationUsingPath

    Animace cesty umožňují použít geometrické cesty k vytváření animovaných hodnot.

  • <Type>AnimationBase

    Abstraktní třída, která při implementaci animuje <hodnotu typu> . Tato třída slouží jako základní třída pro <>třídy Type Animation a <Type>AnimationUsingKeyFrames. S těmito třídami se musíte zabývat pouze v případě, že chcete vytvořit vlastní animace. V opačném případě použijte <animaci typu Typ>nebo animaci typu>klíčového rámce<.

Vevětšiněch <>DoubleAnimation ColorAnimation

Následující tabulka uvádí několik běžných typů animací a některé vlastnosti, se kterými se používají.

Typ vlastnosti Odpovídající základní animace (z/do/podle) Odpovídající animace snímku klíče Odpovídající animace cesty Příklad využití
Color ColorAnimation ColorAnimationUsingKeyFrames Nic Color Animování nebo SolidColorBrush GradientStop.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Width Animace nebo DockPanel Height závButton.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Center Animace pozice objektu EllipseGeometry.
String Nic StringAnimationUsingKeyFrames Nic Text Animace nebo TextBlock Content závButton.

Animace jsou časové osy

Všechny typy animací dědí z Timeline třídy, proto všechny animace jsou specializované typy časových os. A Timeline definuje segment času. Můžete určit chování časování časové osy: její Duration, kolikrát se opakuje, a dokonce i to, jak rychle se pro ni postupuje.

Vzhledem k tomu, že animace je Timeline, představuje také segment času. Animace také vypočítá výstupní hodnoty při procházení zadaným segmentem času (nebo Duration). Jak animace postupuje nebo se přehrává, aktualizuje vlastnost, ke které je přidružená.

Tři často používané vlastnosti časování jsou Duration, AutoReversea RepeatBehavior.

Vlastnost Duration

Jak jsme už zmínili, časová osa představuje segment času. Délka tohoto segmentu je určena Duration časovou osou, která je obvykle určena pomocí TimeSpan hodnoty. Když časová osa dosáhne konce doby trvání, dokončila iteraci.

Animace používá jeho Duration vlastnost k určení aktuální hodnoty. Pokud nezadáte Duration hodnotu animace, použije se 1 sekunda, což je výchozí hodnota.

Následující syntaxe ukazuje zjednodušenou verzi syntaxe Duration atributu XAML (Extensible Application Markup Language).

hodiny : s minutami :

Následující tabulka uvádí několik Duration nastavení a jejich výsledných hodnot.

Nastavení Výsledná hodnota
0:0:5.5 5,5 sekundy.
0:30:5.5 30 minut a 5,5 sekund.
1:30:5.5 1 hodina, 30 minut a 5,5 sekundy.

Jedním ze způsobů, jak zadat Duration v kódu, je použít metodu TimeSpanFromSeconds k vytvoření , a pak deklarovat novou Duration strukturu pomocí této TimeSpan.

Další informace o Duration hodnotách a úplné syntaxi XAML (Extensible Application Markup Language) najdete ve Duration struktuře.

AutoReverse

Vlastnost AutoReverse určuje, zda časová osa přehrává zpět po dosažení konce jeho Duration. Pokud tuto animační vlastnost nastavíte na true, animace se po dosažení konce Durationjeho přehrává z jeho koncové hodnoty zpět na její počáteční hodnotu. Ve výchozím nastavení je falsetato vlastnost .

RepeatBehavior

Vlastnost RepeatBehavior určuje, kolikrát se časová osa přehraje. Ve výchozím nastavení mají časové osy počet 1.0iterací , což znamená, že hrají jednou a neopakují se vůbec.

Další informace o těchto vlastnostech a dalších najdete v přehledu chování časování.

Použití animace u vlastnosti

Předchozí části popisují různé typy animací a jejich vlastnosti časování. Tato část ukazuje, jak použít animaci na vlastnost, kterou chcete animovat. Storyboard objekty poskytují jeden způsob použití animací na vlastnosti. A Storyboard je časová osa kontejneru, která poskytuje informace o cílení na animace, které obsahuje.

Cílení objektů a vlastností

Třída Storyboard poskytuje TargetName a TargetProperty připojené vlastnosti. Nastavením těchto vlastností v animaci sdělíte animaci, co se má animovat. Než ale animace může cílit na objekt, musí být objekt obvykle pojmenován.

Přiřazení názvu k objektu FrameworkElement se liší od přiřazení názvu k objektu Freezable . Většina ovládacích prvků a panelů jsou prvky architektury; Většina čistě grafických objektů, jako jsou štětce, transformace a geometrie, jsou však zamrznutelné objekty. Pokud si nejste jistí, jestli je typ nebo FrameworkElement Freezabletyp , projděte si část Hierarchie dědičnosti v referenční dokumentaci.

  • Pokud chcete vytvořit FrameworkElement cíl animace, pojmenujte ho nastavením jeho Name vlastnosti. V kódu musíte také použít metodu RegisterName k registraci názvu elementu na stránce, do které patří.

  • Pokud chcete objekt nastavit Freezable jako cíl animace v XAML, použijte k přiřazení názvu direktivu x:Name. V kódu stačí použít metodu RegisterName k registraci objektu na stránce, do které patří.

Následující části obsahují příklad pojmenování elementu v xaml a kódu. Podrobnější informace o pojmenování a cílení najdete v přehledu scénářů.

Použití a spouštění scénářů

Pokud chcete v XAML spustit scénář, přidružíte ho k objektu EventTrigger. Je EventTrigger objekt, který popisuje, jaké akce se mají provést, když dojde k zadané události. Jednou z těchto akcí může být BeginStoryboard akce, kterou použijete k zahájení scénáře. Triggery událostí jsou podobné konceptům obslužných rutin událostí, protože umožňují určit, jak vaše aplikace reaguje na konkrétní událost. Na rozdíl od obslužných rutin událostí je možné triggery událostí plně popsat v XAML; nevyžaduje se žádný jiný kód.

Chcete-li spustit Storyboard kód, můžete použít EventTrigger nebo použít Begin metodu Storyboard třídy.

Interaktivní řízení scénáře

Předchozí příklad ukázal, jak spustit Storyboard událost. Můžete také interaktivně ovládat Storyboard po spuštění: můžete pozastavit, obnovit, zastavit, přejít na jeho období, hledat a odebrat Storyboard. Další informace a příklad, který ukazuje, jak interaktivně ovládat , Storyboardnaleznete v přehledu scénářů.

Co se stane po skončení animace?

Vlastnost FillBehavior určuje, jak se časová osa chová, když skončí. Ve výchozím nastavení začíná časová osa Filling , když skončí. Animace, která Filling obsahuje konečnou výstupní hodnotu

V DoubleAnimation předchozím příkladu nekončí, protože jeho RepeatBehavior vlastnost je nastavena na Forever. Následující příklad animuje obdélník pomocí podobné animace. Na rozdíl od předchozího příkladu RepeatBehavior jsou vlastnosti této AutoReverse animace ponechány na výchozích hodnotách. Animace proto postupuje od 1 do 0 po dobu pěti sekund a pak se zastaví.

<Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>

    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0" Duration="0:0:5" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

Vzhledem k tomu, že se její FillBehavior hodnota nezměnila z výchozí hodnoty, což je HoldEnd, animace uchovává konečnou hodnotu 0, když skončí. Opacity Proto zůstane obdélník po skončení animace na 0. Pokud nastavíte Opacity obdélník na jinou hodnotu, zdá se, že váš kód nemá žádný vliv, protože animace stále ovlivňuje Opacity vlastnost.

Jedním ze způsobů, jak znovu získat kontrolu nad animovanou vlastností v kódu, je použít metodu BeginAnimation a zadat hodnotu null parametru AnimationTimeline . Další informace a příklad naleznete v tématu Nastavení vlastnosti po animaci pomocí scénáře.

Všimněte si, že i když se zdá, že nastavení hodnoty vlastnosti, která má Active nebo Filling animaci, nemá žádný vliv, hodnota vlastnosti se změní. Další informace najdete v přehledu systému animace a časování.

Datové vazby a animace

Většina animačních vlastností může být svázaná nebo animovaná; Můžete například animovat Duration vlastnost objektu DoubleAnimation. Vzhledem k tomu, jak systém časování funguje, se však data svázaná nebo animované animace nechovají jako jiné datové vázané nebo animované objekty. Abyste pochopili jejich chování, pomůže vám pochopit, co znamená použít animaci na vlastnost.

Podívejte se na příklad v předchozí části, který ukázal, jak animovat Opacity obdélník. Při načtení obdélníku v předchozím příkladu použije trigger Storyboardudálosti . Systém časování vytvoří kopii Storyboard a její animaci. Tyto kopie jsou zablokované (vytvořené jen pro čtení) a Clock objekty se z nich vytvářejí. Tyto hodiny dělají skutečnou práci animace cílových vlastností.

Systém časování vytvoří hodiny pro objekt DoubleAnimation a vlastnost, které jsou určeny TargetName a TargetProperty z DoubleAnimation. V tomto případě systém časování použije hodiny na Opacity vlastnost objektu s názvem "MyRectangle".

I když jsou hodiny vytvořeny také pro Storyboard, hodiny nejsou použity na žádné vlastnosti. Jeho účelem je řídit své podřízené hodiny, hodiny, které jsou vytvořeny pro DoubleAnimation.

Aby animace odrážela datové vazby nebo změny animace, musí se jeho hodiny znovu vygenerovat. Hodiny se automaticky nevygenerují. Pokud chcete, aby animace odrážela změny, znovu použijte její scénář pomocí BeginStoryboard metody nebo Begin metody. Když použijete některou z těchto metod, animace se restartuje. V kódu můžete metodu Seek použít k přesunutí scénáře zpět na předchozí pozici.

Příklad animace vázané na data najdete v části Ukázka klíčové spline animace. Další informace o tom, jak animace a časování systému funguje, najdete v tématu Přehled systému animace a časování.

Další způsoby animace

Příklady v tomto přehledu ukazují, jak animovat pomocí scénářů. Při použití kódu můžete animovat několika dalšími způsoby. Další informace naleznete v přehledu technik animace vlastností.

Ukázky animací

Následující ukázky vám můžou pomoct začít přidávat animace do aplikací.

Titulek Popis
Přehled animace a systému časování Popisuje, jak systém časování používá Timeline a Clock třídy, které umožňují vytvářet animace.
Tipy a triky animace Obsahuje užitečné tipy pro řešení problémů s animacemi, jako je například výkon.
Přehled vlastních animací Popisuje, jak rozšířit animační systém o klíčové snímky, třídy animací nebo zpětné volání pro jednotlivé snímky.
Přehled animace od/komu/kým Popisuje, jak vytvořit animaci, která přechází mezi dvěma hodnotami.
Přehled animací klíčových snímků Popisuje, jak vytvořit animaci s více cílovými hodnotami, včetně možnosti řídit interpolační metodu.
Funkce uvolnění Vysvětluje, jak použít matematické vzorce na animace, abyste získali reálné chování, jako je odraz.
Přehled animací cesty Popisuje, jak přesunout nebo otočit objekt podél složité cesty.
Přehled způsobů animace vlastností Popisuje animace vlastností pomocí scénářů, místních animací, hodin a animací pro jednotlivé snímky.
Přehled scénářů Popisuje, jak používat scénáře s několika časovými osami k vytváření složitých animací.
Přehled chování časování Popisuje Timeline typy a vlastnosti používané v animaci.
Přehled událostí časování Popisuje události dostupné u Timeline objektů a Clock událostí pro spouštění kódu v bodech na časové ose, jako je začátek, pozastavení, obnovení, přeskočení nebo zastavení.
Témata s postupy Obsahuje příklady kódu pro použití animací a časových os ve vaší aplikaci.
Postupy: Témata hodin Obsahuje příklady kódu pro použití objektu Clock v aplikaci.
Témata s postupy ke klíčovým snímkům Obsahuje příklady kódu pro použití animací klíčových snímků ve vaší aplikaci.
Postupy: Témata animace cesty Obsahuje příklady kódu pro použití animací cest ve vaší aplikaci.

Reference