Přehled animace

Windows Presentation Foundation (WPF) poskytuje výkonnou sadu funkcí grafiky a rozložení, které umožňují vytvářet atraktivní uživatelská rozhraní a odvolat dokumenty. Animace může vytvořit poutavé uživatelské rozhraní ještě více Spectacular a používat. Pouhým animováním barvy pozadí nebo animovanými Transform možnostmi můžete vytvořit výrazné přechody na obrazovku nebo poskytnout užitečné vizuální pomůcky.

Tento přehled poskytuje Úvod do animačního systému WPF a časování. Zaměřuje se na animaci objektů WPF pomocí scénářů.

Představení animací

Animace je iluze vytvořená rychlým procházením řady imagí, která se trochu liší od poslední. Mozek navnímanou skupinu obrázků jako jednu měnící scénu. V případě filmu se tato iluze vytváří pomocí kamer, které zaznamenávají mnoho fotografií nebo snímků za sekundu. Když se snímky přehrávají projektorem, zobrazí se v cílové skupině Pohyblivý obrázek.

Animace na počítači je podobná. Například program, který usnadňuje vykreslení obdélníku, může fungovat následovně.

  • Program vytvoří časovač.

  • Program zkontroluje časovač v nastavených intervalech, aby bylo možné zjistit, 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 následně aktualizuje obdélník o novou hodnotu a překreslí ho.

před WPF museli vývojáři microsoftu Windows vytvářet a spravovat svoje 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 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ě si obrazovku sestavuje. Poskytuje třídy časování, které vám umožní zaměřit se na efekty, které chcete vytvořit, a ne na mechanismy jejich dosažení. WPF také usnadňuje vytváření vlastních animací tím, že zveřejňuje animační základní třídy, ze kterých vaše třídy mohou dědit, a vytvářet přizpůsobené animace. Tyto vlastní animace získají mnoho výhod pro výkon standardních tříd animace.

Animační systém vlastností WPF

Pokud pochopíte několik důležitých konceptů systému časování, je možné použít animace WPF. Nejdůležitější je, že v WPF můžete objekty animovat použitím animace na jejich jednotlivé vlastnosti. Například chcete-li zvětšit prvek architektury, animovat jeho Width vlastnosti a Height . Chcete-li objekt vymizet ze zobrazení, animaci jeho Opacity Vlastnosti.

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

  • Musí se jednat o 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 neposkytuje, můžete si vytvořit svoje vlastní. Podívejte se na Přehled vlastních animací.)

WPF obsahuje mnoho objektů, které mají IAnimatable Vlastnosti. ButtonOvládací prvky, jako jsou a TabControl a také Panel a Shape objekty dědí z DependencyObject . Většina jejich vlastností je vlastností závislosti.

Animace můžete použít skoro kdekoli, což zahrnuje i v šablonách stylů a ovládacích prvků. Animace nemusí být vizuální. můžete animovat objekty, které nejsou součástí uživatelského rozhraní, pokud splňují kritéria, která jsou popsána v této části.

Příklad: Vytvoření prvku v zobrazení a mimo zobrazení

Tento příklad ukazuje, jak použít animaci WPF k animaci hodnoty vlastnosti závislosti. Používá DoubleAnimation , což je typ animace, která generuje Double hodnoty pro animaci Opacity vlastnosti Rectangle . Výsledkem je, že se Rectangle zesílí a odkreslí zobrazení.

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

Následující příklad ukazuje, jak vytvořit Rectangle prvek v StackPanel jazyce 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 vytvořit prvek v zobrazení, je animace jeho Opacity Vlastnosti. Vzhledem k Opacity tomu, že vlastnost je typu Double , budete potřebovat animaci, která vytváří dvojité hodnoty. DoubleAnimationJedna taková animace. DoubleAnimationVytvoří přechod mezi dvěma hodnotami typu Double. Chcete-li zadat počáteční hodnotu, nastavte její From vlastnost. Chcete-li zadat koncovou hodnotu, nastavte její To vlastnost.

  1. Hodnota 1.0 neprůhlednosti způsobí, že dojde k úplnému neprůhlednosti objektu a hodnota 0.0 neprůhlednosti je zcela neviditelná. Chcete-li převést animaci z 1.0 na 0.0 , nastavte její From vlastnost na 1.0 hodnotu a To na 0.0 vlastnost. 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 kód 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 . DurationAnimace určuje, jak dlouho trvá přechod od počáteční hodnoty k její cílové hodnotě. Následující příklad ukazuje, jak nastavit Duration na pět sekund v jazyce XAML.

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

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

    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 na 0.0 , což způsobí, že se cílový element rozzvolna od zcela neprůhledný na zcela neviditelný. Chcete-li nastavit, aby se element po zobrazení okna zmizí, nastavte AutoReverse vlastnost animace na true . Chcete-li, aby se animace opakovala bez omezení, nastavte její RepeatBehavior vlastnost na Forever . Následující příklad ukazuje, jak nastavit AutoReverse vlastnosti a RepeatBehavior v jazyce 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 v kódu.

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

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

Chcete-li použít animaci na objekt, vytvořte Storyboard a použijte TargetName vlastnosti a TargetProperty připojené k určení objektu a vlastnosti k animaci.

  1. StoryboardVytvořte a přidejte animaci jako podřízenou položku. 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 Storyboard proměnnou na úrovni třídy.

    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;
    
    Class MainWindow
    
        Private myStoryboard As Storyboard
    

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

    myStoryboard = new Storyboard();
    myStoryboard.Children.Add(myDoubleAnimation);
    
    myStoryboard = New Storyboard()
    myStoryboard.Children.Add(myDoubleAnimation)
    
  2. StoryboardJe nutné znát, kde má být animace použita. Storyboard.TargetNamePomocí vlastnosti Attached určete objekt, který se má animovat. Následující příklad ukazuje, jak nastavit cílový název DoubleAnimationMyRectangle v 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 pro MyRectangle v kódu.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
    
    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
    
  3. TargetPropertyPomocí vlastnosti Attached Určete vlastnost, která se má animovat. Následující příklad ukazuje, jak je animace nakonfigurována pro cílení Opacity na vlastnost Rectangle v jazyce 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 pro cílení Opacity na 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ší příklady 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 jazyce XAML, je použití triggeru události. V této části se dozvíte, jak přidružit Storyboard k triggeru v jazyce XAML.

  1. BeginStoryboardVytvořte objekt a přidružte k němu scénář. BeginStoryboardJe typ TriggerAction , který platí 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. EventTriggerVytvořte a přidejte BeginStoryboard do své Actions kolekce. RoutedEventNastavte 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. EventTriggerPřidejte do Triggers kolekce obdélník.

    <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žití obslužné rutiny události. V této části se dozvíte, Storyboard jak přidružit k obslužné rutině události v kódu.

  1. Zaregistrujte se Loaded na událost 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ý se v jazyce XAML zesílí a z něj zobrazuje.

<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ý se v kódu zesílí a z něj zobrazuje.

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 , jako je Width například vlastnost prvku, použijte animaci, která vytvoří Double hodnoty. Chcete-li animovat vlastnost, která používá Point , použijte animaci, která vytvoří Point hodnoty a tak dále. Z důvodu 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í konvencí pojmenování, která usnadňuje rozlišení mezi nimi:

  • <Typ> Animaci

    Označuje se jako animace "od/do/" nebo "základní", tato animace mezi počáteční a cílovou hodnotou nebo přidáním hodnoty posunu k počáteční hodnotě.

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

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

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

    Příklady v tomto přehledu používají animace, protože jsou nejjednodušší pro použití. Animace od/do/podle jsou podrobněji popsány v přehledu animací z/do/podle.

  • <Typ> AnimationUsingKeyFrames

    Animace klíčových snímků jsou výkonnější než z/do/podle animací, protože můžete zadat libovolný počet cílových hodnot a dokonce řídit metodu interpolace. Některé typy lze animovat pouze pomocí animací klíčových snímků. Animace klíčových snímků jsou podrobně popsané v tématu Přehled animací klíčových snímků.

  • <Typ> AnimationUsingPath

    Animace cest umožňují použít geometrickou cestu, aby bylo možné vytvořit animované hodnoty.

  • <Typ> AnimationBase

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

Ve většině případů budete chtít použít < třídy animace typu> , například DoubleAnimation a ColorAnimation .

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

Typ vlastnosti Odpovídající animace Basic (od/do/po) Odpovídající animace klíčových snímků Animace odpovídající cesty Příklad použití
Color ColorAnimation ColorAnimationUsingKeyFrames Žádné ColorSolidColorBrush Animace a nebo GradientStop .
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath WidthDockPanel Animace a nebo Height z Button .
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath CenterAnimace pozice EllipseGeometry .
String Žádné StringAnimationUsingKeyFrames Žádné TextTextBlock Animace a nebo Content z Button .

Animace jsou časové osy

Všechny typy animací dědí z Timeline třídy; proto jsou všechny animace specializované typy časových os. TimelineDefinuje segment času. Můžete určit chování časování časové osy: jejich Duration počet opakování, kolikrát se opakuje, a dokonce i to, jak má rychlost času dobíhat.

Vzhledem k tomu, že animace je a Timeline , představuje také segment času. Animace také počítá výstupní hodnoty při jejich průběhu přes zadaný úsek času (nebo Duration ). Jak animace postupuje, nebo "hraje", aktualizuje vlastnost, ke které je přidružena.

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

Vlastnost Duration

Jak už jsme uvedli, časová osa představuje segment času. Délka tohoto segmentu je určena pomocí Duration časové osy, která je obvykle určena pomocí TimeSpan hodnoty. Když časová osa dosáhne konce své doby, dokončila se iterace.

Animace používá svoji Duration vlastnost k určení její 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 atributu jazyk Extensible Application Markup Language (XAML) (XAML) pro Duration vlastnost.

počet hodin: počet minut:počet sekund

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

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

Jedním ze způsobů, jak zadat Duration kód v kódu, je použít FromSeconds metodu k vytvoření TimeSpan a následně deklarovat novou Duration strukturu pomocí TimeSpan .

Další informace o Duration hodnotách a syntaxi complete jazyk Extensible Application Markup Language (XAML) (XAML) naleznete v tématu Duration Struktura.

AutoReverse

AutoReverseVlastnost určuje, zda se časová osa přehrává zpět po dosažení konce Duration . Pokud nastavíte tuto vlastnost animace na true , vrátí se animace po dosažení konce své Duration koncové hodnoty zpátky na počáteční hodnotu. Ve výchozím nastavení je false Tato vlastnost.

RepeatBehavior

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

Další informace o těchto vlastnostech a dalších najdete v tématu Přehled chování časování.

Použití animace na vlastnost

Předchozí části popisují různé typy animací a jejich vlastnosti časování. V této části se dozvíte, jak použít animaci na vlastnost, kterou chcete animovat. Storyboard objekty poskytují jeden způsob, jak použít animace pro vlastnosti. StoryboardJe Časová osa kontejneru , která poskytuje informace o cílení na animace, které obsahuje.

Cílení objektů a vlastností

StoryboardTřída poskytuje TargetName vlastnosti a TargetProperty připojené. Nastavením těchto vlastností na animaci dáte funkci animace, která se má animovat. Nicméně před tím, než může být animace cílena na objekt, objekt musí obvykle být uveden název.

Přiřazení názvu ke FrameworkElement se liší od přiřazení názvu k Freezable objektu. Většina ovládacích prvků a panelů je prvky architektury; avšak většina čistě grafických objektů, jako jsou štětce, transformes a geometrií, jsou objekty Freezable. Pokud si nejste jisti, zda se FrameworkElement jedná o typ nebo Freezable , přečtěte si část Hierarchie dědičnosti v příslušné referenční dokumentaci.

  • Chcete-li nastavit FrameworkElement cíl animace, přidělte mu název nastavením jeho Name Vlastnosti. V kódu je také nutné použít RegisterName metodu k registraci názvu elementu se stránkou, do které patří.

  • Chcete-li vytvořit Freezable objekt jako cíl animace v jazyce XAML, použijte direktivu x:Name k přiřazení názvu. V kódu stačí pouze použít RegisterName metodu k registraci objektu se stránkou, do které patří.

Následující části obsahují příklad pojmenování prvku v jazyce 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ářů

Chcete-li spustit scénář v jazyce XAML, přidružíte ho EventTrigger k. EventTriggerObjekt je objekt, který popisuje, jaké akce se mají provést při výskytu zadané události. Jednou z těchto akcí může být BeginStoryboard akce, kterou můžete použít k zahájení scénáře. Triggery událostí jsou podobné v konceptu 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í mohou být triggery událostí plně popsány v jazyce XAML; není vyžadován žádný jiný kód.

Chcete-li spustit Storyboard kód v kódu, 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 když dojde k události. Můžete také interaktivně řídit Storyboard po spuštění: můžete pozastavit, obnovit, zastavit, pokračovat na dobu výplně, vyhledat a odebrat Storyboard. Další informace a příklad, který ukazuje, jak interaktivně řídit Storyboard, najdete v článku Přehled scénářů.

Co se stane po ukončení animace?

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

V DoubleAnimation předchozím příkladu nekončí, protože jeho vlastnost RepeatBehavior je nastavená na Forever. Následující příklad animace obdélníku pomocí podobné animace. Na rozdíl od předchozího příkladu jsou RepeatBehavior vlastnosti AutoReverse a této animace ponechány na výchozích hodnotách. Animace proto po pěti sekundách postupuje od 1 do 0 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 FillBehavior tomu, že se její hodnota nezměnila od výchozí hodnoty , HoldEndcož je , animace po ukončení obsahuje konečnou hodnotu 0. Proto po ukončení Opacity animace zůstane obdélník na 0. Pokud nastavíte obdélník Opacity na jinou hodnotu, váš kód nebude mít žádný vliv, protože animace stále ovlivňuje vlastnost Opacity .

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

Všimněte si, že i ActiveFilling když se zdá, že nastavení hodnoty vlastnosti s animací nebo nemá žádný vliv, hodnota vlastnosti se nezmění. Další informace najdete v tématu Přehled animace a systému časování.

Datové vazby a animace

Většina vlastností animace může být vázaný na data nebo animovaná. Můžete například animovat Duration vlastnost DoubleAnimationobjektu . Kvůli způsobu, jakým systém časování funguje, se však animace vázané na data nebo animované animace nechovají jako jiné objekty vázané na data nebo animované objekty. Abyste porozuměli jejich chování, pomůže vám to pochopit, co znamená použít na vlastnost animaci.

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

Systém časování vytvoří hodiny pro DoubleAnimation objekt a použije ho na objekt a vlastnost, která je určena TargetNameTargetProperty objektem a třídy DoubleAnimation. V tomto případě systém časování použije hodiny na Opacity vlastnost objektu s názvem "MyRectangle".

I když je také vytvořena hodiny Storyboardpro , hodiny nejsou použity na žádné vlastnosti. Jejím účelem je řídit podřízené hodiny, hodiny vytvořené pro DoubleAnimationobjekt .

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

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

Další způsoby animace

Příklady v tomto přehledu ukazují, jak animace pomocí scénářů. Když použijete kód, můžete ho animovat několika dalšími způsoby. Další informace najdete v článku Přehled technik animace vlastností.

Ukázky animace

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

Nadpis Popis
Animace a časování přehledu systému Popisuje, jak systém časování používá třídy TimelineClock a , které umožňují vytvářet animace.
Tipy a triky animace Uvádí 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 systém animace o klíčové snímky, třídy animace nebo zpětná volání pro každý snímek.
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 metodu interpolace.
Funkce usnadnění Vysvětluje, jak použít matematické vzorce u animací k získání realistického chování, jako je například bouncing.
Přehled animací cesty Popisuje, jak přesunout nebo obměně objektu 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 každý snímek.
Přehled scénářů Popisuje způsob použití scénářů s více časovými osami k vytváření složitých animací.
Přehled chování časování Popisuje typy Timeline a vlastnosti používané v animaci.
Přehled událostí časování Popisuje události, které jsou k TimelineClock dispozici pro objekty a pro provádění kódu v bodech časové osy, jako je například začátek, pozastavení, obnovení, přeskočení nebo zastavení.
Postupy: Témata Obsahuje příklady kódu pro použití animací a časových os v 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ů v aplikaci.
Postupy: Témata animace cesty Obsahuje příklady kódu pro použití animací cest v aplikaci.

Reference