Özellik Animasyon Tekniklerine Genel Bakış

Bu konuda, Hareketlendirilen özellikler için farklı yaklaşımlar açıklanmaktadır: film şeritleri, yerel animasyonlar, saatler ve çerçeve başına animasyonlar.

Önkoşullar

Bu konuyu anlamak için animasyon genel bakışbölümünde açıklanan temel animasyon özelliklerine alışmanız gerekir.

Animasyon almanın farklı yolları

Animasyon özelliklerine yönelik birçok farklı senaryo olduğundan WPF, Hareketlendirilen özellikler için çeşitli yaklaşımlar sağlar.

Her yaklaşım için, aşağıdaki tablo, örnek başına, stillerde, denetim şablonlarında veya veri şablonlarında kullanılacak şekilde kullanılıp kullanılamayacağını gösterir. XAML 'de kullanılıp kullanılamayacağını belirtir; ve yaklaşımın animasyonunu etkileşimli olarak denetlemenize izin verip etmediğini belirtir. "Örnek başına" bir animasyon veya görsel taslağı, bir stil, denetim şablonu veya veri şablonu yerine doğrudan nesnenin örneklerine uygulama tekniği anlamına gelir.

Animasyon tekniği Senaryolar XAML 'yi destekler Etkileşimli denetlenebilir
Görsel taslak animasyonu Örnek başına,, StyleControlTemplate , DataTemplate Yes Yes
Yerel Animasyon Örnek başına Hayır Hayır
Saat animasyonu Örnek başına Hayır Yes
Çerçeve başına animasyon Örnek başına Hayır Yok

Görsel taslak animasyonları

StoryboardANIMASYONLARıNıZı xaml 'de tanımlayıp uygulamak, animasyonlarınızı başladıktan sonra etkileşimli olarak denetlemek, karmaşık bir animasyon ağacı oluşturmak veya veya ' de hareketlendirmek istediğinizde bir kullanın StyleControlTemplateDataTemplate . Bir nesnenin bir tarafından canlandırıla, bir StoryboardFrameworkElement veya veya FrameworkContentElement ayarlamak için kullanılması gerekir FrameworkElementFrameworkContentElement . Daha ayrıntılı bilgi için görsel taslaklara genel bakışbölümüne bakın.

, StoryboardTimeline İçerdiği animasyonlar için hedefleme bilgilerini sağlayan özel bir kapsayıcı türüdür. Bir ile hareketlendirmek için Storyboard aşağıdaki üç adımı tamamlayabilirsiniz.

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

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

  3. (Yalnızca kod) NameScope Veya için bir tanımlayın FrameworkElementFrameworkContentElement . Veya ile hareketlendirmek için nesnelerin adlarını kaydedin FrameworkElementFrameworkContentElement .

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

' A başlamak Storyboard , canlandırdıkları özelliklere animasyon uygular ve bunları başlatır. Başlamak için iki yol vardır Storyboard : Begin sınıfı tarafından sunulan yöntemi kullanabilir Storyboard veya bir BeginStoryboard eylem kullanabilirsiniz. XAML 'de hareketlendirmenin tek yolu bir BeginStoryboard eylem kullanmaktır. Bir BeginStoryboard Eylem EventTrigger , bir, özelliğinde veya olarak kullanılabilir TriggerDataTrigger .

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

Görsel taslak kullanılarak başlatıldı... Örnek başına Stil Denetim şablonu Veri şablonu Örnek
BeginStoryboard ve bir EventTrigger Yes Yes Yes Yes Görsel Taslak Kullanarak Özelliğe Animasyon Ekleme
BeginStoryboard ve bir özellik Trigger Hayır Yes Yes Yes Özellik Değeri Değiştiğinde bir Animasyonu Tetikleme
BeginStoryboard ve bir DataTrigger Hayır Yes Yes Yes Nasıl yapılır: veri değiştiğinde animasyon tetikleme
Begin yöntemi Yes Hayır Hayır Hayır Görsel Taslak Kullanarak Özelliğe Animasyon Ekleme

Nesneler hakkında daha fazla bilgi için görsel taslaklara StoryboardStoryboardbölümüne bakın.

Yerel animasyonlar

Yerel animasyonlar, herhangi bir nesnenin bağımlılık özelliğini hareketlendirmek için kullanışlı bir yol sağlar Animatable . Bir özelliğe tek bir animasyon uygulamak istediğiniz zaman yerel animasyonları kullanın ve başladıktan sonra animasyonu etkileşimli olarak denetlemenize gerek yoktur. Bir Storyboard animasyonun aksine, yerel animasyon bir veya ile ilişkili olmayan bir nesneye animasyon verebilir FrameworkElementFrameworkContentElement . NameScopeBu tür bir animasyon için de 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 animasyon kullanarak animasyon uygulamak için aşağıdaki adımları izleyin.

  1. Bir AnimationTimeline nesne oluşturun.

  2. ' İ BeginAnimation belirttiğiniz özelliğe uygulamak için hareketlendirmek istediğiniz nesnenin yöntemini kullanın AnimationTimeline .

Aşağıdaki örnek, öğesinin genişlik ve arka plan rengine nasıl animasyon ekleneceğini gösterir 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

Saat animasyonları

ClockBir kullanarak animasyon eklemek istediğiniz Storyboard ve karmaşık zamanlama ağaçları oluşturmak veya başladıktan sonra animasyonları etkileşimli olarak denetlemek istediğinizde nesneleri kullanın. Herhangi bir nesnenin bağımlılık özelliğini hareketlendirmek için saat nesnelerini kullanabilirsiniz Animatable .

ClockStilleri, denetim şablonlarını veya veri şablonlarını hareketlendirmek için doğrudan nesneleri kullanamazsınız. (Animasyon ve zamanlama sistemi aslında Clock stillerde, denetim şablonlarında ve veri şablonlarında animasyon uygulamak için nesneleri kullanır, ancak bu Clock nesneleri bir ' dan sizin için oluşturması gerekir Storyboard . Nesneler ve nesneler arasındaki ilişki hakkında daha fazla bilgi için StoryboardClock bkz. Storyboard.)

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

  1. Bir AnimationTimeline nesne oluşturun.

  2. CreateClockAnimationTimeline Oluşturmak için yöntemini kullanın AnimationClock .

  3. ' İ ApplyAnimationClock belirttiğiniz özelliğe uygulamak için hareketlendirmek istediğiniz nesnenin yöntemini kullanın AnimationClock .

Aşağıdaki örnek, nasıl oluşturulacağını AnimationClock ve bunun benzer iki özelliğe nasıl uygulanacağını gösterir.

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

Bir zamanlama ağacı oluşturmak ve bu uygulamayı özelliklerine animasyon uygulamak için aşağıdaki adımları tamamlayabilirsiniz.

  1. ParallelTimelineAnimationTimeline Zamanlama ağacını oluşturmak için ve nesneleri kullanın.

  2. CreateClockOluşturmak için kökün ' i kullanın ParallelTimelineClockGroup .

  3. Üzerinde yineleme yapın ChildrenClockGroup ve alt Clock nesnelerini uygulayın. Her AnimationClock alt öğe için, ApplyAnimationClock belirttiğiniz özelliğe uygulamak üzere hareketlendirmek istediğiniz nesnenin yöntemini kullanın AnimationClock

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 atlamak istediğinizde bu yaklaşımı kullanın. Bu yaklaşım için bir senaryo, animasyonda her adımın nesnelerin son nesne etkileşimleri kümesine göre yeniden hesaplanması gereken fizik animasyonlarıdır.

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

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

Olay işleyicinizde animasyon efektiniz için gerekli olan hesaplamaları gerçekleştirin ve bu değerlerle hareketlendirmek istediğiniz nesnelerin özelliklerini ayarlayın.

Geçerli çerçeveye ait sunum süresini almak için, EventArgs Bu olayla ilişkili olarak, RenderingEventArgsRenderingTime Geçerli çerçevenin işleme süresini elde etmek için kullanabileceğiniz bir özellik sağlayan olarak atama yapılabilir.

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

Ayrıca bkz.