Megosztás a következőn keresztül:

Animáció áttekintése

Windows Presentation Foundation (WPF) hatékony grafikus és elrendezési funkciókat biztosít, amelyekkel vonzó felhasználói felületeket és vonzó dokumentumokat hozhat létre. Az animáció még látványosabbá és használhatóbbá teheti a vonzó felhasználói felületet. A háttérszín animálásával vagy animált Transformalkalmazásával drámai képernyőáttűnéseket hozhat létre, vagy hasznos vizuális jeleket adhat meg.

Ez az áttekintés bemutatja a WPF animációs és időzítési rendszerét. A WPF-objektumok animációjára összpontosít a storyboardok használatával.

Animációk bemutatása

Az animáció egy illúzió, amelyet a képek sorozatának gyors végigfutásával hozunk létre, amelyek mindegyike kissé eltér az előzőtől. Az agy egyetlen változó jelenetként érzékeli a képek csoportját. A filmben ezt az illúziót olyan kamerákkal hozzák létre, amelyek másodpercenként számos fényképet vagy keretet rögzítenek. Amikor a kereteket kivetítő játssza vissza, a közönség mozgó képet lát.

A számítógépen az animáció hasonló. Például egy olyan program, amely egy téglalap rajzát elhalványítja a nézetből, az alábbiak szerint működhet.

  • A program létrehoz egy időzítőt.

  • A program meghatározott időközönként ellenőrzi az időzítőt, hogy lássa, mennyi idő telt el.

  • Minden alkalommal, amikor a program ellenőrzi az időzítőt, kiszámítja a téglalap aktuális átlátszatlansági értékét attól függően, hogy mennyi idő telt el.

  • A program ezután frissíti a téglalapot az új értékkel, és újrarajzozza azt.

A WPF előtt a Microsoft Windows fejlesztőinek saját időzítési rendszereket kellett létrehozniuk és kezelniük, vagy speciális egyéni kódtárakat kellett használniuk. A WPF tartalmaz egy hatékony időzítési rendszert, amely felügyelt kódon és XAML-n keresztül érhető el, és mélyen integrálva van a WPF-keretrendszerbe. A WPF-animáció megkönnyíti a vezérlők és más grafikus objektumok animálását.

A WPF kezeli az időzítési rendszer kezelésének és a képernyő hatékony újrarajzolásának háttérbeli munkáját. Olyan időzítési osztályokat biztosít, amelyek lehetővé teszik, hogy a megvalósítani kívánt effektusokra összpontosítson, ahelyett, hogy az effektusok megvalósításának mechanikájára koncentrálna. A WPF emellett megkönnyíti a saját animációk létrehozását azáltal, hogy olyan animációs alaposztályokat ad ki, amelyekből az osztályok örökölhetnek, és testreszabott animációkat hozhat létre. Ezek az egyéni animációk a standard animációs osztályok teljesítménybeli előnyeinek nagy részét élvezik.

WPF tulajdonságanimációs rendszer

Ha megért néhány fontos fogalmat az időzítési rendszerrel kapcsolatban, a WPF-animációk könnyebben használhatók. A legfontosabb, hogy a WPF-ben az objektumok egyes tulajdonságait animálással mozgatja. Egy keretrendszerelem növekedéséhez például animálhatja annak Width és Height tulajdonságait. Ha el szeretné halványítani az objektumot a nézetből, animálja annak Opacity tulajdonságát.

Ahhoz, hogy egy tulajdonság rendelkezik animációs képességekkel, az alábbi három követelménynek kell megfelelnie:

  • Függőségi tulajdonságnak kell lennie.

  • Olyan osztályhoz kell tartoznia, amely örökli a DependencyObject-t, és implementálja a IAnimatable interfészt.

  • Kompatibilis animációtípusnak kell rendelkezésre állnia. (Ha a WPF nem biztosít egyet, létrehozhatja a sajátját. Lásd az Egyéni Animációk Áttekintését.)

A WPF számos olyan objektumot tartalmaz, amelyek IAnimatable tulajdonságokkal rendelkeznek. Az olyan vezérlők, mint a Button és a TabControl, és a Panel és a Shape objektumok a DependencyObject-ből öröklődnek. A legtöbb tulajdonságuk függőségi tulajdonságok.

Az animációkat szinte bárhol használhatja, beleértve a stílusokat és a vezérlősablonokat is. Az animációknak nem kell vizualizációnak lenniük; Animálhatja azokat az objektumokat, amelyek nem részei a felhasználói felületnek, ha megfelelnek az ebben a szakaszban ismertetett feltételeknek.

Példa: Elem fokozatos megjelenése és eltűnése a nézetből

Ez a példa bemutatja, hogyan lehet WPF-animációt használni egy függőségi tulajdonság értékének animálásához. Egy DoubleAnimationanimációtípus, amely Double értékeket generál, a OpacityRectangle tulajdonságának animálására szolgál. Ennek eredményeképpen a Rectangle eltűnik, majd újra megjelenik.

A példa első része létrehoz egy Rectangle elemet. Az alábbi lépések bemutatják, hogyan hozhat létre animációt, és alkalmazhatja azt a téglalap Opacity tulajdonságára.

Az alábbiakban bemutatjuk, hogyan hozhat létre Rectangle elemet egy StackPanel XAML-ben.

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

Az alábbiakban bemutatjuk, hogyan hozhat létre Rectangle elemet egy StackPanel kódban.

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

1. rész: DoubleAnimation létrehozása

Az elem megjelenésének és eltűnésének egyik módja a Opacity tulajdonságának animálása. Mivel a Opacity tulajdonság típusa Double, dupla értékeket eredményező animációra van szükség. A DoubleAnimation egy ilyen animáció. Egy DoubleAnimation két kettős érték közötti átmenetet hoz létre. A kezdőérték megadásához állítsa be a From tulajdonságát. A záró érték megadásához állítsa be a To tulajdonságát.

  1. A 1.0 átlátszatlansága teljesen átlátszatlanná teszi az objektumot, a 0.0 átlátszatlansága pedig teljesen láthatatlanná teszi. Az animáció 1.0 és 0.0 közötti átmenet eléréséhez állítsa a From tulajdonságot 1.0 értékre, és a To tulajdonságot 0.0értékre. Az alábbiakban bemutatjuk, hogyan hozhat létre DoubleAnimation az XAML-ben.

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

    Az alábbiakban bemutatjuk, hogyan hozhat létre DoubleAnimation kódban.

    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. Ezután meg kell adni a(z) Duration-t. Az animáció Duration határozza meg, hogy mennyi ideig tart a kezdőértékről a célértékre való váltás. Az alábbi ábra bemutatja, hogyan állíthatja be a Duration öt másodpercre XAML-ben.

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

    Az alábbi ábra bemutatja, hogyan állíthatja be a Duration öt másodpercre a kódban.

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

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

  3. Az előző kód egy animációt mutatott be, amely 1.0-ról 0.0vált át, ami miatt a célelem teljesen átlátszatlanról teljesen láthatatlanná válik. Ha azt szeretné, hogy az elem újra megjelenjen miután eltűnt, állítsa az animáció AutoReverse tulajdonságát trueértékre. Ha azt szeretné, hogy az animáció határozatlan ideig ismétlődjön, állítsa RepeatBehavior tulajdonságát Foreverértékre. Az alábbi ábra bemutatja, hogyan állíthatja be a AutoReverse és RepeatBehavior tulajdonságait az XAML-ben.

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

    Az alábbi ábra bemutatja, hogyan állíthatja be a AutoReverse és RepeatBehavior tulajdonságokat a kódban.

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

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

2. rész: Storyboard létrehozása

Ha animációt szeretne alkalmazni egy objektumra, hozzon létre egy Storyboard, és a TargetName és TargetProperty csatolt tulajdonságok használatával adja meg az animálandó objektumot és tulajdonságot.

  1. Hozza létre a Storyboard-t, és adja hozzá az animációt mint gyermeket. Az alábbi ábra bemutatja, hogyan hozhatja létre a Storyboard az XAML-ben.

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

    A Storyboard kódban való létrehozásához deklaráljon egy Storyboard változót az osztály szintjén.

    public partial class MainWindow : Window
{
    private Storyboard myStoryboard;

    Class MainWindow

    Private myStoryboard As Storyboard

    Ezután inicializálja a Storyboard-t, és adja hozzá az animációt aletelemeként.

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

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

  2. A Storyboard tudnia kell, hogy hol alkalmazza az animációt. A Storyboard.TargetName csatolt tulajdonság használatával adja meg az animálni kívánt objektumot. Az alábbiakban bemutatjuk, hogyan állíthatja be a DoubleAnimation célnevét MyRectangle XAML-ben.

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

    Az alábbi ábra bemutatja, hogyan állíthatja be a DoubleAnimation célnevét MyRectangle kódban.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

  3. A TargetProperty csatolt tulajdonság segítségével adja meg az animálandó tulajdonságot. Az alábbiakban bemutatjuk, hogyan van konfigurálva az animáció az XAML OpacityRectangle tulajdonságának megcélzására.

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

    Az alábbiakban bemutatjuk, hogyan van az animáció konfigurálva a kódban a OpacityRectangle tulajdonságának megcélzására.

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

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

A TargetProperty szintaxisról és további példákról a Storyboards Overviewcímű cikkben talál további információt.

3. rész (XAML): A storyboard társítása egy triggerrel

A Storyboard az XAML-ben való alkalmazásának és elindításának legegyszerűbb módja egy eseményindító használata. Ez a szakasz bemutatja, hogyan társíthatja a Storyboard egy XAML-eseményindítóhoz.

  1. Hozzon létre egy BeginStoryboard objektumot, és társítsa hozzá a storyboardot. A BeginStoryboard egy olyan TriggerAction, amely egy Storyboard-t alkalmaz és indít el.

    <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. Hozzon létre egy EventTrigger-t, és adja hozzá a BeginStoryboard-et a Actions gyűjteményéhez. Állítsa be a RoutedEvent tulajdonságát a EventTrigger elemnek arra az irányított eseményre, amelyet el szeretne indítani a Storyboardsegítségével. (Az irányított eseményekről további információt az Irányított események áttekintésecímű témakörben talál.)

    <!-- 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. Adja hozzá a EventTrigger-t a téglalap Triggers gyűjteményéhez.

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

3. rész (kód): A storyboard társítása egy eseménykezelővel

A Storyboard a kódban való alkalmazásának és elindításának legegyszerűbb módja egy eseménykezelő használata. Ez a szakasz bemutatja, hogyan társíthatja a Storyboard egy eseménykezelővel a kódban.

  1. Regisztrálj a Loaded téglalap eseményére.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

  2. Deklarálja az eseménykezelőt. Az eseménykezelőben használja a Begin metódust a forgatókönyv alkalmazásához.

    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

Teljes példa

Az alábbiakban bemutatjuk, hogyan hozhat létre egy olyan téglalapot, amely XAML-ben fokozatosan megjelenik és eltűnik.

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

Az alábbiakban bemutatjuk, hogyan hozhat létre egy téglalapot, amely a kódban megjelenik és eltűnik.

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

Animációs típusok

Mivel az animációk tulajdonságértékeket hoznak létre, különböző animációs típusok léteznek a különböző tulajdonságtípusokhoz. Ha egy Double(például egy elem Width tulajdonságát) tartalmazó tulajdonságot szeretne animálni, használjon egy animációt, amely Double értékeket hoz létre. Ha egy Pointigénylő tulajdonságot szeretne animálni, használjon egy animációt, amely Point értékeket hoz létre stb. A különböző tulajdonságtípusok száma miatt a System.Windows.Media.Animation névtérben számos animációs osztály található. Szerencsére szigorú elnevezési egyezményt követnek, amely megkönnyíti a különbségtételt:

  • < >típusú animáció

    A "From/To/By" vagy "basic" animációként ismert animációk animálhatók a kezdő és a célérték között, vagy eltolásérték hozzáadásával a kezdőértékhez.

    • Kezdőérték megadásához állítsa be az animáció From tulajdonságát.

    • Befejezési érték megadásához állítsa be az animáció To tulajdonságát.

    • Eltolási érték megadásához állítsa be az animáció By tulajdonságát.

    Az áttekintésben szereplő példák ezeket az animációkat használják, mivel ezek a legegyszerűbbek. A From/To/By animációk részletes leírását az Animációk áttekintése című témakörben tekintheti meg.

  • < >KulcskockaAnimáció típusa

    A kulcskeret-animációk hatékonyabbak, mint a From/To/By animációk, mivel tetszőleges számú célértéket megadhatja, és akár az interpolációs módszert is szabályozhatja. Egyes típusok csak kulcskeret-animációkkal animálhatók. A kulcskeret-animációk részletes leírását az Key-Frame Animációk áttekintésecímű témakörben olvashatja.

  • < Type>AnimációÚtvonalHasználatával

    Az útvonalanimációk lehetővé teszik geometriai elérési út használatát animált értékek létrehozásához.

  • < >AnimationBase beírása

    Absztrakciós osztály, amely a implementáláskor egy <Típus> értéket animál. Ez az osztály szolgál az <Type>Animation és <Type>AnimationUsingKeyFrames osztályok alaposztályaként. Ezeket az osztályokat csak akkor kell közvetlenül kezelnie, ha saját egyéni animációkat szeretne létrehozni. Ellenkező esetben használjon <típusú>animációt vagy KeyFrame<típusú>animációt.

A legtöbb esetben a <Típus>animációs osztályokat kell használnia, például DoubleAnimation és ColorAnimation.

Az alábbi táblázat számos gyakori animációtípust és néhány olyan tulajdonságot mutat be, amelyekkel használatban vannak.

Tulajdonságtípus Megfelelő alapszintű (From/To/By) animáció A megfelelő kulcskeret animációja Megfelelő útvonalanimáció Használati példa
Color ColorAnimation ColorAnimationUsingKeyFrames Egyik sem Egy Color vagy SolidColorBrushGradientStop-jának animálása.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Animálja a WidthDockPanel-ját vagy a HeightButton-jét.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Animálja egy CenterEllipseGeometry pozícióját.
String Egyik sem StringAnimationUsingKeyFrames Egyik sem Animálja a TextTextBlock-ját vagy a ContentButton-jét.

Az animációk idővonalak

Az összes animációtípus öröklődik a Timeline osztályból; ezért minden animáció speciális idővonal-típusok. Egy Timeline az idő egy szegmensét határozza meg. Megadhatja egy idővonal időzítési viselkedését: annak , hogy hányszor ismétlődik, és még azt is, hogy milyen gyorsan halad előre az idő.

Mivel az animáció egy Timeline, az idő egy szegmensét is jelöli. Az animáció a kimeneti értékeket is kiszámítja a megadott időszakasz (vagy Duration) előrehaladtával. Az animáció előrehaladtával vagy "lejátszásával" frissíti a társított tulajdonságot.

Három gyakran használt időzítési tulajdonság: Duration, AutoReverseés RepeatBehavior.

Az Időtartam tulajdonság

Ahogy korábban említettük, az idővonal az idő egy szegmensét jelöli. A szegmens hosszát az ütemterv Duration határozza meg, amelyet általában egy TimeSpan érték használatával határoznak meg. Amikor egy ütemterv eléri az időtartamának végét, befejezett egy iterációt.

Az animáció a Duration tulajdonságával határozza meg az aktuális értékét. Ha nem ad meg Duration értéket egy animációhoz, az 1 másodpercet használ, ami az alapértelmezett érték.

Az alábbi szintaxis a bővíthető alkalmazásjelölő nyelv (XAML) attribútum szintaxisának egyszerűsített verzióját mutatja be az Duration tulajdonsághoz.

óra:perc:másodperc

Az alábbi táblázat több Duration beállítást és az eredményként kapott értékeket mutatja be.

Beállítás Eredményként kapott érték
0:0:5.5 5,5 másodperc.
0:30:5.5 30 perc és 5,5 másodperc.
1:30:5.5 1 óra, 30 perc és 5,5 másodperc.

A Duration kódban való megadásának egyik módja, ha a FromSeconds metódussal hoz létre egy TimeSpan, majd deklarál egy új Duration struktúrát az adott TimeSpanhasználatával.

Az Duration értékekről és a teljes XAML-szintaxisról a Duration struktúrában talál további információt.

Automatikus visszafordítás

A AutoReverse tulajdonság azt határozza meg, hogy az idővonal visszafelé játssza-e, miután a Durationvégére ér. Ha ezt az animációs tulajdonságot trueértékre állítja, az animáció a Durationvégére érve visszafordul, és a záró értékről visszajátszik a kezdőértékre. Ez a tulajdonság alapértelmezés szerint false.

Ismétlési magatartás

A RepeatBehavior tulajdonság határozza meg, hogy hányszor játszódik le az idővonal. Alapértelmezés szerint az ütemtervek 1.0iterációs számával rendelkeznek, ami azt jelenti, hogy egyszer játszanak, és egyáltalán nem ismétlődnek.

További információ ezekről a tulajdonságokról és más tulajdonságokról: Időzítési viselkedések áttekintése.

Animáció alkalmazása tulajdonságra

Az előző szakaszok az animációk különböző típusait és időzítési tulajdonságait ismertetik. Ez a szakasz bemutatja, hogyan alkalmazhatja az animációt az animálni kívánt tulajdonságra. Storyboard objektumok lehetővé teszik az animációk tulajdonságokra való alkalmazását. A Storyboard egy tároló ütemterv, amely célzási információkat biztosít a benne található animációkhoz.

Objektumok és tulajdonságok célzása

A Storyboard osztály biztosítja a TargetName és TargetProperty csatolt tulajdonságokat. Ha ezeket a tulajdonságokat egy animációra állítja be, meg kell adnia az animációnak, hogy mit kell animálnia. Mielőtt azonban egy animáció megcélzhat egy objektumot, az objektumnak általában nevet kell adni.

A név FrameworkElement való hozzárendelése eltér attól, amikor egy név kerül hozzárendelésre egy Freezable objektumhoz. A legtöbb vezérlő és panel keretrendszerelem; azonban a legtöbb tisztán grafikus objektum, például az ecsetek, az átalakítások és a geometriák fagyható objektumok. Ha nem biztos abban, hogy egy típus FrameworkElement vagy Freezable, tekintse meg a referenciadokumentáció öröklési hierarchiájának szakaszát.

  • Ha egy FrameworkElement animációs célként szeretne beállítani, adjon neki egy nevet a Name tulajdonság beállításával. A kódban az RegisterName metódussal regisztrálni kell az elem nevét azon a lapon, amelyhez tartozik.

  • Ha egy Freezable objektumot animációs célként szeretne létrehozni az XAML-ben, az x:Name Directive használatával rendelhet hozzá egy nevet. A kódban csak a RegisterName metódussal regisztrálhatja az objektumot azzal a laplal, amelyhez tartozik.

Az alábbi szakaszok egy XAML-elem és kód elnevezésére adnak példát. Az elnevezéssel és a célzással kapcsolatos további információkért lásd a Storyboards áttekintés.

Storyboardok alkalmazása és indítása

Az XAML-ben egy storyboard elindításához össze kell kapcsolni egy EventTrigger-t. A EventTrigger egy objektum, amely leírja, hogy milyen műveleteket kell végrehajtani egy adott esemény bekövetkezésekor. Ezek egyike lehet egy BeginStoryboard művelet, amellyel elindíthatja a storyboardot. Az eseményindítók koncepciójukban hasonlóak az eseménykezelőkhöz, mivel lehetővé teszik annak megadását, hogy az alkalmazás hogyan reagál egy adott eseményre. Az eseménykezelőkkel ellentétben az eseményindítók teljes mértékben leírhatók az XAML-ben; nincs szükség más kódra.

Ha Storyboard szeretne elindítani a kódban, használhat egy EventTrigger, vagy használhatja a Begin osztály Storyboard metódusát.

Storyboard interaktív vezérlése

Az előző példa bemutatta, hogyan indíthat el egy Storyboard, amikor egy esemény bekövetkezik. A kezdés után is interaktívan vezérelheti a Storyboard-t: szüneteltetheti, folytathatja, leállíthatja, előreléptetheti a kitöltési időszakra, kereshet, és eltávolíthatja a Storyboard. További információt és egy Storyboardinteraktív vezérlését bemutató példát a Storyboards Overviewcímű témakörben talál.

Mi történik egy animáció befejezése után?

A FillBehavior tulajdonság határozza meg, hogyan viselkedik az idősor a befejezéskor. Alapértelmezés szerint az idősáv újraindul Filling ponton, amikor befejeződik. Egy Filling animáció megőrzi a végső kimeneti értékét.

Az előző példában szereplő DoubleAnimation nem ér véget, mert RepeatBehavior tulajdonsága Forever. Az alábbi példa hasonló animációval animál egy téglalapot. Az előző példától eltérően az animáció RepeatBehavior és AutoReverse tulajdonságai az alapértelmezett értékükön maradnak. Ezért az animáció öt másodperc alatt 1-0-ról 0-ra halad, majd leáll.

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

Mivel a FillBehavior nem módosult az alapértelmezett értékről, amely HoldEnd, az animáció a befejezéskor megtartja a végleges értékét, a 0 értéket. Ezért a téglalap Opacity az animáció befejezése után 0-nál marad. Ha a téglalap Opacity másik értékre állítja, úgy tűnik, hogy a kódnak nincs hatása, mert az animáció továbbra is hatással van a Opacity tulajdonságra.

Az animált tulajdonság kódban való ellenőrzésének egyik módja, ha a BeginAnimation metódust használja, és null értéket ad meg a AnimationTimeline paraméterhez. További információért és példáért lásd: Egy tulajdonság beállítása az animálása után egy storyboarddal.

Vegye figyelembe, hogy bár egy Active vagy Filling animációval rendelkező tulajdonságérték beállítása úgy tűnik, hogy nincs hatása, a tulajdonság értéke nem változik. További információ: Animáció és időzítési rendszer áttekintése.

Adatkötés és animációk animálása

A legtöbb animációs tulajdonság lehet adathoz kötött vagy animált; Például animálhatja egy DurationDoubleAnimation tulajdonságát. Az időzítési rendszer működése miatt azonban az adatokhoz kötött vagy animált animációk nem viselkednek más adathoz kötött vagy animált objektumokhoz hasonlóan. A viselkedésük megértéséhez segít megérteni, hogy mit jelent animációt alkalmazni egy tulajdonságra.

Tekintse meg az előző szakaszban található példát, amely egy téglalap Opacity animálását mutatta be. Az előző példában szereplő téglalap betöltésekor az eseményindító a Storyboardalkalmazza. Az időzítő rendszer létrehoz egy másolatot a Storyboard-ről és annak animációjáról. Ezek a másolatok le vannak fagyasztva (írásvédettek), és Clock objektumok vannak létrehozva belőlük. Ezek az órák végzik a célzott tulajdonságok animálásának tényleges munkáját.

Az időzítési rendszer létrehoz egy órát a DoubleAnimation számára, és alkalmazza a TargetNameTargetProperty és DoubleAnimation által megadott objektumra és tulajdonságra. Ebben az esetben az időzítési rendszer az órát a "MyRectangle" nevű objektum Opacity tulajdonságára alkalmazza.

Bár a Storyboardis létrehoz egy órát, a rendszer nem alkalmazza az órát semmilyen tulajdonságra. A célja az, hogy szabályozza a gyermekórát, az órát, amely a DoubleAnimation-hoz jött létre.

Ahhoz, hogy egy animáció tükrözze az adatkötést vagy az animáció változásait, az órát újra létre kell hozni. Az órák nem lesznek automatikusan újragenerálva. Annak érdekében, hogy az animáció tükrözze a változásokat, alkalmazza újra a forgatókönyvet a BeginStoryboard vagy a Begin módszerek valamelyikének használatával. Ha ezen módszerek bármelyikét használja, az animáció újraindul. A kódban a Seek metódus használatával visszateheti a forgatókönyvet az előző pozícióba.

Egy adathoz kötött animációra példa: Key Spline Animation Sample. Az animációs és időzítési rendszer működésével kapcsolatos további információkért tekintse meg Animáció és időzítési rendszer áttekintésecímű témakört.

Egyéb animálási módok

Az áttekintésben szereplő példák bemutatják, hogyan lehet animálni a forgatókönyvek használatával. Kód használata esetén számos más módon is animálható. További információ: tulajdonságanimációs technikák áttekintése.

Animációs minták

Az alábbi minták segítségével animációt adhat az alkalmazásokhoz.

Cím Leírás
animációs és időzítési rendszer áttekintése Ismerteti, hogy az időzítési rendszer hogyan használja a Timeline és Clock osztályokat, amelyek lehetővé teszik animációk létrehozását.
animációs tippek és trükkök Hasznos tippeket sorol fel az animációkkal kapcsolatos problémák megoldásához, például a teljesítményhez.
Egyéni animációk áttekintése Az animációs rendszer kibővítése kulcskeretekkel, animációs osztályokkal vagy keretenkénti visszahívásokkal.
Innen/Oda/Által animációk áttekintése Bemutatja, hogyan hozhat létre két érték közötti áttűnésű animációt.
Key-Frame animációk áttekintése Ismerteti, hogyan hozhat létre animációt több célértékkel, beleértve az interpolációs módszer vezérlését is.
enyhítő függvények Ez a cikk bemutatja, hogyan alkalmazhat matematikai képleteket az animációira a valósághű megjelenés érdekében, például hogyan érhető el az ugráló mozgás.
útvonalanimációk áttekintése Azt ismerteti, hogyan helyezhet át vagy forgathat el objektumokat egy összetett útvonal mentén.
Tulajdonság-animációs technikák áttekintése A tulajdonságanimációkat storyboardokkal, helyi animációkkal, órákkal és képkockánkénti animációkkal ismerteti.
Forgatókönyv-vázlatok áttekintése A cikk azt ismerteti, hogyan hozhat létre összetett animációkat több idővonallal rendelkező storyboardok használatával.
időzítési viselkedés áttekintése Az animációkban használt Timeline típusokat és tulajdonságokat ismerteti.
időzítési események áttekintése A Timeline és Clock objektumokon elérhető eseményeket ismerteti, amikor kódokat hajtanak végre az ütemterv különböző pontjain, például kezdés, szüneteltetés, folytatás, kihagyás vagy leállítás céljából.
útmutató témakörök Példakódokat tartalmaz az animációk és idősorok alkalmazásbeli használatára.
Órák – használati útmutató témakörök Példakódokat tartalmaz az alkalmazás Clock objektumának használatára.
Key-Frame útmutató témakörök Kód példákat tartalmaz a kulcs-keret animációinak alkalmazásbeli használatára.
Útvonal-animáció – Útmutató témakörök Példakódokat tartalmaz az útvonalanimációk alkalmazásbeli használatára.

Referenciák