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.
| Technika animace | Scénáře | Podporuje XAML. | Interaktivní ovládání |
|---|---|---|---|
| Animace scénáře | Na instanci, Style, ControlTemplateDataTemplate | Ano | Yes |
| Místní animace | Pro každou instanci | No | Ne |
| Animace hodin | Pro každou instanci | No | Ano |
| Animace pro jednotlivé snímky | Pro každou instanci | No | – |
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.
Deklarujte Storyboard a jednu nebo více animací.
TargetName Pomocí vlastností a TargetProperty připojených vlastností určete cílový objekt a vlastnost jednotlivých animací.
(Pouze kód) Definujte pro NameScope určitou FrameworkElement nebo FrameworkContentElement. Zaregistrujte názvy objektů, které chcete animovat, FrameworkElement nebo FrameworkContentElement.
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.
| 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 | Yes | Animace vlastnosti pomocí scénáře |
| BeginStoryboard a vlastnost Trigger | No | Ano | Ano | Yes | Spuštění animace při změně hodnoty vlastnosti |
| BeginStoryboard a a DataTrigger | No | Ano | Ano | Yes | Postupy: Aktivace animace při změně dat |
| Begin Metoda | Ano | Ne | No | Ne | Animace vlastnosti pomocí scénáře |
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.
Vytvořte AnimationTimeline objekt.
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.
Vytvořte AnimationTimeline objekt.
CreateClock Použijte metodu AnimationTimeline vytvoření AnimationClock.
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.
K vytvoření stromu časování použijte ParallelTimeline objekty AnimationTimeline a objekty.
CreateClock Pomocí kořenového adresáře ParallelTimeline vytvořte ClockGroup.
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é
.NET Desktop feedback
Váš názor
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu: https://aka.ms/ContentUserFeedback.
Odeslat a zobrazit názory pro