Udostępnij za pośrednictwem

Przegląd Animacja

  • Artykuł

Program Windows Presentation Foundation (WPF) udostępnia zaawansowany zestaw funkcji grafiki i układu, które umożliwiają tworzenie atrakcyjnych interfejsów użytkownika i atrakcyjnych dokumentów. Animacja może sprawić, że atrakcyjny interfejs użytkownika będzie jeszcze bardziej spektakularny i użyteczny. Po prostu animując kolor tła lub stosując animowany Transformelement , możesz utworzyć dramatyczne przejścia ekranu lub zapewnić przydatne sygnały wizualne.

To omówienie zawiera wprowadzenie do systemu animacji i chronometrażu WPF. Koncentruje się na animacji obiektów WPF przy użyciu scenorysów.

Wprowadzenie do animacji

Animacja to iluzja, która jest tworzona przez szybkie przechodzenie na rowerze przez serię obrazów, z których każda nieco różni się od ostatnich. Mózg postrzega grupę obrazów jako jedną zmieniającą się scenę. W filmie ta iluzja jest tworzona za pomocą kamer, które rejestrują wiele zdjęć lub ramek, po każdej sekundzie. Gdy klatki są odtwarzane przez projektor, publiczność widzi poruszający obraz.

Animacja na komputerze jest podobna. Na przykład program, który sprawia, że rysunek prostokąta wynika z widoku, może działać w następujący sposób.

  • Program tworzy czasomierz.

  • Program sprawdza czasomierz w ustawionych odstępach czasu, aby sprawdzić, ile czasu upłynął.

  • Za każdym razem, gdy program sprawdza czasomierz, oblicza bieżącą wartość nieprzezroczystości dla prostokąta na podstawie czasu, który upłynął.

  • Następnie program aktualizuje prostokąt przy użyciu nowej wartości i ponownie je rysuje.

Przed WPF deweloperzy systemu Microsoft Windows musieli tworzyć własne systemy chronometrażu i zarządzać nimi lub używać specjalnych bibliotek niestandardowych. WPF zawiera wydajny system chronometrażu udostępniany za pośrednictwem kodu zarządzanego i kodu XAML, który jest głęboko zintegrowany ze strukturą WPF. Animacja WPF ułatwia animowanie kontrolek i innych obiektów graficznych.

WPF obsługuje całą zakulisową pracę zarządzania systemem chronometrażu i wydajnego narysowania ekranu. Udostępnia klasy chronometrażu, które umożliwiają skupienie się na efektach, które chcesz utworzyć, zamiast mechaniki osiągnięcia tych efektów. WPF ułatwia również tworzenie własnych animacji przez uwidacznianie klas bazowych animacji, z których klasy mogą dziedziczyć, w celu tworzenia dostosowanych animacji. Te niestandardowe animacje zyskują wiele korzyści z wydajności standardowych klas animacji.

System animacji właściwości WPF

Jeśli rozumiesz kilka ważnych pojęć dotyczących systemu chronometrażu, animacje WPF mogą być łatwiejsze do użycia. Najważniejsze jest to, że w WPF animujesz obiektów przez zastosowanie animacji do ich poszczególnych właściwości. Aby na przykład zwiększyć element struktury, animujesz jego Width właściwości i Height . Aby obiekt zniknął z widoku, animujesz jego Opacity właściwość.

Aby właściwość miała możliwości animacji, musi spełniać następujące trzy wymagania:

  • Musi to być właściwość zależności.

  • Musi należeć do klasy dziedziczonej z DependencyObject i implementowania interfejsu IAnimatable .

  • Musi istnieć zgodny typ animacji. (Jeśli WPF nie udostępnia go, możesz utworzyć własne. Zobacz Omówienie animacji niestandardowych).

WPF zawiera wiele obiektów, które mają IAnimatable właściwości. Kontrolki, takie jak Button i TabControl, oraz Shape Panel obiekty dziedziczą z DependencyObjectelementu . Większość ich właściwości to właściwości zależności.

Animacje można używać niemal wszędzie, co obejmuje style i szablony kontrolek. Animacje nie muszą być wizualne; Można animować obiektów, które nie są częścią interfejsu użytkownika, jeśli spełniają kryteria opisane w tej sekcji.

Przykład: tworzenie elementu wynikania i poza widokiem

W tym przykładzie pokazano, jak używać animacji WPF do animowania wartości właściwości zależności. Używa klasy DoubleAnimation, która jest typem animacji, która generuje Double wartości, aby animować Opacity właściwość Rectangleobiektu . W rezultacie Rectangle zanika i wychodzi z widoku.

Pierwsza część przykładu tworzy Rectangle element. W poniższych krokach pokazano, jak utworzyć animację i zastosować ją do właściwości prostokąta Opacity .

Poniżej pokazano, jak utworzyć Rectangle element w języku StackPanel XAML.

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

Poniżej pokazano, jak utworzyć Rectangle element w StackPanel kodzie.

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

Część 1. Tworzenie funkcji DoubleAnimation

Jednym ze sposobów, aby element zniknął i z widoku jest animowanie jego Opacity właściwości. Opacity Ponieważ właściwość jest typu Double, potrzebna jest animacja, która generuje podwójne wartości. Jest DoubleAnimation to jedna z takich animacji. Element A DoubleAnimation tworzy przejście między dwiema podwójnymi wartościami. Aby określić jego wartość początkową, należy ustawić jej From właściwość. Aby określić jego wartość końcową, należy ustawić jej To właściwość.

  1. Nieprzezroczystość 1.0 wartości sprawia, że obiekt jest całkowicie nieprzezroczystym i nieprzezroczystością wartości 0.0 sprawia, że jest całkowicie niewidoczny. Aby przenieść animację z 1.0 do 0.0 , ustaw jej From właściwość na 1.0 i jej To właściwość na 0.0. Poniżej przedstawiono sposób tworzenia elementu DoubleAnimation w języku XAML.

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

    Poniżej pokazano, jak utworzyć element DoubleAnimation w kodzie.

    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. Następnie należy określić wartość Duration. Animacja Duration określa, jak długo trwa przejście od wartości początkowej do wartości docelowej. Poniżej pokazano, jak ustawić Duration wartość na pięć sekund w języku XAML.

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

    Poniżej pokazano, jak ustawić Duration wartość na pięć sekund w kodzie.

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

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

  3. Poprzedni kod pokazał animację, która przechodzi z 1.0 do 0.0, co powoduje, że element docelowy zniknie z całkowicie nieprzezroczystego do całkowicie niewidocznego. Aby element zniknął z powrotem do widoku, ustaw AutoReverse właściwość animacji na true. Aby animacja powtarzała się w nieskończoność, ustaw jej RepeatBehavior właściwość na Foreverwartość . Poniżej przedstawiono sposób ustawiania AutoReverse właściwości i RepeatBehavior w języku XAML.

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

    Poniżej przedstawiono sposób ustawiania AutoReverse właściwości i RepeatBehavior w kodzie.

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

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

Część 2. Tworzenie scenorysu

Aby zastosować animację do obiektu, należy utworzyć Storyboard obiekt i użyć TargetName właściwości i TargetProperty dołączonych do określenia obiektu i właściwości do animowania.

  1. Storyboard Utwórz i dodaj animację jako element podrzędny. Poniżej pokazano, jak utworzyć element Storyboard w języku XAML.

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

    Aby utworzyć Storyboard element w kodzie, zadeklaruj zmienną Storyboard na poziomie klasy.

    public partial class MainWindow : Window
{
    private Storyboard myStoryboard;

    Class MainWindow

    Private myStoryboard As Storyboard

    Następnie zainicjuj Storyboard i dodaj animację jako element podrzędny.

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

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

  2. Element Storyboard musi wiedzieć, gdzie zastosować animację. Użyj dołączonej Storyboard.TargetName właściwości, aby określić obiekt do animowania. Poniżej pokazano, jak ustawić nazwę DoubleAnimation docelową elementu na MyRectangle wartość w języku XAML.

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

    Poniżej pokazano, jak ustawić nazwę docelową DoubleAnimation elementu na MyRectangle w kodzie.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

  3. Użyj dołączonej TargetProperty właściwości, aby określić właściwość do animowania. Poniżej pokazano, jak animacja jest skonfigurowana do określania Opacity wartości docelowej właściwości Rectangle w języku XAML.

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

    Poniżej pokazano, jak animacja jest skonfigurowana do określania Opacity wartości docelowej właściwości Rectangle w kodzie.

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

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

Aby uzyskać więcej informacji na temat TargetProperty składni i dodatkowych przykładów, zobacz Storyboards Overview (Omówienie scenorysów).

Część 3 (XAML): kojarzenie scenorysu z wyzwalaczem

Najprostszym sposobem zastosowania i uruchomienia elementu Storyboard w języku XAML jest użycie wyzwalacza zdarzeń. W tej sekcji pokazano, jak skojarzyć Storyboard element z wyzwalaczem w języku XAML.

  1. BeginStoryboard Utwórz obiekt i skojarz z nim scenorys. A BeginStoryboard jest typem TriggerAction , który ma zastosowanie i uruchamia Storyboardelement .

    <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. Utwórz obiekt EventTrigger i dodaj element BeginStoryboard do swojej Actions kolekcji. RoutedEvent Ustaw właściwość EventTrigger obiektu na zdarzenie kierowane, które chcesz uruchomić Storyboard. (Aby uzyskać więcej informacji o zdarzeniach kierowanych, zobacz Przegląd zdarzeń trasowanych).

    <!-- 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. Dodaj element EventTrigger do Triggers kolekcji prostokąta.

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

Część 3 (kod): kojarzenie scenorysu z programem obsługi zdarzeń

Najprostszym sposobem zastosowania i uruchomienia Storyboard kodu jest użycie programu obsługi zdarzeń. W tej sekcji pokazano, jak skojarzyć program Storyboard obsługi zdarzeń w kodzie.

  1. Zarejestruj się w celu Loaded uzyskania zdarzenia prostokąta.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

  2. Zadeklaruj program obsługi zdarzeń. W procedurze obsługi zdarzeń użyj Begin metody , aby zastosować scenorys.

    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

Kompletny przykład

Poniżej pokazano, jak utworzyć prostokąt, który zanika i nie jest wyświetlany w języku XAML.

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

Poniżej pokazano, jak utworzyć prostokąt, który zanika i nie jest wyświetlany w kodzie.

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 animacji

Ponieważ animacje generują wartości właściwości, istnieją różne typy animacji dla różnych typów właściwości. Aby animować właściwość, która przyjmuje Doublewłaściwość , taką jak Width właściwość elementu, użyj animacji, która generuje Double wartości. Aby animować właściwość, która przyjmuje Pointelement , użyj animacji, która generuje Point wartości itd. Ze względu na liczbę różnych typów właściwości istnieje kilka klas animacji w System.Windows.Media.Animation przestrzeni nazw. Na szczęście przestrzegają ścisłej konwencji nazewnictwa, która ułatwia rozróżnienie między nimi:

  • <Animacja typu>

    Nazywane animacją "From/To/By" lub "basic", te animowanie między wartością początkową i docelową lub przez dodanie wartości przesunięcia do jej wartości początkowej.

    • Aby określić wartość początkową, ustaw właściwość From animacji.

    • Aby określić wartość końcową, ustaw właściwość To animacji.

    • Aby określić wartość przesunięcia, ustaw właściwość By animacji.

    Przykłady w tym omówieniu korzystają z tych animacji, ponieważ są one najprostsze do użycia. Animacje from/To/By zostały szczegółowo opisane w temacie Omówienie animacji od/do/według.

  • <Typ>AnimationUsingKeyFrames

    Animacje klatek kluczowych są bardziej zaawansowane niż animacje Od/Do/Według, ponieważ można określić dowolną liczbę wartości docelowych, a nawet kontrolować ich metodę interpolacji. Niektóre typy można animować tylko za pomocą animacji klatek kluczowych. Animacje klatek kluczowych zostały szczegółowo opisane w sekcji Przegląd animacji klatek kluczowych.

  • <Typ>AnimationUsingPath

    Animacje ścieżek umożliwiają używanie ścieżki geometrycznej w celu tworzenia animowanych wartości.

  • <Typ>AnimationBase

    Klasa abstrakcyjna, która podczas jej implementowania animuje <wartość typu> . Ta klasa służy jako klasa bazowa dla <klas Animacja typu>i <Animacja typuUsingKeyFrames>. Musisz radzić sobie bezpośrednio z tymi klasami tylko wtedy, gdy chcesz utworzyć własne niestandardowe animacje. W przeciwnym razie użyj <animacji typu>lub animacji typu>keyframe<.

W większości przypadków należy użyć <klas Animacja typu>, takich jak DoubleAnimation i ColorAnimation.

W poniższej tabeli przedstawiono kilka typowych typów animacji i niektóre właściwości, z którymi są używane.

Typ właściwości Odpowiadająca animacja podstawowa (od/do/według) Odpowiadająca animacja klatek kluczowych Odpowiednia animacja ścieżki Przykład użycia
Color ColorAnimation ColorAnimationUsingKeyFrames Brak Animowanie obiektu Color SolidColorBrush lub .GradientStop
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Animowanie Width wartości a DockPanel lub Height obiektu Button.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Animowanie Center położenia obiektu EllipseGeometry.
String Brak StringAnimationUsingKeyFrames Brak Animowanie Text wartości a TextBlock lub Content obiektu Button.

Animacje to osie czasu

Wszystkie typy animacji dziedziczą z Timeline klasy, dlatego wszystkie animacje są wyspecjalizowanymi typami osi czasu. Element Timeline definiuje segment czasu. Można określić zachowania chronometrażu osi czasu: jego Duration, ile razy jest powtarzany, a nawet jak szybko się na nim rozwija.

Ponieważ animacja jest elementem Timeline, reprezentuje również segment czasu. Animacja oblicza również wartości wyjściowe, gdy przechodzi przez określony segment czasu (lub Duration). Gdy animacja postępuje lub "odtwarza", aktualizuje właściwość, z którą jest skojarzona.

Trzy często używane właściwości chronometrażu to Duration, AutoReversei RepeatBehavior.

Właściwość Duration

Jak wspomniano wcześniej, oś czasu reprezentuje segment czasu. Długość tego segmentu jest określana przez Duration oś czasu, która jest zwykle określana przy użyciu TimeSpan wartości. Gdy oś czasu osiągnie koniec jego trwania, została ukończona iteracji.

Animacja używa jej Duration właściwości do określenia jej bieżącej wartości. Jeśli nie określisz Duration wartości animacji, zostanie użyta 1 sekunda, która jest wartością domyślną.

Poniższa składnia przedstawia uproszczoną wersję składni atrybutu Extensible Application Markup Language (XAML) dla Duration właściwości .

godz : . min : sekund

W poniższej tabeli przedstawiono kilka Duration ustawień i ich wartości wynikowych.

Ustawienie Wynikowa wartość
0:0:5.5 5,5 sekundy.
0:30:5.5 30 minut i 5,5 sekundy.
1:30:5.5 1 godzina, 30 minut i 5,5 sekundy.

Jednym ze sposobów określenia Duration w kodzie jest użycie FromSeconds metody do utworzenia TimeSpanobiektu , a następnie zadeklarowanie nowej Duration struktury przy użyciu tej TimeSpanmetody .

Aby uzyskać więcej informacji na temat Duration wartości i pełnej składni języka XAML (Extensible Application Markup Language), zobacz Duration strukturę.

Autoreverse

Właściwość AutoReverse określa, czy oś czasu jest odtwarzana wstecz po osiągnięciu końca jego Duration. Jeśli ustawisz tę właściwość animacji na true, animacja zostanie odwrócona po osiągnięciu końca jej Durationwartości , odtwarzanej z wartości końcowej z powrotem do wartości początkowej. Domyślnie ta właściwość to false.

RepeatBehavior

Właściwość RepeatBehavior określa, ile razy jest odtwarzana oś czasu. Domyślnie osie czasu mają liczbę 1.0iteracji , co oznacza, że grają jednorazowo i w ogóle nie powtarzają.

Aby uzyskać więcej informacji na temat tych właściwości i innych, zobacz Omówienie zachowań chronometrażu.

Stosowanie animacji do właściwości

W poprzednich sekcjach opisano różne typy animacji i ich właściwości chronometrażu. W tej sekcji pokazano, jak zastosować animację do właściwości, którą chcesz animować. Storyboard obiekty zapewniają jeden ze sposobów stosowania animacji do właściwości. A Storyboard to oś czasu kontenera, która zawiera informacje o określaniu wartości docelowej dla zawartych w nim animacji.

Obiekty i właściwości określania wartości docelowej

Klasa Storyboard udostępnia TargetName właściwości i TargetProperty dołączone. Ustawiając te właściwości animacji, informujesz animację o tym, co należy animować. Jednak zanim animacja może być obiektem docelowym, obiekt musi mieć zwykle nazwę.

Przypisywanie nazwy do obiektu FrameworkElement różni się od przypisywania nazwy do Freezable obiektu. Większość kontrolek i paneli to elementy struktury; jednak większość czysto graficznych obiektów, takich jak pędzle, przekształcenia i geometrie, są obiektami zamrażalnymi. Jeśli nie masz pewności, czy typ jest typem FrameworkElement lub , zapoznaj się z sekcją FreezableHierarchia dziedziczenia w dokumentacji referencyjnej.

  • Aby utworzyć obiekt docelowy FrameworkElement animacji, nadaj jej nazwę, ustawiając jej Name właściwość. W kodzie należy również użyć RegisterName metody , aby zarejestrować nazwę elementu na stronie, do której należy.

  • Aby utworzyć obiekt docelowy Freezable animacji w języku XAML, należy użyć dyrektywy x:Name, aby przypisać jej nazwę. W kodzie wystarczy użyć RegisterName metody , aby zarejestrować obiekt na stronie, do której należy.

Poniższe sekcje zawierają przykład nazewnictwa elementu w języku XAML i kodzie. Aby uzyskać bardziej szczegółowe informacje na temat nazewnictwa i określania wartości docelowych, zobacz Storyboards Overview (Omówienie scenorysów).

Stosowanie i uruchamianie scenorysów

Aby rozpocząć scenorys w języku XAML, należy skojarzyć go z elementem EventTrigger. Obiekt EventTrigger to obiekt opisujący akcje, które należy wykonać po wystąpieniu określonego zdarzenia. Jedną z tych akcji może być BeginStoryboard akcja, która służy do uruchamiania scenorysu. Wyzwalacze zdarzeń są podobne do procedur obsługi zdarzeń, ponieważ umożliwiają określenie sposobu reagowania aplikacji na określone zdarzenie. W przeciwieństwie do procedur obsługi zdarzeń wyzwalacze zdarzeń można w pełni opisać w języku XAML; żaden inny kod nie jest wymagany.

Aby uruchomić kod Storyboard w kodzie, możesz użyć EventTrigger metody Storyboard lub metody Begin klasy .

Interaktywna kontrola scenorysu

W poprzednim przykładzie pokazano, jak uruchomić Storyboard zdarzenie po wystąpieniu zdarzenia. Możesz również interaktywnie kontrolować element Storyboard po jego uruchomieniu: możesz wstrzymać, wznowić, zatrzymać, przejść do okresu wypełnienia, wyszukać i usunąć Storyboardelement . Aby uzyskać więcej informacji i przykład pokazujący, jak interaktywnie kontrolować element Storyboard, zobacz Storyboards Overview (Omówienie scenorysów).

Co się stanie po zakończeniu animacji?

Właściwość FillBehavior określa, jak zachowuje się oś czasu po jej zakończeniu. Domyślnie oś czasu rozpoczyna się Filling po zakończeniu. Animacja zawierająca Filling końcową wartość wyjściową.

Element DoubleAnimation w poprzednim przykładzie nie kończy się, ponieważ jego RepeatBehavior właściwość jest ustawiona na Foreverwartość . Poniższy przykład animuje prostokąt przy użyciu podobnej animacji. W przeciwieństwie do poprzedniego przykładu RepeatBehavior właściwości i AutoReverse tej animacji pozostają w ich wartościach domyślnych. W związku z tym animacja przechodzi od 1 do 0 w ciągu pięciu sekund, a następnie zatrzymuje się.

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

Ponieważ jego FillBehavior wartość domyślna nie została zmieniona, czyli HoldEnd, animacja przechowuje wartość końcową 0, gdy kończy się. Opacity W związku z tym prostokąt pozostaje na 0 po zakończeniu animacji. Jeśli ustawisz Opacity prostokąt na inną wartość, kod wydaje się nie mieć żadnego wpływu, ponieważ animacja nadal wpływa na Opacity właściwość.

Jednym ze sposobów odzyskania kontroli nad animowaną właściwością w kodzie jest użycie BeginAnimation metody i określenie wartości null dla parametru AnimationTimeline . Aby uzyskać więcej informacji i przykład, zobacz Set a Property After Animating It with a Storyboard (Ustawianie właściwości po animowaniu jej za pomocą scenorysu).

Należy pamiętać, że chociaż ustawienie wartości właściwości z animacją Active lub Filling nie ma żadnego efektu, wartość właściwości się zmienia. Aby uzyskać więcej informacji, zobacz Omówienie animacji i systemu chronometrażu.

Tworzenie powiązań danych i animowanie animacji

Większość właściwości animacji może być powiązana lub animowana; na przykład można animować Duration właściwość obiektu DoubleAnimation. Jednak ze względu na sposób działania systemu chronometrażu powiązane lub animowane animacje nie zachowują się jak inne powiązane lub animowane obiekty. Aby zrozumieć ich zachowanie, warto zrozumieć, co to znaczy zastosować animację do właściwości.

Zapoznaj się z przykładem w poprzedniej sekcji, w których pokazano, jak animować Opacity prostokąt. Po załadowaniu prostokąta w poprzednim przykładzie wyzwalacz zdarzenia stosuje Storyboardelement . System chronometrażu Storyboard tworzy kopię elementu i jego animacji. Kopie te są zamrożone (tylko do odczytu) i Clock tworzone są na ich podstawie obiekty. Te zegary wykonują rzeczywistą pracę animowania właściwości docelowych.

System chronometrażu tworzy zegar dla DoubleAnimation obiektu i stosuje go do obiektu i właściwości określonej przez TargetName i TargetProperty DoubleAnimation. W tym przypadku system chronometrażu stosuje zegar do Opacity właściwości obiektu o nazwie "MyRectangle".

Mimo że zegar jest również tworzony dla Storyboard, zegar nie jest stosowany do żadnych właściwości. Jego celem jest kontrolowanie zegara podrzędnego, zegara, który jest tworzony dla .DoubleAnimation

Aby animacja odzwierciedlała zmiany powiązania danych lub animacji, jego zegar musi zostać wygenerowany ponownie. Zegary nie są generowane automatycznie. Aby animacja odzwierciedlała zmiany, zastosuj ponownie scenorys przy użyciu BeginStoryboard metody lub Begin . W przypadku użycia jednej z tych metod animacja jest uruchamiana ponownie. W kodzie możesz użyć Seek metody , aby przenieść scenorys z powrotem do poprzedniej pozycji.

Aby zapoznać się z przykładem animacji powiązanej z danymi, zobacz Przykład animacji linii kluczy. Aby uzyskać więcej informacji o sposobie działania animacji i systemu chronometrażu, zobacz Animacja i System chronometrażu — omówienie.

Inne sposoby animowania

Przykłady w tym przeglądzie pokazują, jak animować przy użyciu scenorysów. W przypadku korzystania z kodu można animować na kilka innych sposobów. Aby uzyskać więcej informacji, zobacz Omówienie technik animacji właściwości.

Przykłady animacji

Poniższe przykłady mogą pomóc w rozpoczęciu dodawania animacji do aplikacji.

Nazwa opis
Animacja i system chronometrażu — przegląd Opisuje sposób, w jaki system chronometrażu Timeline używa klas i Clock , które umożliwiają tworzenie animacji.
Animacja — porady i wskazówki Zawiera listę przydatnych wskazówek dotyczących rozwiązywania problemów z animacjami, takimi jak wydajność.
Niestandardowe animacje — przegląd Opisuje sposób rozszerzania systemu animacji przy użyciu klatek kluczowych, klas animacji lub wywołań zwrotnych dla poszczególnych ramek.
Animacje od/do/przez — przegląd Opisuje sposób tworzenia animacji, która przechodzi między dwiema wartościami.
Animacje kluczowych klatek — przegląd Opisuje sposób tworzenia animacji z wieloma wartościami docelowymi, w tym możliwość kontrolowania metody interpolacji.
Funkcje easingu Wyjaśnia, jak zastosować formuły matematyczne do animacji, aby uzyskać realistyczne zachowanie, takie jak odbijanie.
Animacje ścieżki — przegląd Opisuje sposób przenoszenia lub obracania obiektu wzdłuż złożonej ścieżki.
Techniki animacji właściwości — przegląd Opisuje animacje właściwości przy użyciu scenorysów, lokalnych animacji, zegarów i animacji na ramkę.
Scenorysy — przegląd Opisuje sposób używania scenorysów z wieloma osiami czasu do tworzenia złożonych animacji.
Zachowania chronometrażu — przegląd Timeline Opisuje typy i właściwości używane w animacjach.
Zdarzenia chronometrażu — przegląd Opisuje zdarzenia dostępne w Timeline obiektach i Clock do wykonywania kodu w punktach na osi czasu, takie jak rozpoczęcie, wstrzymanie, wznawianie, pomijanie lub zatrzymywanie.
Tematy z instrukcjami Zawiera przykłady kodu służące do używania animacji i osi czasu w aplikacji.
Zegary — tematy z instrukcjami Zawiera przykłady kodu służące do używania Clock obiektu w aplikacji.
Klatki kluczowe — tematy z instrukcjami Zawiera przykłady kodu służące do używania animacji klatek kluczowych w aplikacji.
Animacja ścieżki — tematy z instrukcjami Zawiera przykłady kodu służące do używania animacji ścieżek w aplikacji.

Odwołanie