Přehled technik animace vlastností

Článek
12/19/2024

Toto téma popisuje různé přístupy k animaci vlastností: storyboardy, místní animace, hodiny a animace po jednotlivých snímcích.

Požadavky

Abyste pochopili toto téma, měli byste být obeznámeni se základními animačními funkcemi popsanými vpřehledu animací .

Různé způsoby animace

Vzhledem k tomu, že existuje mnoho různých scénářů pro animaci vlastností, WPF poskytuje několik přístupů k animaci vlastností.

Pro každý přístup následující tabulka uvádí, jestli se dá použít pro jednotlivé instance, ve stylech, v šablonách ovládacích prvků nebo v šablonách dat; zda je možné jej použít v XAML; a jestli vám přístup umožňuje interaktivně ovládat animaci. "Pro instanci" odkazuje na techniku použití animace nebo scénáře přímo u instancí objektu, nikoli ve stylu, šabloně ovládacího prvku nebo šabloně dat.

Technika animace	Scénáře	Podporuje XAML.	Interaktivní ovládání
Animace scénáře	Pro každou instanci, Style, ControlTemplate, DataTemplate	Ano	Ano
Místní animace	Pro každou instanci	Ne	Ne
Animace hodin	Pro každou instanci	Ne	Ano
Animace jednotlivých snímků	Pro každou instanci	Ne	Není k dispozici

Animace scénáře

Použijte Storyboard, když chcete definovat a použít animace v JAZYCE XAML, interaktivně ovládat animace po jejich spuštění, vytvořit složitý strom animací nebo animovat v Style, ControlTemplate nebo DataTemplate. Aby byl objekt animován Storyboard, musí být FrameworkElement nebo FrameworkContentElement, nebo se musí použít k nastavení FrameworkElement nebo FrameworkContentElement. Podrobnosti naleznete v přehledu scénářů .

Storyboard je speciální typ kontejneru Timeline, který poskytuje informace o cílení na animace, které obsahuje. Pokud chcete animovat pomocí Storyboard, proveďte následující tři kroky.

Deklarujte Storyboard a jednu nebo více animací.
Pomocí TargetName a TargetProperty připojených vlastností určete cílový objekt a vlastnost každé animace.
(Pouze kód) Definujte NameScope pro FrameworkElement nebo FrameworkContentElement. Zaregistrujte názvy objektů, které chcete animovat pomocí FrameworkElement nebo FrameworkContentElement.
Zahajte Storyboard.

Začátek Storyboard aplikuje animace na vlastnosti, které mají být animovány, a tyto animace spustí. Existují dva způsoby, jak zahájit Storyboard: můžete použít buď metodu Begin poskytovanou třídou Storyboard, nebo akci BeginStoryboard. Jediným způsobem, jak animovat v XAML, je použití akce BeginStoryboard. Akci BeginStoryboard lze použít v EventTrigger, vlastnosti Trigger, nebo DataTrigger.

Následující tabulka ukazuje různá místa, kde se podporují jednotlivé Storyboard techniky zahájení: pro jednotlivé instance, styl, šablonu ovládacího prvku a šablonu dat.

Storyboard začíná používat...	Pro každou instanci	Styl	Šablona ovládacího prvku	Šablona dat	Příklad
BeginStoryboard a EventTrigger	Ano	Ano	Ano	Ano	Animace vlastnosti pomocí storyboardu
BeginStoryboard a vlastnost Trigger	Ne	Ano	Ano	Ano	aktivovat animaci, když se hodnota vlastnosti změní
BeginStoryboard a DataTrigger	Ne	Ano	Ano	Ano	Postupy: Aktivace animace při změně dat
metoda Begin	Ano	Ne	Ne	Ne	Animujte vlastnost za pomoci scénáře

Další informace o objektech Storyboard naleznete v Storyboards Přehled.

Místní animace

Místní animace poskytují pohodlný způsob animace vlastnosti závislosti libovolného objektu Animatable. Místní animace použijte, když chcete použít jednu animaci na vlastnost a po spuštění nemusíte animaci interaktivně ovládat. Na rozdíl od animace Storyboard může místní animace animovat objekt, který není přidružený k FrameworkElement nebo FrameworkContentElement. Pro tento typ animace také nemusíte definovat NameScope.

Místní animace se dají používat jenom v kódu a nelze je definovat ve stylech, řídicích šablonách nebo šablonách dat. Místní animaci nelze po spuštění interaktivně ovládat.

Pokud chcete animovat pomocí místní animace, proveďte následující kroky.

Vytvořte objekt AnimationTimeline.
Použijte metodu BeginAnimation objektu, který chcete animovat, a aplikujte AnimationTimeline na zadanou vlastnost.

Následující příklad ukazuje, jak animovat šířku a barvu pozadí 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

Animace hodin

Objekty Clock použijte, když chcete animovat bez použití Storyboard a chcete po spuštění vytvářet složité stromy časování nebo interaktivně ovládat animace. Pomocí objektů Clock můžete animovat vlastnost závislosti libovolného objektu Animatable.

Objekty Clock nelze použít přímo k animaci ve stylech, šablonách ovládacích prvků ani v šablonách dat. (Animační a časovací systém ve skutečnosti používá Clock objekty k animaci ve stylech, ovládacích šablonách a šablonách dat, ale musí pro vás vytvořit tyto Clock objekty z Storyboard. Další informace o vztahu mezi objekty Storyboard a objekty Clock naleznete v tématu Přehled systému animace a časování.)

Pokud chcete u vlastnosti použít jeden Clock, proveďte následující kroky.

Vytvořte objekt AnimationTimeline.
Použijte metodu CreateClock z AnimationTimeline k vytvoření AnimationClock.
Použijte metodu ApplyAnimationClock objektu, který chcete animovat, k použití AnimationClock na zadanou vlastnost.

Následující příklad ukazuje, jak vytvořit AnimationClock a použít ji na dvě podobné vlastnosti.

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

Pokud chcete vytvořit časovací strom a použít ho k animaci vlastností, proveďte následující kroky.

Pomocí ParallelTimeline a AnimationTimeline objektů vytvořte strom časování.
Pomocí CreateClock z kořene ParallelTimeline vytvořte ClockGroup.
Iterujte přes Children z ClockGroup a aplikujte jeho podřízené objekty Clock. Pro každé AnimationClock podřízené dítě použijte metodu ApplyAnimationClock objektu, který chcete animovat, a aplikujte AnimationClock na zadanou vlastnost.

Další informace o objektech Clock naleznete v Přehled systému animace a časování.

animace Per-Frame: Obejití systému animací a časování

Tento přístup použijte, když potřebujete zcela obejít animační systém WPF. Jedním ze scénářů pro tento přístup je fyzika animace, kdy každý krok animace vyžaduje, aby byly objekty přepočítané na základě poslední sady interakcí objektů.

Animace pro jednotlivé snímky nelze definovat uvnitř stylů, šablon ovládacích prvků ani šablon dat.

Pokud chcete animovat snímky po rámci, zaregistrujete Rendering událost objektu, který obsahuje objekty, které chcete animovat. Tato obslužná metoda události se volá jednou za snímek. Pokaždé, když WPF přenese uložená vykreslovací data ve vizuálním stromu do stromu kompozice, je volána metoda obslužné rutiny události.

V obslužné rutině události proveďte jakékoli výpočty potřebné pro animační efekt a nastavte vlastnosti objektů, které chcete animovat s těmito hodnotami.

Chcete-li získat čas prezentace pro aktuální snímek, lze EventArgs přidružené k této události přetypovat jako RenderingEventArgs, které poskytuje vlastnost RenderingTime, kterou můžete použít k získání času vykreslování aktuálního snímku.

Další informace najdete na stránce Rendering.

Viz také

Přehled animací
Přehled scénářů
Přehled animace a časování
Přehled vlastností závislosti

Sdílet prostřednictvím