Omówienie technik animacji właściwości

W tym temacie opisano różne podejścia do animowania właściwości: storyboardy, animacje lokalne, zegary i animacje klatkowe.

Wymagania wstępne

Aby zrozumieć ten temat, należy zapoznać się z podstawowymi funkcjami animacji opisanymi w sekcji Przegląd animacji.

Różne sposoby animowania

Ze względu na to, że istnieje wiele różnych scenariuszy animowania właściwości, platforma WPF udostępnia kilka metod animowania właściwości.

Dla każdego podejścia poniższa tabela wskazuje, czy można go używać w poszczególnych wystąpieniach, w stylach, w szablonach kontrolek, czy w szablonach danych; czy można go używać w języku XAML; oraz to, czy podejście umożliwia interaktywną kontrolę animacji. Wyrażenie "Per-Instance" odnosi się do techniki stosowania animacji lub scenorysu bezpośrednio do wystąpień obiektu, a nie w stylu, szablonie kontrolki lub szablonie danych.

Animacje scenorysu

Użyj elementu Storyboard , jeśli chcesz zdefiniować i zastosować animacje w języku XAML, interakcyjnie kontrolować animacje po ich uruchomieniu, utworzyć złożone drzewo animacji lub animować w obiekcie StyleControlTemplate lub DataTemplate. Aby obiekt był animowany przez Storyboard, musi być FrameworkElement lub FrameworkContentElement, lub musi być używany do ustawiania FrameworkElement lub FrameworkContentElement. Aby uzyskać więcej informacji, zobacz Storyboards Overview (Omówienie scenorysów).

A Storyboard to specjalny typ kontenera Timeline, który dostarcza informacje o celu dla animacji, które zawiera. Aby animować za pomocą elementu Storyboard, wykonaj następujące trzy kroki.

1. Zadeklaruj Storyboard oraz jedną lub więcej animacji.

2. Użyj dołączonych właściwości TargetName i TargetProperty, aby określić obiekt docelowy i właściwość każdej animacji.

3. (Tylko kod) Zdefiniuj element NameScope dla elementu FrameworkElement lub FrameworkContentElement. Zarejestruj nazwy obiektów do animacji z użyciem FrameworkElement lub FrameworkContentElement.

4. Rozpocznij Storyboard.

Rozpoczynając Storyboard, animacje są stosowane do właściwości, które animują i uruchamiają je. Istnieją dwa sposoby rozpoczęcia Storyboard: można użyć metody Begin, którą zapewnia klasa Storyboard, lub można skorzystać z akcji BeginStoryboard. Jedynym sposobem animowania w języku XAML jest użycie BeginStoryboard akcji. Akcję można użyć w BeginStoryboard, we właściwości EventTrigger lub w Trigger.

W poniższej tabeli przedstawiono różne miejsca, w których jest obsługiwana każda Storyboard technika rozpoczęcia: na wystąpienie, styl, szablon kontrolki i szablon danych.

Aby uzyskać więcej informacji na temat obiektów Storyboard, zapoznaj się z Storyboards Overview (Omówienie scenorysów).

Animacje lokalne

Animacje lokalne zapewniają wygodny sposób animowania właściwości zależności dowolnego Animatable obiektu. Użyj lokalnych animacji, gdy chcesz zastosować pojedynczą animację do właściwości i nie musisz interakcyjnie kontrolować animacji po jej uruchomieniu. W przeciwieństwie do animacji Storyboard, animacja lokalna może animować obiekt, który nie jest skojarzony z FrameworkElement lub FrameworkContentElement. Nie trzeba również definiować NameScope dla tego typu animacji.

Animacje lokalne mogą być używane tylko w kodzie i nie mogą być zdefiniowane w stylach, szablonach kontrolek lub szablonach danych. Animacja lokalna nie może być interaktywnie kontrolowana po jej uruchomieniu.

Aby animować przy użyciu animacji lokalnej, wykonaj następujące kroki.

1. Utwórz AnimationTimeline obiekt.

2. BeginAnimation Użyj metody obiektu, który chcesz animować, aby zastosować AnimationTimeline właściwość do określonej właściwości.

W poniższym przykładzie pokazano, jak animować szerokość i kolor tła elementu Button.

/*

   This sample demonstrates how to apply non-storyboard animations to a property.
   To animate in markup, you must use storyboards.

*/

using namespace System;
using namespace System::Windows;
using namespace System::Windows::Navigation;
using namespace System::Windows::Media;
using namespace System::Windows::Media::Animation;
using namespace System::Windows::Shapes;
using namespace System::Windows::Controls;


namespace Microsoft {
   namespace Samples {
      namespace Animation {
         namespace LocalAnimations {
            // Create the demonstration.
            public ref class LocalAnimationExample : Page {

            public: 
               LocalAnimationExample ()
               {
                  WindowTitle = "Local Animation Example";
                  StackPanel^ myStackPanel = gcnew StackPanel();
                  myStackPanel->Margin = Thickness(20);

                  // Create and set the Button.
                  Button^ aButton = gcnew Button();
                  aButton->Content = "A Button";

                  // Animate the Button's Width.
                  DoubleAnimation^ myDoubleAnimation = gcnew DoubleAnimation();
                  myDoubleAnimation->From = 75;
                  myDoubleAnimation->To = 300;
                  myDoubleAnimation->Duration = Duration(TimeSpan::FromSeconds(5));
                  myDoubleAnimation->AutoReverse = true;
                  myDoubleAnimation->RepeatBehavior = RepeatBehavior::Forever;

                  // Apply the animation to the button's Width property.
                  aButton->BeginAnimation(Button::WidthProperty, myDoubleAnimation);

                  // Create and animate a Brush to set the button's Background.
                  SolidColorBrush^ myBrush = gcnew SolidColorBrush();
                  myBrush->Color = Colors::Blue;

                  ColorAnimation^ myColorAnimation = gcnew ColorAnimation();
                  myColorAnimation->From = Colors::Blue;
                  myColorAnimation->To = Colors::Red;
                  myColorAnimation->Duration = Duration(TimeSpan::FromMilliseconds(7000));
                  myColorAnimation->AutoReverse = true;
                  myColorAnimation->RepeatBehavior = RepeatBehavior::Forever;

                  // Apply the animation to the brush's Color property.
                  myBrush->BeginAnimation(SolidColorBrush::ColorProperty, myColorAnimation);
                  aButton->Background = myBrush;

                  // Add the Button to the panel.
                  myStackPanel->Children->Add(aButton);
                  this->Content = myStackPanel;
               };
            };
         }
      }
   }
}

/*

   This sample demonstrates how to apply non-storyboard animations to a property.
   To animate in markup, you must use storyboards.

*/

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

namespace Microsoft.Samples.Animation.LocalAnimations
{

    // Create the demonstration.
    public class LocalAnimationExample : Page
    {

        public LocalAnimationExample()
        {

            WindowTitle = "Local Animation Example";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);

            // Create and set the Button.
            Button aButton = new Button();
            aButton.Content = "A Button";

            // Animate the Button's Width.
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 75;
            myDoubleAnimation.To = 300;
            myDoubleAnimation.Duration =  new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Apply the animation to the button's Width property.
            aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation);

            // Create and animate a Brush to set the button's Background.
            SolidColorBrush myBrush = new SolidColorBrush();
            myBrush.Color = Colors.Blue;

            ColorAnimation myColorAnimation = new ColorAnimation();
            myColorAnimation.From = Colors.Blue;
            myColorAnimation.To = Colors.Red;
            myColorAnimation.Duration =  new Duration(TimeSpan.FromMilliseconds(7000));
            myColorAnimation.AutoReverse = true;
            myColorAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Apply the animation to the brush's Color property.
            myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation);
            aButton.Background = myBrush;

            // Add the Button to the panel.
            myStackPanel.Children.Add(aButton);
            this.Content = myStackPanel;
        }
    }
}

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
'''This sample demonstrates how to apply non-storyboard animations to a property.
'''To animate in markup, you must use storyboards.
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

Imports System.Windows
Imports System.Windows.Navigation
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Controls

Namespace Microsoft.Samples.Animation.LocalAnimations

    ' Create the demonstration.
    Public Class LocalAnimationExample
        Inherits Page

        Public Sub New()

            WindowTitle = "Animate Property Example"
            Dim myStackPanel As New StackPanel()
            myStackPanel.Margin = New Thickness(20)

            ' Create and set the Button.
            Dim aButton As New Button()
            aButton.Content = "A Button"

            ' Animate the Button's Width.
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 75
            myDoubleAnimation.To = 300
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
            myDoubleAnimation.AutoReverse = True
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Apply the animation to the button's Width property.
            aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation)

            ' Create and animate a Brush to set the button's Background.
            Dim myBrush As New SolidColorBrush()
            myBrush.Color = Colors.Blue

            Dim myColorAnimation As New ColorAnimation()
            myColorAnimation.From = Colors.Blue
            myColorAnimation.To = Colors.Red
            myColorAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(7000))
            myColorAnimation.AutoReverse = True
            myColorAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Apply the animation to the brush's Color property.
            myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation)
            aButton.Background = myBrush

            ' Add the Button to the panel.
            myStackPanel.Children.Add(aButton)
            Me.Content = myStackPanel
        End Sub
    End Class
End Namespace

Animacje zegara

Używaj Clock obiektów, gdy chcesz animować bez użycia obiektu Storyboard i chcesz utworzyć złożone drzewa chronometrażu lub interaktywnie kontrolować animacje po ich uruchomieniu. Za pomocą obiektów Clock można animować właściwość zależności dowolnego Animatable obiektu.

Nie można używać Clock obiektów bezpośrednio do animowania w stylach, szablonach kontrolek lub szablonach danych. (System animacji i systemu czasowego rzeczywiście używa Clock obiektów do animowania w stylach, szablonach kontrolek i szablonach danych, ale musi utworzyć te Clock obiekty na podstawie Storyboard elementu. Aby uzyskać więcej informacji na temat relacji między obiektami Storyboard i Clock obiektami, zobacz Animacja i System Czasowy: Omówienie.)

Aby zastosować pojedynczy element Clock do właściwości, wykonaj następujące kroki.

1. Utwórz AnimationTimeline obiekt.

2. Użyj metody CreateClockAnimationTimeline aby utworzyć obiekt AnimationClock.

3. ApplyAnimationClock Użyj metody obiektu, który chcesz animować, aby zastosować AnimationClock obiekt do określonej właściwości.

W poniższym przykładzie pokazano, jak utworzyć AnimationClock i zastosować ją do dwóch podobnych właściwości.

/*
    This example shows how to create and apply
    an AnimationClock.
*/

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

namespace Microsoft.Samples.Animation.TimingBehaviors
{
    public class AnimationClockExample : Page
    {

        ScaleTransform myScaleTransform;

        public AnimationClockExample()
        {

            this.WindowTitle = "Opacity Animation Example";
            this.Background = Brushes.White;
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);

            // Create a button that with a ScaleTransform.
            // The ScaleTransform will animate when the
            // button is clicked.
            Button myButton = new Button();
            myButton.Margin = new Thickness(50);
            myButton.HorizontalAlignment = HorizontalAlignment.Left;
            myButton.Content = "Click Me";
            myScaleTransform = new ScaleTransform(1,1);
            myButton.RenderTransform = myScaleTransform;

            // Associate an event handler with the
            // button's Click event.
            myButton.Click += new RoutedEventHandler(myButton_Clicked);

            myStackPanel.Children.Add(myButton);
            this.Content = myStackPanel;
        }

        // Create and apply and animation when the button is clicked.
        private void myButton_Clicked(object sender, RoutedEventArgs e)
        {

            // Create a DoubleAnimation to animate the
            // ScaleTransform.
            DoubleAnimation myAnimation =
                new DoubleAnimation(
                    1, // "From" value
                    5, // "To" value
                    new Duration(TimeSpan.FromSeconds(5))
                );
            myAnimation.AutoReverse = true;

            // Create a clock the for the animation.
            AnimationClock myClock = myAnimation.CreateClock();

            // Associate the clock the ScaleX and
            // ScaleY properties of the button's
            // ScaleTransform.
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleXProperty, myClock);
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleYProperty, myClock);
        }
    }
}

'
'    This example shows how to create and apply
'    an AnimationClock.
'


Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation


Namespace Microsoft.Samples.Animation.TimingBehaviors
    Public Class AnimationClockExample
        Inherits Page

        Private ReadOnly myScaleTransform As ScaleTransform

        Public Sub New()

            WindowTitle = "Opacity Animation Example"
            Background = Brushes.White
            Dim myStackPanel As New StackPanel With {
                .Margin = New Thickness(20)
            }

                ' Create a button that with a ScaleTransform.
                ' The ScaleTransform will animate when the
                ' button is clicked.
            Dim myButton As New Button With {
                .Margin = New Thickness(50),
                .HorizontalAlignment = HorizontalAlignment.Left,
                .Content = "Click Me"
            }
            myScaleTransform = New ScaleTransform(1,1)
            myButton.RenderTransform = myScaleTransform


            ' Associate an event handler with the
            ' button's Click event.
            AddHandler myButton.Click, AddressOf myButton_Clicked

            myStackPanel.Children.Add(myButton)
            Content = myStackPanel
        End Sub

        ' Create and apply and animation when the button is clicked.
        Private Sub myButton_Clicked(sender As Object, e As RoutedEventArgs)

            ' Create a DoubleAnimation to animate the
            ' ScaleTransform.
            Dim myAnimation As New DoubleAnimation(1, 5, New Duration(TimeSpan.FromSeconds(5))) With {
                .AutoReverse = True
            } ' "To" value -  "From" value

            ' Create a clock the for the animation.
            Dim myClock As AnimationClock = myAnimation.CreateClock()

            ' Associate the clock the ScaleX and
            ' ScaleY properties of the button's
            ' ScaleTransform.
            myScaleTransform.ApplyAnimationClock(ScaleTransform.ScaleXProperty, myClock)
            myScaleTransform.ApplyAnimationClock(ScaleTransform.ScaleYProperty, myClock)
        End Sub
    End Class
End Namespace

Aby utworzyć drzewo chronometrażu i użyć go do animowania właściwości, wykonaj następujące kroki.

1. Użyj obiektów ParallelTimeline i AnimationTimeline, aby utworzyć drzewo czasowe.

2. Użyj głównego katalogu CreateClock elementu ParallelTimeline, aby utworzyć ClockGroup.

3. Iteruj przez obiekt ChildrenClockGroup i zastosuj jego obiekty podrzędne Clock . Dla każdego AnimationClock elementu podrzędnego użyj ApplyAnimationClock metody obiektu, który chcesz animować, aby zastosować AnimationClock do określonej właściwości.

Aby uzyskać więcej informacji na temat obiektów zegara, zobacz Animacja i System chronometrażu — omówienie.

Per-Frame Animacja: ominięcie systemu animacji i chronometrażu

Użyj tego podejścia, jeśli musisz całkowicie pominąć system animacji WPF. Jednym ze scenariuszy dla tego podejścia są animacje fizyki, w których każdy krok animacji wymaga ponownego skompilowania obiektów na podstawie ostatniego zestawu interakcji z obiektami.

Animacje dla ramki nie mogą być zdefiniowane wewnątrz stylów, szablonów kontrolek ani szablonów danych.

Aby animować klatka po klatce, należy zarejestrować się na zdarzenie obiektu, który zawiera obiekty do animacji. Ta metoda obsługi zdarzeń jest wywoływana raz na ramkę. Za każdym razem, gdy platforma WPF przenosi utrwalone dane renderowania z drzewa wizualnego do drzewa kompozycji, wywoływana jest metoda obsługi zdarzeń.

W programie obsługi zdarzeń wykonaj dowolne obliczenia niezbędne dla efektu animacji i ustaw właściwości obiektów, które mają być animowane przy użyciu tych wartości.

Aby uzyskać czas prezentacji dla bieżącej klatki, EventArgs skojarzone z tym zdarzeniem można rzutować jako RenderingEventArgs, które udostępnia RenderingTime właściwość, której można użyć do uzyskania czasu renderowania bieżącej klatki.

Aby uzyskać więcej informacji, zobacz stronę Rendering.

Zobacz także

• Animacja — omówienie
• Storyboards — omówienie
• Przegląd systemu animacji i synchronizacji
• Właściwości zależności — omówienie