Przegląd Animacja

Windows Presentation Foundation (WPF) oferuje zaawansowany zestaw funkcji graficznych i układów, które umożliwiają tworzenie atrakcyjnych interfejsów użytkownika i atrakcyjnych dokumentów. Animacja może zwiększyć atrakcyjny interfejs użytkownika, jeszcze bardziej spektakularnych i użyteczny. Po prostu animować kolor tła lub stosując animowany Transform , można tworzyć znaczące przejścia ekranu lub udostępniać przydatne podpowiedzi wizualne.

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

Wprowadzenie do animacji

Animacja jest złudzeniem, który jest tworzony przez szybkie przechodzenie przez serię obrazów, z których każdy nieco się różni od ostatniego. Mózg postrzega grupę obrazów jako pojedynczą zmianę sceny. W folii to iluzja jest tworzona przy użyciu kamer, które nagrywają wiele fotografii lub klatek, w każdej sekundzie. Gdy klatki są odtwarzane przez rzutnik, odbiorcy widzą przenoszony obraz.

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

  • Program tworzy czasomierz.

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

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

  • Program zaktualizuje prostokąt przy użyciu nowej wartości i ponownie narysuje.

Wcześniej WPF deweloperzy systemu Microsoft Windows musieli utworzyć własne systemy chronometrażu i zarządzać nimi lub użyć specjalnych bibliotek niestandardowych. WPF Program zawiera wydajny system czasu, który jest udostępniany za pomocą kodu zarządzanego i Extensible Application Markup Language (XAML) który jest głęboko zintegrowany z WPF platformą. WPF Animacja ułatwia animowanie kontrolek i innych obiektów graficznych.

WPF obsługuje wszystkie znajdujące się w tle prace związane z zarządzaniem systemem chronometrażu i wydajnie rysując ekran. Zawiera klasy chronometrażu, które umożliwiają skoncentrowanie się na efektach, które chcesz utworzyć, zamiast Mechanics z nich. WPF ułatwia również tworzenie własnych animacji, uwidaczniając klasy bazowe animacji, z których klasy mogą dziedziczyć, aby generować dostosowane animacje. Te niestandardowe animacje uzyskują wiele zalet wydajności standardowych klas animacji.

System animacji właściwości WPF

W przypadku zrozumienia kilku ważnych koncepcji dotyczących systemu chronometrażu WPF animacje mogą być łatwiejsze w użyciu. Najważniejsze jest to, że w programie WPF animowanie obiektów przez zastosowanie animacji do poszczególnych właściwości. Na przykład, aby zwiększyć element struktury, można animować jego Width Height właściwości i. Aby zmienić obiekt z widoku, można animować jego Opacity Właściwość.

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

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

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

Przykład: zwiększanie i wyewidencjonowywanie elementu

Ten przykład pokazuje, jak używać WPF animacji do animowania wartości właściwości zależności. Używa DoubleAnimation , który jest typem animacji generującej Double wartości, do animowania Opacity właściwości Rectangle . W efekcie Rectangle zanika i znika.

Pierwsza część przykładu tworzy Rectangle element. Poniższe kroki pokazują, jak utworzyć animację i zastosować ją do właściwości prostokąta Opacity .

Poniżej przedstawiono sposób tworzenia Rectangle elementu w StackPanel języku XAML.

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

Poniżej przedstawiono sposób tworzenia Rectangle elementu 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 elementu DoubleAnimation

Jednym ze sposobów stopniowego zanikania elementu w widoku jest animowanie jego Opacity właściwości. Ponieważ Opacity Właściwość jest typu Double , potrzebna jest animacja, która generuje wartości podwójne. DoubleAnimationJest to taka animacja. DoubleAnimationTworzy przejście między dwoma podwójnymi wartościami. Aby określić wartość początkową, należy ustawić jej From Właściwość. Aby określić jej wartość końcową, należy ustawić jej To Właściwość.

  1. Wartość nieprzezroczystości 1.0 sprawia, że obiekt całkowicie nieprzejrzysty, a wartość nieprzezroczystości sprawia, że 0.0 jest całkowicie niewidoczna. Aby zmiana animacji była 1.0 0.0 ustawiana na wartość From 1.0 i jej To Właściwość na 0.0 . Poniżej przedstawiono sposób tworzenia DoubleAnimation w języku XAML.

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

    Poniżej pokazano, jak utworzyć DoubleAnimation kod 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ć Duration . DurationAnimacja określa, jak długo ma przebiegać od wartości początkowej do wartości docelowej. Poniżej pokazano, jak ustawić Duration do pięciu sekund w kodzie XAML.

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

    Poniżej pokazano, jak ustawić Duration do pięciu sekund w kodzie.

    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
    
    myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
    
  3. Poprzedni kod wykazał animację, która przechodzi z 1.0 do 0.0 , co powoduje, że element docelowy zmienia się z całkowicie nieprzezroczysty na całkowicie niewidoczny. Aby element przechodził do tyłu do widoku po jego wyznikaniu, ustaw AutoReverse Właściwość animacji na true . Aby animacja była powtarzana w nieskończoność, ustaw jej RepeatBehavior Właściwość na Forever . Poniżej przedstawiono sposób ustawiania AutoReverse RepeatBehavior właściwości i 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 RepeatBehavior właściwości i 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 i użyć właściwości i, które są TargetName dołączone do TargetProperty określenia obiektu i właściwości do animacji.

  1. Utwórz Storyboard i Dodaj animację jako element podrzędny. Poniżej przedstawiono sposób tworzenia 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 kod w, zadeklaruj Storyboard zmienną 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. StoryboardMusi wiedzieć, gdzie zastosować animację. Użyj Storyboard.TargetName dołączonej właściwości, aby określić obiekt do animacji. Poniżej przedstawiono sposób ustawiania nazwy docelowej DoubleAnimation do MyRectangle 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 przedstawiono sposób ustawiania nazwy docelowej DoubleAnimation do MyRectangle w kodzie.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
    
    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
    
  3. Użyj TargetProperty dołączonej właściwości, aby określić właściwość do animacji. Poniżej przedstawiono sposób skonfigurowania animacji jako docelowej Opacity właściwości Rectangle języka 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 przedstawiono sposób skonfigurowania animacji jako docelowej Opacity 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 Omówienie scenorysów.

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

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

  1. Utwórz BeginStoryboard obiekt i skojarz z nim swój scenorys. A BeginStoryboard jest typem TriggerAction , który stosuje i uruchamia 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. Utwórz EventTrigger i Dodaj BeginStoryboard do swojej Actions kolekcji. Ustaw RoutedEvent Właściwość EventTrigger dla zdarzenia kierowanego, które chcesz uruchomić Storyboard . (Aby uzyskać więcej informacji na temat zdarzeń kierowanych, zobacz Omówienie zdarzeń kierowanych).

    <!-- 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 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 w kodzie jest użycie programu obsługi zdarzeń. W tej sekcji przedstawiono sposób kojarzenia Storyboard z programem obsługi zdarzeń w kodzie.

  1. Zarejestruj się na potrzeby Loaded zdarzenia prostokąta.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
    
    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded
    
  2. Zadeklaruj procedurę obsługi zdarzeń. W programie obsługi zdarzeń Użyj metody, Begin 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 wyświetlona 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 stopniowo rozjaśnia się i wyświetla 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, na przykład Double Width właściwość elementu, użyj animacji, która produkuje Double wartości. Aby animować właściwość, która przyjmuje Point , należy użyć animacji, która produkuje Point wartości itd. Ze względu na liczbę różnych typów właściwości w przestrzeni nazw istnieje kilka klas animacji System.Windows.Media.Animation . Na szczęście są one zgodne z ścisłą konwencją nazewnictwa, która ułatwia odróżnienie między nimi:

  • <Type>Animacja

    Animacja między wartością początkową i docelową, nazywana animacją "od/do/przez" lub "podstawowa", powoduje, że są to animacje między wartościami początkowymi i docelowymi lub przez dodanie wartości przesunięcia do wartości początkowej.

    • Aby określić wartość początkową, należy ustawić właściwość from animacji.

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

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

    Przykłady w tym omówieniu używają tych animacji, ponieważ są one najprostsze do użycia. Animacje z/do/według animacji są szczegółowo opisane w Omówienie animacji od/do/przez.

  • <Type>AnimationUsingKeyFrames

    Animacje klatek kluczowych są bardziej wydajne niż animacje między nimi, ponieważ można określić dowolną liczbę wartości docelowych, a także kontrolować metodę interpolacji. Niektóre typy można animować tylko przy użyciu animacji klatek kluczowych. Animacje klatek kluczowych są szczegółowo opisane w temacie Omówienie animacji klatekkluczowych.

  • <Type>AnimationUsingPath

    Animacje ścieżki umożliwiają użycie ścieżki geometrycznej w celu wygenerowania animowanych wartości.

  • <Type>Podstawy animacji

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

W większości przypadków warto używać <Type> klas animacji, takich jak DoubleAnimation i ColorAnimation .

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

Typ właściwości Odpowiadająca animacja podstawowa (od/do/z) Animacja odpowiedniej ramki klucza Animacja odpowiedniej ścieżki Przykład użycia
Color ColorAnimation ColorAnimationUsingKeyFrames Brak Animuj Color a SolidColorBrush lub GradientStop .
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Animuj Width a DockPanel lub Height z Button .
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Animuj Center położenie elementu EllipseGeometry .
String Brak StringAnimationUsingKeyFrames Brak Animuj Text a TextBlock lub Content z Button .

Animacje to osie czasu

Wszystkie typy animacji dziedziczą z Timeline klasy; w związku z tym wszystkie animacje są wyspecjalizowanymi typami osi czasu. A Timeline definiuje segment czasu. Można określić zachowanie chronometrażu osi czasu: jego Duration częstotliwość powtarzania, a nawet szybkość szybkiego postępu.

Ponieważ animacja jest Timeline , reprezentuje również segment czasu. Animacja oblicza również wartości wyjściowe w miarę postępu 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 czasu to Duration , AutoReverse , i RepeatBehavior .

Właściwość Duration

Jak wspomniano wcześniej, oś czasu reprezentuje segment czasu. Długość tego segmentu jest określana na podstawie Duration osi czasu, która zwykle jest określana za pomocą TimeSpan wartości. Gdy oś czasu osiągnie koniec jego czasu trwania, zakończył iterację.

Animacja używa swojej Duration właściwości, aby określić jej bieżącą wartość. Jeśli nie określisz Duration wartości dla animacji, używa ona 1 sekund, co jest wartością domyślną.

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

godz : . minuty : sekund

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

Ustawienie Wartość wyników
0:0: 5,5 5,5 sekund.
0:30:5,5 30 minut i 5,5 sekund.
1:30:5,5 1 godzina, 30 minut i 5,5 sekund.

Jednym ze sposobów określenia Duration w kodzie jest użycie FromSeconds metody w celu utworzenia TimeSpan , a następnie zadeklarować nową Duration strukturę przy użyciu tego elementu TimeSpan .

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

AutoReverse

AutoReverseWłaściwość określa, czy oś czasu jest odtwarzana wstecz po osiągnięciu końca Duration . Jeśli ustawisz tę właściwość animacji na true , animacja zostanie odwrócona po osiągnięciu jej końca, przez co jej wartość Duration końcowa zostanie przywrócona do wartości początkowej. Domyślnie ta właściwość jest false .

RepeatBehavior

RepeatBehaviorWłaściwość określa, ile razy jest odtwarzany oś czasu. Domyślnie osie czasu mają liczbę iteracji 1.0 , co oznacza, że są one odtwarzane jeden raz i nie powtarzają się w ogóle.

Aby uzyskać więcej informacji o tych właściwościach 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óra ma zostać poddana animacji. Storyboard obiekty umożliwiają zastosowanie animacji do właściwości. A Storyboard to oś czasu kontenera , która zawiera informacje dotyczące docelowej animacji, które zawiera.

Obiekty docelowe i właściwości

StoryboardKlasa zawiera TargetName TargetProperty właściwości i dołączone. Ustawiając te właściwości dla animacji, poinformujesz animację, co ma być animowane. Jednak zanim animacja będzie mogła wskazywać obiekt, obiekt musi być zwykle podaną nazwą.

Przypisanie nazwy FrameworkElement różni się od przypisywania nazwy do Freezable obiektu. Większość formantów i paneli to elementy struktury; Jednak większość czystych obiektów graficznych, takich jak pędzle, przekształcenia i geometrie, to Freezable obiekty. Jeśli nie masz pewności, czy typem jest FrameworkElement lub Freezable , zapoznaj się z sekcją Hierarchia dziedziczenia dokumentacji referencyjnej.

  • Aby utworzyć FrameworkElement obiekt docelowy animacji, nadaj mu nazwę przez ustawienie jego Name właściwości. W kodzie, należy również użyć RegisterName metody do zarejestrowania nazwy elementu ze stroną, do której należy.

  • Aby utworzyć Freezable obiekt docelowy animacji w programie XAML , należy użyć dyrektywy x:Name w celu przypisania jej nazwy. W kodzie, wystarczy użyć RegisterName metody do zarejestrowania obiektu ze stroną, do której należy.

Poniższe sekcje zawierają przykład nazewnictwa elementu w XAML i kodu. Aby uzyskać bardziej szczegółowe informacje o nazewnictwie i określaniu elementów docelowych, zobacz Omówienie scenorysów.

Stosowanie i uruchamianie scenorysów

Aby rozpocząć scenorys w XAML , należy skojarzyć go z EventTrigger . EventTriggerJest obiektem opisującym działania podejmowane 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 programów obsługi zdarzeń, ponieważ umożliwiają określenie, w jaki sposób aplikacja reaguje na określone zdarzenie. W przeciwieństwie do obsługi zdarzeń, wyzwalacze zdarzeń można w pełni opisać w. XAML nie jest wymagane żadne inne kod.

Aby rozpocząć pracę Storyboard w kodzie, można użyć EventTrigger metody klasy lub użyć jej Begin Storyboard .

Interaktywna kontrola scenorysu

W poprzednim przykładzie pokazano, jak uruchomić Storyboard zdarzenie w przypadku wystąpienia zdarzenia. Możesz również interaktywnie kontrolować Storyboard po rozpoczęciu pracy: można wstrzymywać, wznawiać, zatrzymywać, przełączać do jego okresu wypełniania, wyszukiwać i usuwać Storyboard . Aby uzyskać więcej informacji i przykład pokazujący, jak interaktywnie sterować usługą Storyboard , zobacz Omówienie scenorysów.

Co się stanie po zakończeniu animacji?

FillBehaviorWłaściwość określa, jak działa oś czasu po zakończeniu. Domyślnie oś czasu zaczyna się Filling po zakończeniu. Animacja, która Filling przechowuje końcową wartość wyjściową.

DoubleAnimationW poprzednim przykładzie nie kończy się, ponieważ jego RepeatBehavior Właściwość jest ustawiona na Forever . Poniższy przykład Animuj prostokąt przy użyciu podobnej animacji. W przeciwieństwie do poprzedniego przykładu RepeatBehavior AutoReverse właściwości i tej animacji są pozostawiane w wartościach domyślnych. W związku z tym animacja postępuje od 1 do 0 przez pięć sekund, a następnie zostaje zatrzymana.

<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ż FillBehavior nie został on zmieniony z wartości domyślnej, co oznacza HoldEnd , animacja utrzymuje końcową wartość 0, gdy zostanie zakończona. W związku Opacity z tym prostokąt pozostanie 0 po zakończeniu animacji. Jeśli ustawisz Opacity prostokąt na inną wartość, kod wydaje się nie działać, ponieważ animacja nadal wpływa na Opacity Właściwość.

Jednym ze sposobów na odzyskanie kontroli nad animowaną właściwością w kodzie jest użycie BeginAnimation metody i określenie wartości null dla AnimationTimeline parametru. Aby uzyskać więcej informacji i zapoznać się z przykładem, zobacz Ustawianie właściwości po animacji przy użyciu scenorysu.

Należy zauważyć, że mimo że ustawienie wartości właściwości, która Active ma Filling animację lub nie ma żadnego efektu, wartość właściwości zostanie zmieniona. Aby uzyskać więcej informacji, zobacz Omówienie animacji i systemu chronometrażu.

Powiązanie danych i animacje animacji

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

Zapoznaj się z przykładem w poprzedniej sekcji, który ilustruje sposób animacji Opacity prostokąta. Gdy zostanie załadowany prostokąt w poprzednim przykładzie, jego wyzwalacz zdarzeń stosuje Storyboard . System chronometrażu tworzy kopię Storyboard i jej animację. Te kopie są zamrożone (tylko do odczytu) i Clock obiekty są tworzone z nich. Te zegary służą do poprawnego działania animowania właściwości.

System chronometrażu tworzy zegar dla DoubleAnimation i stosuje go do obiektu i właściwości, które są określone przez TargetName i TargetProperty DoubleAnimation . W takim przypadku system chronometrażu stosuje zegar do Opacity właściwości obiektu o nazwie ".

Mimo że zegar jest również tworzony dla Storyboard , zegar nie jest stosowany do żadnych właściwości. Jego celem jest sterowanie zegarem podrzędnym, zegarem utworzonym dla DoubleAnimation .

Aby animacja odzwierciedlała powiązanie danych lub zmiany animacji, należy ponownie wygenerować zegar. Zegary nie są ponownie generowane automatycznie. Aby animacja odzwierciedlała zmiany, Zastosuj ponownie scenorys przy użyciu BeginStoryboard Begin metody lub. W przypadku korzystania z jednej z tych metod animacja jest uruchamiana ponownie. W kodzie można użyć Seek metody, aby przesunąć scenorys z powrotem do jego poprzedniej pozycji.

Aby zapoznać się z przykładem animacji powiązanej z danymi, zobacz przykład animacji z kluczem krzywej łamanej. Aby uzyskać więcej informacji o tym, jak działa animacja i system chronometrażu, zobacz Omówienie animacji i systemu chronometrażu.

Inne sposoby animacji

Przykłady w tym omówieniu przedstawiają sposób animacji przy użyciu scenorysów. W przypadku korzystania z kodu można animować różne sposoby. Aby uzyskać więcej informacji, zobacz Omówienie technik animacji właściwości.

Przykłady animacji

Poniższe przykłady ułatwiają rozpoczęcie dodawania animacji do aplikacji.

Tytuł Opis
Przegląd Animacja i system chronometrażu Opisuje, jak system chronometrażu używa Timeline Clock klas i, które umożliwiają tworzenie animacji.
Porady i triki animacyjne Wyświetla listę przydatnych porad dotyczących rozwiązywania problemów z animacjami, takich jak wydajność.
Przegląd Niestandardowe animacje Opisuje sposób rozbudowania systemu animacji z klatkami kluczowymi, klasami animacji lub wywołaniami zwrotnymi na klatkę.
Przegląd Cechy animacji od/do/przez Opisuje sposób tworzenia animacji, która przechodzi między dwiema wartościami.
Przegląd Animacja kluczowych klatek Opisuje sposób tworzenia animacji z wieloma wartościami docelowymi, w tym możliwość kontrolowania metody interpolacji.
Zwalnianie funkcji Wyjaśnia, jak zastosować formuły matematyczne do animacji w celu uzyskania realistycznych zachowań, takich jak odbijanie.
Przegląd Animacja ścieżki Opisuje sposób przenoszenia lub obracania obiektu w ścieżce złożonej.
Przegląd Techniki animacji właściwości Opisuje animacje właściwości przy użyciu scenorysów, animacji lokalnych, zegarów i animacji na klatkę.
Przegląd Scenorysy Opisuje sposób używania scenorysów z wieloma osiami czasu do tworzenia złożonych animacji.
Przegląd Zachowania chronometrażu Opisuje Timeline typy i właściwości używane w animacjach.
Przegląd Zdarzenia chronometrażu Opisuje zdarzenia dostępne dla Timeline i Clock obiektów do wykonania kodu w punktach na osi czasu, takich jak BEGIN, Pause, Resume, Skip lub Stop.
— Tematy porad Zawiera przykłady kodu służące do używania animacji i osi czasu w aplikacji.
Zegary Tematy porad 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 Pomocy Zawiera przykłady kodu służące do używania animacji Path w aplikacji.

Tematy pomocy