Özellik Animasyon Tekniklerine Genel Bakış

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.

Önkoşullar

Bu konuyu anlamak için Animasyona Genel Bakış'nde açıklanan temel animasyon özelliklerini biliyor 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.

Storyboard Animasyonları

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

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

1. Bir Storyboard ve bir veya daha fazla animasyon bildirin.

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

3. (Yalnızca kod) FrameworkElement veya FrameworkContentElementiçin bir NameScope tanımlayın. Bu FrameworkElement veya FrameworkContentElementile animasyon yapmak için nesnelerin adlarını kaydedin.

4. Storyboard'ı başlatın.

bir Storyboard başlatıldığında animasyonları animasyonlu özelliklere uygular ve başlatır. Storyboardbaşlatmanın iki yolu vardır: Storyboard sınıfı tarafından sağlanan Begin yöntemini kullanabilir veya BeginStoryboard eylemi kullanabilirsiniz. XAML'de animasyon eklemenin tek yolu BeginStoryboard eylemi kullanmaktır. BeginStoryboard eylemi bir EventTrigger, özellik Triggerveya DataTriggeriçinde kullanı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.

Storyboard nesneleri hakkında daha fazla bilgi için bkz. Görsel Taslaklarına Genel Bakış.

Yerel Animasyonlar

Yerel animasyonlar, herhangi bir Animatable nesnesinin 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. Storyboard animasyondan farklı olarak, yerel animasyon, bir FrameworkElement veya FrameworkContentElementile ilişkili olmayan bir nesneyi canlandırabilir. Ayrıca bu tür animasyonlar için 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 bir animasyonu kullanarak canlandırma yapmak için aşağıdaki adımları tamamlayın.

1. bir AnimationTimeline nesnesi oluşturun.

2. Belirttiğiniz özelliğe AnimationTimeline uygulamak için animasyon eklemek istediğiniz nesnenin BeginAnimation yöntemini kullanın.

Aşağıdaki örnek, bir Buttonöğesinin genişliğini ve arka plan rengini nasıl animasyonlu hale getirebileceğinizi göstermektedir.

/*

   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ı

Storyboard kullanmadan animasyon eklemek ve karmaşık zamanlama ağaçları oluşturmak veya başladıktan sonra animasyonları etkileşimli olarak denetlemek istediğinizde Clock nesneleri kullanın. Herhangi bir Animatable nesnesinin 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 doğrudan Clock nesneleri kullanamazsınız. (Animasyon ve zamanlama sistemi aslında stillerde, denetim şablonlarında ve veri şablonlarında animasyon eklemek için Clock nesneleri kullanır, ancak bu Clock nesnelerini sizin için bir Storyboardoluşturmalıdır. Storyboard nesneleriyle Clock nesneleri arasındaki ilişki hakkında daha fazla bilgi için bkz. Animasyon ve Zamanlama Sistemine Genel Bakış.)

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

1. bir AnimationTimeline nesnesi oluşturun.

2. AnimationClockoluşturmak için, AnimationTimeline'in CreateClock yöntemini kullanın.

3. İstediğiniz özelliğe AnimationClock uygulamak için animasyon yapmak istediğiniz nesnenin ApplyAnimationClock yöntemini kullanın.

Aşağıdaki örnekte, bir AnimationClock oluşturma ve iki benzer özelliğe uygulama 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 ParallelTimeline ve AnimationTimeline nesneleri kullanın.

2. Kök ParallelTimeline'in CreateClock'ını kullanarak bir ClockGroupoluşturun.

3. ClockGroup'in Children'sunu yineleyin ve çocuk Clock nesnelerini uygulayın. Her bir AnimationClock alt öğesi için, belirttiğiniz özelliğe AnimationClock uygulamak amacıyla animasyon yapmak istediğiniz nesnenin ApplyAnimationClock yöntemini kullanın.

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

Per-Frame 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çeve animasyon yapmak için, animasyon yapmak istediğiniz nesneleri içeren nesnenin Rendering olayına kaydolun. 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 kompozisyon ağacına her aktardığında, olay işleyici yöntemi ç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 sunum zamanını elde etmek için, bu olayla ilişkili EventArgsRenderingEventArgsolarak dönüştürülebilir ve bu da geçerli çerçevenin işlenme zamanını almak için kullanabileceğiniz bir RenderingTime özelliği elde etmenizi sağlar.

Daha fazla bilgi için Rendering sayfasına bakın.

Ayrıca bkz.

• Animasyona Genel Bakış
• Görsel Taslaklarına Genel Bakış
• Animasyon ve Zamanlama Sistemine Genel Bakış
• Bağımlılık Özelliklerine Genel Bakış