Przegląd Techniki animacji właściwości

W tym temacie opisano różne podejścia do animowania właściwości: scenorysów, animacji lokalnych, zegarów i animacji na klatkę.

Wymagania wstępne

Aby zrozumieć ten temat, należy zapoznać się z podstawowymi funkcjami animacji opisanymi w artykule Omówienie animacji.

Różne sposoby animacji

Ponieważ istnieje wiele różnych scenariuszy animowania właściwości, program WPF zapewnia kilka metod animowania właściwości.

W przypadku każdego podejścia Poniższa tabela wskazuje, czy można go używać w poszczególnych wystąpieniach, w stylach, w szablonach formantów lub w szablonach danych. Określa, czy może być używany w programie XAML , oraz czy Metoda pozwala interaktywnie kontrolować animację. "Na wystąpienie" odnosi się do techniki stosowania animacji lub scenorysu bezpośrednio do wystąpień obiektu, a nie w stylu, szablonie kontrolki lub szablonie danych.

Technika animacji Scenariusze Obsługuje XAML Interaktywnie sterowane
Animacja scenorysu Na wystąpienie,, Style ControlTemplate , DataTemplate Tak Tak
Animacja lokalna Na wystąpienie Nie Nie
Animacja zegara Na wystąpienie Nie Tak
Animacja na klatkę Na wystąpienie Nie Nie dotyczy

Animacje scenorysu

Użyj Storyboard , gdy chcesz definiować i stosować animacje w programie XAML , interaktywnie kontrolować animacje po ich uruchomieniu, tworzyć złożone drzewo animacji lub animować w Style ControlTemplate lub DataTemplate . Dla obiektu, który ma być animowany przez Storyboard , musi być FrameworkElement lub lub FrameworkContentElement musi być używany do ustawiania FrameworkElement lub FrameworkContentElement . Aby uzyskać więcej informacji, zobacz Omówienie scenorysów.

A Storyboard jest specjalnym typem kontenera Timeline , który zawiera informacje dotyczące docelowej animacji, które zawiera. Aby animować z Storyboard , wykonaj następujące trzy kroki.

  1. Zadeklaruj Storyboard a i co najmniej jedną animację.

  2. TargetName TargetProperty Aby określić obiekt docelowy i właściwość każdej animacji, użyj właściwości i.

  3. (Tylko kod) Zdefiniuj NameScope dla FrameworkElement lub FrameworkContentElement . Zarejestruj nazwy obiektów do animacji z tą FrameworkElement lub FrameworkContentElement .

  4. Rozpocznij Storyboard .

Rozpoczęcie Storyboard stosowania animacji dotyczy właściwości, które są animowane i uruchamia je. Istnieją dwa sposoby rozpoczęcia Storyboard : można użyć Begin metody dostarczonej przez Storyboard klasę lub użyć BeginStoryboard akcji. Jedynym sposobem animacji w programie XAML jest użycie BeginStoryboard akcji. BeginStoryboardAkcja może być używana w EventTrigger , właściwość Trigger lub DataTrigger .

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

Trwa Rozpoczynanie korzystania z scenorysu... Na wystąpienie Styl Szablon kontrolki Szablon danych Przykład
BeginStoryboard i EventTrigger Tak Tak Tak Tak Animowanie właściwości przy użyciu scenorysu
BeginStoryboard i właściwość Trigger Nie Tak Tak Tak Wyzwalanie animacji w przypadku zmiany wartości właściwości
BeginStoryboard i a DataTrigger Nie Tak Tak Tak Instrukcje: wyzwalanie animacji w przypadku zmiany danych
Metoda Begin Tak Nie Nie Nie Animowanie właściwości przy użyciu scenorysu

Aby uzyskać więcej informacji na temat Storyboard obiektów, zobacz Omówienie scenorysów.

Animacje lokalne

Animacje lokalne zapewniają wygodny sposób animowania właściwości zależności dowolnego Animatable obiektu. Używaj animacji lokalnych, gdy chcesz zastosować pojedynczą animację do właściwości i nie musisz interaktywnie sterować animacją po jej uruchomieniu. W przeciwieństwie do Storyboard animacji, lokalna animacja 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 formantów lub szablonach danych. Nie można interaktywnie sterować animacją lokalną po jej uruchomieniu.

Aby animować animację przy użyciu animacji lokalnej, wykonaj następujące czynności.

  1. Utwórz AnimationTimeline obiekt.

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

Poniższy przykład pokazuje, jak animować szerokość i kolor tła 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żyj Clock obiektów, gdy chcesz animować bez użycia i chcesz Storyboard utworzyć złożone drzewa chronometrażu lub interaktywnie kontrolować animacje po ich uruchomieniu. Za pomocą obiektów zegara można animować właściwość zależności dowolnego Animatable obiektu.

Nie można używać Clock obiektów bezpośrednio do animacji w stylach, szablonach formantów lub szablonach danych. (Animacje i system chronometrażu faktycznie używają Clock obiektów do animowania stylów, szablonów formantów i szablonów danych, ale muszą tworzyć te Clock obiekty z Storyboard . Aby uzyskać więcej informacji na temat relacji między Storyboard obiektami i Clock obiektami, zobacz Omówienie animacji i systemu chronometrażu.)

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

  1. Utwórz AnimationTimeline obiekt.

  2. Użyj CreateClock metody, AnimationTimeline Aby utworzyć AnimationClock .

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

Poniższy przykład pokazuje, jak utworzyć AnimationClock i zastosować go 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żywać jego właściwości, wykonaj następujące czynności.

  1. Użyj ParallelTimeline obiektów i, AnimationTimeline Aby utworzyć drzewo chronometrażu.

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

  3. Wykonaj iterację Children ClockGroup i Zastosuj jej Clock obiekty podrzędne. Dla każdego AnimationClock elementu podrzędnego Użyj ApplyAnimationClock metody obiektu, który ma być animowany, aby zastosować AnimationClock do określonej właściwości

Aby uzyskać więcej informacji na temat obiektów zegara, zobacz Omówienie animacji i systemu chronometrażu.

Animacja Per-Frame: pomijanie animacji i systemu chronometrażu

Użyj tej metody, gdy musisz całkowicie ominąć WPF system animacji. Jednym z scenariuszy tego podejścia są animacje fizyki, gdzie każdy krok animacji wymaga ponownego obliczenia obiektów na podstawie ostatniego zestawu interakcji z obiektem.

Nie można definiować animacji dla klatek w obrębie stylów, szablonów formantów ani szablonów danych.

Aby animować klatkę między ramkami, należy zarejestrować się na potrzeby Rendering zdarzenia obiektu, który zawiera obiekty, które mają być animowane. Ta metoda obsługi zdarzeń jest wywoływana raz na klatkę. Za każdym razem, gdy WPF organizowane są trwałe dane renderowania w drzewie wizualnym w drzewie kompozycji, wywoływana jest metoda obsługi zdarzeń.

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

Aby uzyskać czas prezentacji dla bieżącej ramki, EventArgs skojarzona z tym zdarzeniem może być rzutowana jako RenderingEventArgs , która udostępnia właściwość, której RenderingTime można użyć w celu uzyskania czasu renderowania bieżącej ramki.

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

Zobacz też