Přehled způsobů animace vlastností

Toto téma popisuje různé přístupy k animaci vlastností: scénáře, místní animace, hodiny a animace pro jednotlivé snímky.

Předpoklady

Abyste pochopili toto téma, měli byste být obeznámeni se základními animačními funkcemi popsanými v př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.

Animace scénáře

Storyboard Použijte, když chcete definovat a používat animace v JAZYCE XAML, interaktivně ovládat animace po jejich spuštění, vytvořit složitý strom animací nebo animovat v objektu StyleDataTemplatenebo ControlTemplate . Aby byl objekt animovaný objektem Storyboard, musí být nebo FrameworkElementFrameworkContentElement, nebo musí být použit k nastavení nebo FrameworkElementFrameworkContentElement. Další podrobnosti najdete v přehledu scénářů.

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

1. Deklarujte Storyboard a jednu nebo více animací.

2. TargetName Pomocí vlastností a TargetProperty připojených vlastností určete cílový objekt a vlastnost jednotlivých animací.

3. (Pouze kód) Definujte pro NameScope určitou FrameworkElement nebo FrameworkContentElement. Zaregistrujte názvy objektů, které chcete animovat, FrameworkElement nebo FrameworkContentElement.

4. Zahajte .Storyboard

Storyboard Začátek použije animace na vlastnosti, které animují, a spustí je. Existují dva způsoby, jak začít Storyboard: můžete použít metodu Begin poskytnutou Storyboard třídou nebo můžete použít BeginStoryboard akci. Jediným způsobem, jak animovat v XAML, je použít BeginStoryboard akci. Akci BeginStoryboard lze použít v objektu EventTrigger, vlastnosti Triggernebo objektu DataTrigger.

Následující tabulka ukazuje různá místa, kde je podporována každá Storyboard počáteční technika: pro jednotlivé instance, styl, řídicí šablonu a šablonu dat.

Další informace oobjektch Storyboard

Místní animace

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

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.

1. Vytvořte AnimationTimeline objekt.

2. BeginAnimation Použijte metodu objektu, který chcete animovat, aby se použila na AnimationTimeline zadaná vlastnost.

Následující příklad ukazuje, jak animovat šířku a barvu Buttonpozadí .

/*

   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 použijte Clock , 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 Animatable objektu.

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

Pokud chcete použít jednu Clock vlastnost, proveďte následující kroky.

1. Vytvořte AnimationTimeline objekt.

2. CreateClock Použijte metodu AnimationTimeline vytvoření AnimationClock.

3. ApplyAnimationClock Použijte metodu objektu, který chcete animovat, aby se použila na AnimationClock zadaná 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.

1. K vytvoření stromu časování použijte ParallelTimeline objekty AnimationTimeline a objekty.

2. CreateClock Pomocí kořenového adresáře ParallelTimeline vytvořte ClockGroup.

3. Iterujte objekty ChildrenClockGroup a použijte jeho podřízené Clock objekty. Pro každou AnimationClock podřízenou hodnotu použijte ApplyAnimationClock metodu objektu, který chcete animovat, aby se použila na AnimationClock zadaná vlastnost.

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

Animace pro jednotlivé snímky: 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, zaregistrujte Rendering událost objektu, který obsahuje objekty, které chcete animovat. Tato metoda obslužné rutiny události se volá jednou za rámec. Pokaždé, když WPF zařadí trvalá vykreslovaná data ve vizuálním stromu do stromu složení, volá se 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 prezentační čas aktuálního rámce, EventArgs může být přidružena k této události přetypování jako RenderingEventArgs, která poskytuje RenderingTime vlastnost, kterou můžete použít k získání doby vykreslování aktuálního rámce.

Další informace najdete na Rendering stránce.

Viz také

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