Özellik Animasyon Tekniklerine Genel Bakış

  • Makale

Bu konu başlığı altında, özelliklere animasyon eklemeye yönelik farklı yaklaşımlar açıklanmaktadır: görsel taslaklar, yerel animasyonlar, saatler ve kare başına animasyonlar.

Ön koşullar

Bu konuyu anlamak için Animasyona Genel Bakış'ta açıklanan temel animasyon özellikleri hakkında bilgi sahibi olmanız gerekir.

Animasyon Eklemenin Farklı Yolları

Özelliklerin animasyonu için birçok farklı senaryo olduğundan WPF, özelliklerin animasyonu için çeşitli yaklaşımlar sağlar.

Aşağıdaki tablo, her yaklaşım için örnek başına, stillerde, denetim şablonlarında veya veri şablonlarında kullanılıp kullanılamayacağını gösterir; XAML'de kullanılıp kullanılamayacağı; ve yaklaşımın animasyonu etkileşimli olarak denetlemenize olanak verip vermediğini gösterir. "Örnek Başına", stil, denetim şablonu veya veri şablonu yerine doğrudan nesne örneklerine animasyon veya görsel taslak uygulama tekniğini ifade eder.

Animasyon tekniği Senaryolar XAML'i destekler Etkileşimli olarak denetlenebilir
Görsel taslak animasyonu Örnek başına, Style, ControlTemplate, DataTemplate Evet Evet
Yerel animasyon Örnek başına Hayır Hayır
Saat animasyonu Örnek başına No. Evet
Kare başına animasyon Örnek başına Hayır Geçersiz

Görsel Taslak Animasyonları

Storyboard XAML'de animasyonlarınızı tanımlamak ve uygulamak, animasyonlarınızı başladıktan sonra etkileşimli olarak denetlemek, karmaşık bir animasyon ağacı oluşturmak veya bir StyleControlTemplateDataTemplateveya içinde animasyon eklemek istediğinizde kullanın. Bir nesnenin bir Storyboardtarafından animasyonlu olması için veya FrameworkContentElementveya FrameworkElement olması veya veya ayarlamak FrameworkElementFrameworkContentElementiçin kullanılması gerekir. Diğer ayrıntılar için bkz . Görsel Taslaklara Genel Bakış.

A Storyboard , içerdiği animasyonlar için hedefleme bilgileri sağlayan özel bir kapsayıcı Timeline türüdür. ile Storyboardanimasyon eklemek için aşağıdaki üç adımı tamamlarsınız.

  1. ve bir Storyboard veya daha fazla animasyon bildirin.

  2. Her animasyonun TargetName hedef nesnesini ve özelliğini belirtmek için ve TargetProperty ekli özelliklerini kullanın.

  3. (Yalnızca kod) veya FrameworkContentElementiçin bir NameScopeFrameworkElement tanımlayın. Veya FrameworkContentElementile FrameworkElement animasyon eklemek için nesnelerin adlarını kaydedin.

  4. öğesini başlatın Storyboard.

Bir Storyboard başlangıç animasyonu, animasyon ekledikleri özelliklere animasyon uygular ve bunları başlatır. bir başlatmanın StoryboardBegin iki yolu vardır: sınıfı tarafından Storyboard sağlanan yöntemi kullanabilir veya bir BeginStoryboard eylem kullanabilirsiniz. XAML'de animasyon eklemenin tek yolu bir BeginStoryboard eylem kullanmaktır. Bir BeginStoryboard eylem , EventTriggerözelliği Triggerveya içinde DataTriggerkullanılabilir.

Aşağıdaki tabloda her Storyboard başlangıç tekniğinin desteklendiği farklı yerler gösterilmektedir: örnek başına, stil, denetim şablonu ve veri şablonu.

Görsel taslak kullanılarak başlatılıyor... Örnek başına Stil Denetim şablonu Veri şablonu Örnek
BeginStoryboard ve EventTrigger Evet Evet Evet Evet Görsel Taslak Kullanarak Özelliğe Animasyon Ekleme
BeginStoryboard ve bir özellik Trigger No. Evet Evet Evet Özellik Değeri Değiştiğinde bir Animasyonu Tetikleme
BeginStoryboard ve DataTrigger No. Evet Evet Evet Nasıl yapılır: Veri Değiştiğinde Animasyon Tetikleme
Begin Yöntem Evet Hayır Hayı Hayır Görsel Taslak Kullanarak Özelliğe Animasyon Ekleme

Nesneler hakkında Storyboard daha fazla bilgi için bkz . Görsel Taslaklara Genel Bakış.

Yerel Animasyonlar

Yerel animasyonlar, herhangi Animatable bir nesnenin bağımlılık özelliğine animasyon eklemek için kullanışlı bir yol sağlar. Bir özelliğe tek bir animasyon uygulamak istediğinizde yerel animasyonları kullanın ve başladıktan sonra animasyonu etkileşimli olarak denetlemeniz gerekmez. Animasyondan Storyboard farklı olarak, yerel animasyon veya FrameworkContentElementile ilişkili olmayan bir nesneye FrameworkElement animasyon ekleyebilir. Ayrıca bu tür animasyonlar için de bir NameScope tanımlamanız gerekmez.

Yerel animasyonlar yalnızca kodda kullanılabilir ve stillerde, denetim şablonlarında veya veri şablonlarında tanımlanamaz. Yerel animasyon başlatıldıktan sonra etkileşimli olarak denetlenemez.

Yerel animasyon kullanarak animasyon eklemek için aşağıdaki adımları tamamlayın.

  1. Bir AnimationTimeline nesne oluşturun.

  2. BeginAnimation animasyon eklemek istediğiniz nesnesinin yöntemini kullanarak belirttiğiniz özelliğe uygulayınAnimationTimeline.

Aşağıdaki örnekte, bir Buttonöğesinin genişliğine ve arka plan rengine animasyon ekleme gösterilmektedir.

/*

   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

Saat Animasyonları

kullanmadan animasyon Storyboard eklemek ve karmaşık zamanlama ağaçları oluşturmak veya animasyonları başladıktan sonra etkileşimli olarak denetlemek istediğinizde nesneleri kullanınClock. Herhangi Animatable bir nesnenin bağımlılık özelliğine animasyon eklemek için Saat nesnelerini kullanabilirsiniz.

Stillerde, denetim şablonlarında veya veri şablonlarında animasyon eklemek için nesneleri doğrudan kullanamazsınız Clock . (Animasyon ve zamanlama sistemi aslında stillerde, denetim şablonlarında ve veri şablonlarında animasyon eklemek için nesneleri kullanırClock, ancak bu Clock nesneleri sizin için bir Storyboarduygulamasından oluşturması gerekir. Nesneler ve nesneler arasındaki Storyboard ilişki hakkında daha fazla bilgi için bkz. Animasyon ve Zamanlama Sistemine Genel BakışClock.)

Bir özelliğe tek Clock bir uygulama için aşağıdaki adımları tamamlarsınız.

  1. Bir AnimationTimeline nesne oluşturun.

  2. CreateClock oluşturmak AnimationClockiçin yöntemini AnimationTimeline kullanın.

  3. ApplyAnimationClock animasyon eklemek istediğiniz nesnesinin yöntemini kullanarak öğesini belirttiğiniz özelliğe uygulayınAnimationClock.

Aşağıdaki örnekte, nasıl AnimationClock oluşturulacağı ve iki benzer özelliğe nasıl uygulanacağı gösterilmektedir.

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

Zamanlama ağacı oluşturmak ve özelliklere animasyon eklemek için aşağıdaki adımları tamamlarsınız.

  1. Zamanlama ağacını oluşturmak için ve AnimationTimeline nesnelerini kullanınParallelTimeline.

  2. CreateClock oluşturmak ClockGroupiçin kökünü ParallelTimeline kullanın.

  3. öğesinde ChildrenClockGroup yineleme yapın ve alt Clock nesnelerini uygulayın. Her AnimationClock alt öğe için, öğesini belirttiğiniz özelliğe uygulamak AnimationClock için animasyon eklemek istediğiniz nesnenin yöntemini kullanın ApplyAnimationClock

Saat nesneleri hakkında daha fazla bilgi için bkz . Animasyon ve Zamanlama Sistemine Genel Bakış.

Kare Başına Animasyon: Animasyon ve Zamanlama Sistemini Atlama

WPF animasyon sistemini tamamen atlamanız gerektiğinde bu yaklaşımı kullanın. Bu yaklaşım için bir senaryo, animasyondaki her adımın nesnelerin son nesne etkileşimleri kümesine göre yeniden derlenmesini gerektirdiği fizik animasyonlarıdır.

Çerçeve başına animasyonlar stiller, denetim şablonları veya veri şablonları içinde tanımlanamaz.

Çerçeve çerçeveye animasyon eklemek için Rendering , animasyon eklemek istediğiniz nesneleri içeren nesnenin olayına kaydolabilirsiniz. Bu olay işleyici yöntemi çerçeve başına bir kez çağrılır. WPF, görsel ağaçtaki kalıcı işleme verilerini oluşturma ağacına her sıralandığında, olay işleyici yönteminiz çağrılır.

Olay işleyicinizde, animasyon efektiniz için gereken hesaplamaları yapın ve bu değerlerle animasyon eklemek istediğiniz nesnelerin özelliklerini ayarlayın.

Geçerli çerçevenin sunu süresini elde etmek için, EventArgs bu olayla ilişkilendirilmiş olan, geçerli çerçevenin işleme süresini elde etmek için kullanabileceğiniz bir RenderingTime özellik sağlayan olarak RenderingEventArgsyayınlanabilir.

Daha fazla bilgi için sayfaya Rendering bakın.

Ayrıca bkz.