Aracılığıyla paylaş

Animasyona Genel bakış

  • Makale

Windows Presentation Foundation (WPF), çekici kullanıcı arabirimleri ve cazip belgeler oluşturmanıza olanak tanıyan güçlü bir grafik ve düzen özellikleri kümesi sağlar. Animasyon, çekici bir kullanıcı arabirimini daha da muhteşem ve kullanılabilir hale getirebilir. Yalnızca bir arka plan rengi animasyonu oluşturarak veya animasyonlu Transformbir uygulayarak, çarpıcı ekran geçişleri oluşturabilir veya yararlı görsel ipuçları sağlayabilirsiniz.

Bu genel bakış, WPF animasyon ve zamanlama sistemine giriş sağlar. Görsel taslakları kullanarak WPF nesnelerinin animasyonlarına odaklanır.

Animasyonlara Giriş

Animasyon, her biri bir öncekinden biraz farklı olan bir dizi görüntü arasında hızlı bir şekilde döngü yaparak oluşturulan bir yanılsamadır. Beyin, görüntü grubunu tek bir değişen sahne olarak algılar. Filmlerde bu illüzyon, her saniye birçok fotoğraf veya kare kaydeden kameralar kullanılarak oluşturulur. Çerçeveler bir projektör tarafından oynatıldığında izleyiciler hareketli bir resim görür.

Bilgisayardaki animasyon benzerdir. Örneğin, bir dikdörtgenin çiziminin görünümden kaybolmasını sağlayan bir program aşağıdaki gibi çalışabilir.

  • Program bir zamanlayıcı oluşturur.

  • Program, sürenin ne kadar olduğunu görmek için zamanlayıcıyı ayarlanan aralıklarla denetler.

  • Program zamanlayıcıyı her denetleyişinde, geçen süreye göre dikdörtgen için geçerli opaklık değerini hesaplar.

  • Ardından program dikdörtgeni yeni değerle güncelleştirir ve yeniden çizer.

WPF'nin öncesinde Microsoft Windows geliştiricilerinin kendi zamanlama sistemlerini oluşturup yönetmesi veya özel özel kitaplıklar kullanması gerekiyordu. WPF, yönetilen kod ve XAML aracılığıyla kullanıma sunulan ve WPF çerçevesiyle derinlemesine tümleştirilmiş verimli bir zamanlama sistemi içerir. WPF animasyonu, denetimlere ve diğer grafik nesnelere animasyon ekleme işlemini kolaylaştırır.

WPF, bir zamanlama sistemini yönetme ve ekranı verimli bir şekilde yeniden çizme ile ilgili tüm perde arkası çalışmalarını işler. Bu efektlere ulaşmanın mekaniği yerine, oluşturmak istediğiniz efektlere odaklanmanızı sağlayan zamanlama sınıfları sağlar. WPF ayrıca, özelleştirilmiş animasyonlar oluşturmak için sınıflarınızın devralabileceği animasyon temel sınıflarını ortaya çıkararak kendi animasyonlarınızı oluşturmayı kolaylaştırır. Bu özel animasyonlar, standart animasyon sınıflarının birçok performans avantajını kazanır.

WPF Özellik Animasyon Sistemi

Zamanlama sistemiyle ilgili birkaç önemli kavramı anlarsanız WPF animasyonlarının kullanımı daha kolay olabilir. En önemlisi, WPF'de nesneleri tek tek özelliklerine animasyon uygulayarak animasyon eklemenizdir. Örneğin, bir çerçeve öğesini büyütmek için ve Height özelliklerine Width animasyon eklersiniz. Bir nesnenin görünümden kaybolmasını sağlamak için, nesnenin özelliğine Opacity animasyon eklersiniz.

Bir özelliğin animasyon özelliklerine sahip olması için aşağıdaki üç gereksinimi karşılaması gerekir:

WPF, özellikleri olan IAnimatable birçok nesne içerir. ve TabControlve gibi Button denetimler ile Panel Shape nesneleri öğesinden DependencyObjectdevralır. Özelliklerinin çoğu bağımlılık özellikleridir.

Stiller ve denetim şablonları içeren animasyonları neredeyse her yerde kullanabilirsiniz. Animasyonların görsel olması gerekmez; Bu bölümde açıklanan ölçütleri karşılıyorsa, kullanıcı arabiriminin parçası olmayan nesnelere animasyon uygulayabilirsiniz.

Örnek: Öğenin Belirmesini ve Görünümünün Dışına Çıkmasını Sağlama

Bu örnekte, bağımlılık özelliğinin değerine animasyon eklemek için WPF animasyonunun nasıl kullanılacağı gösterilmektedir. bir özelliğinin özelliğine animasyon eklemek Opacity için değer oluşturan Double bir animasyon türü olan bir RectanglekullanırDoubleAnimation. Sonuç olarak, Rectangle görünümde kaybolur ve kaybolur.

Örneğin ilk bölümü bir Rectangle öğe oluşturur. İzleyen adımlarda animasyon oluşturma ve dikdörtgenin özelliğine uygulama gösterilmektedir Opacity .

Aşağıda, XAML'de StackPanel bir Rectangle öğenin nasıl oluşturulacağı gösterilmektedir.

<StackPanel Margin="10">
    <Rectangle
        Name="MyRectangle"
        Width="100" 
        Height="100"
        Fill="Blue">
    </Rectangle>
</StackPanel>

Kodda StackPanel bir Rectangle öğenin nasıl oluşturulacağı aşağıda gösterilmiştir.

var myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);

var myRectangle = new Rectangle();
myRectangle.Name = "myRectangle";
this.RegisterName(myRectangle.Name, myRectangle);
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = Brushes.Blue;
myPanel.Children.Add(myRectangle);
this.Content = myPanel;

Dim myPanel As New StackPanel()
myPanel.Margin = New Thickness(10)

Dim myRectangle As New Rectangle()
myRectangle.Name = "myRectangle"
Me.RegisterName(myRectangle.Name, myRectangle)
myRectangle.Width = 100
myRectangle.Height = 100
myRectangle.Fill = Brushes.Blue

myPanel.Children.Add(myRectangle)
Me.Content = myPanel

Bölüm 1: DoubleAnimation Oluşturma

Bir öğenin görünümünün solup sönmesini sağlamanın bir yolu, özelliğine Opacity animasyon eklemektir. Opacity özelliği türünde Doubleolduğundan, çift değer üreten bir animasyona ihtiyacınız vardır. A DoubleAnimation , böyle bir animasyondur. A DoubleAnimation , iki çift değer arasında bir geçiş oluşturur. Başlangıç değerini belirtmek için özelliğini ayarlarsınız From . Bitiş değerini belirtmek için özelliğini ayarlarsınız To .

  1. opaklık değeri 1.0 nesneyi tamamen opak hale getirir ve opaklık değeri 0.0 onu tamamen görünmez hale getirir. Animasyondan size geçiş 1.0 yapmak için 0.0 özelliğini 1.0 olarak ve To özelliğini olarak 0.0ayarlayınFrom. Aşağıda, XAML'de nasıl oluşturulacağı DoubleAnimation gösterilmektedir.

    <DoubleAnimation From="1.0" To="0.0" />

    Kodda nasıl oluşturulacağı DoubleAnimation aşağıda gösterilmiştir.

    var myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;

    Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0

  2. Ardından, bir Durationbelirtmelisiniz. Duration Animasyonun değeri, başlangıç değerinden hedef değerine geçmenin ne kadar sürdüğünü belirtir. Aşağıda, XAML'de beş saniyenin nasıl ayarlanacağı Duration gösterilmektedir.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />

    Kodda beş saniye olarak nasıl ayarlanacağı Duration aşağıda gösterilmiştir.

    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

    myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

  3. Önceki kod, öğesinden 1.0 0.0öğesine geçiş yapan ve hedef öğenin tamamen opak olandan tamamen görünmez hale geçmesine neden olan bir animasyon göstermiş. Öğe kaybolduktan sonra yeniden görünüme döndürülmesini sağlamak için, animasyonun AutoReverse özelliğini olarak trueayarlayın. Animasyonu süresiz olarak yinelemek için özelliğini olarak ForeverayarlayınRepeatBehavior. Aşağıda, XAML'de ve RepeatBehavior özelliklerinin nasıl ayarlanacağı AutoReverse gösterilmektedir.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>

    Aşağıda kodda AutoReverse ve RepeatBehavior özelliklerinin nasıl ayarlanacağı gösterilmektedir.

    myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

    myDoubleAnimation.AutoReverse = True
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

Bölüm 2: Görsel Taslak Oluşturma

Bir nesneye animasyon uygulamak için, animasyon oluşturulacak nesne ve özelliği belirtmek için ve TargetProperty ekli özelliklerini kullanırsınız.Storyboard TargetName

  1. Storyboard öğesini oluşturun ve animasyonu alt öğesi olarak ekleyin. Aşağıda, XAML'de öğesinin Storyboard nasıl oluşturulacağı gösterilmektedir.

    <Storyboard>
    <DoubleAnimation
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    in kodunu oluşturmak Storyboard için sınıf düzeyinde bir Storyboard değişken bildirin.

    public partial class MainWindow : Window
{
    private Storyboard myStoryboard;

    Class MainWindow

    Private myStoryboard As Storyboard

    Ardından öğesini başlatın Storyboard ve animasyonu alt öğesi olarak ekleyin.

    myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

    myStoryboard = New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

  2. öğesinin Storyboard animasyonu nereye uygulayacağını bilmesi gerekir. Animasyon eklenecek Storyboard.TargetName nesneyi belirtmek için iliştirilmiş özelliğini kullanın. Aşağıda XAML'de hedef adının nasıl ayarlanacağı gösterilmektedir DoubleAnimation MyRectangle .

    <Storyboard>
    <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    Kodda hedef adının DoubleAnimation MyRectangle nasıl ayarlanacağı aşağıda gösterilmiştir.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

  3. Animasyon eklenecek TargetProperty özelliği belirtmek için iliştirilmiş özelliğini kullanın. Aşağıda animasyonun XAML'de özelliğini hedeflemek Opacity için nasıl yapılandırıldığı gösterilmektedir Rectangle .

    <Storyboard>
    <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    Aşağıda, animasyonun kodun Opacity özelliğini hedeflemek için nasıl yapılandırıldığı gösterilmektedir Rectangle .

    Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

    Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

Söz dizimi hakkında TargetProperty daha fazla bilgi ve ek örnekler için bkz . Görsel Taslaklara Genel Bakış.

Bölüm 3 (XAML): Görsel Taslak'ı tetikleyiciyle ilişkilendirme

XAML'de uygulama ve başlatmanın Storyboard en kolay yolu bir olay tetikleyicisi kullanmaktır. Bu bölümde, XAML'de Storyboard tetikleyici ile nasıl ilişkilendirilecek gösterilmektedir.

  1. Bir BeginStoryboard nesne oluşturun ve görsel taslakla ilişkilendirin. ABeginStoryboard, uygulanan ve başlatan bir StoryboardtürüdürTriggerAction.

    <BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="MyRectangle" 
      Storyboard.TargetProperty="Opacity"
      From="1.0" To="0.0" Duration="0:0:5" 
      AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</BeginStoryboard>

  2. EventTrigger oluşturun ve öğesini koleksiyonuna Actions ekleyinBeginStoryboard. öğesinin RoutedEvent EventTrigger özelliğini, başlatmak Storyboardistediğiniz yönlendirilmiş olaya ayarlayın. (Yönlendirilen olaylar hakkında daha fazla bilgi için bkz. Yönlendirilen Olaylara Genel Bakış.)

    <!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
  <BeginStoryboard>
    <Storyboard>
      <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
  </BeginStoryboard>
</EventTrigger>

  3. dikdörtgen EventTrigger koleksiyonuna Triggers öğesini ekleyin.

    <Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>
    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Bölüm 3 (Kod): Görsel Taslak'ı bir Olay İşleyicisi ile ilişkilendirme

Kodda uygulama Storyboard ve başlatmanın en kolay yolu bir olay işleyicisi kullanmaktır. Bu bölümde, koddaki Storyboard bir olay işleyicisi ile nasıl ilişkilendirilecek gösterilmektedir.

  1. Dikdörtgenin Loaded olayına kaydolun.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

  2. Olay işleyicisini bildirin. Olay işleyicisinde, görsel taslak uygulamak için yöntemini kullanın Begin .

    private void myRectangleLoaded(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin(this);
}

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Begin(Me)
End Sub

Tam Örnek

Aşağıda, XAML'de beliren ve görünümden çıkan bir dikdörtgenin nasıl oluşturulacağı gösterilmektedir.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Margin="10">
            <Rectangle
                Name="MyRectangle"
                Width="100" 
                Height="100"
                Fill="Blue">
                <Rectangle.Triggers>
                    <!-- Animates the rectangle's opacity. -->
                    <EventTrigger RoutedEvent="Rectangle.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="MyRectangle" 
                                    Storyboard.TargetProperty="Opacity"
                                    From="1.0" To="0.0" Duration="0:0:5" 
                                    AutoReverse="True" RepeatBehavior="Forever" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Rectangle.Triggers>
            </Rectangle>
        </StackPanel>
    </Grid>
</Window>

Aşağıda kodda beliren ve görünümden çıkan bir dikdörtgenin nasıl oluşturulacağı gösterilmektedir.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;

        public MainWindow()
        {
            InitializeComponent();

            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 1.0;
            myDoubleAnimation.To = 0.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            // Use the Loaded event to start the Storyboard.
            myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
            myPanel.Children.Add(myRectangle);
            this.Content = myPanel;
        }

        private void myRectangleLoaded(object sender, RoutedEventArgs e)
        {
            myStoryboard.Begin(this);
        }
    }
}

Imports System.Windows.Media.Animation

Class MainWindow

    Private myStoryboard As Storyboard

    Public Sub New()
        InitializeComponent()

        Dim myPanel As New StackPanel()
        myPanel.Margin = New Thickness(10)

        Dim myRectangle As New Rectangle()
        myRectangle.Name = "myRectangle"
        Me.RegisterName(myRectangle.Name, myRectangle)
        myRectangle.Width = 100
        myRectangle.Height = 100
        myRectangle.Fill = Brushes.Blue

        Dim myDoubleAnimation As New DoubleAnimation()
        myDoubleAnimation.From = 1.0
        myDoubleAnimation.To = 0.0
        myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
        myDoubleAnimation.AutoReverse = True
        myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

        myStoryboard = New Storyboard()
        myStoryboard.Children.Add(myDoubleAnimation)
        Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
        Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

        ' Use the Loaded event to start the Storyboard.
        AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

        myPanel.Children.Add(myRectangle)
        Me.Content = myPanel
    End Sub

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myStoryboard.Begin(Me)
    End Sub

End Class

Animasyon Türleri

Animasyonlar özellik değerleri oluşturduğundan, farklı özellik türleri için farklı animasyon türleri vardır. öğesinin özelliği gibi bir Doublealan özelliğine Width animasyon eklemek için, değer üreten Double bir animasyon kullanın. alan bir özelliğe Pointanimasyon eklemek için değer üreten Point bir animasyon kullanın. Farklı özellik türlerinin sayısı nedeniyle, ad alanında System.Windows.Media.Animation birkaç animasyon sınıfı vardır. Neyse ki, aralarında ayrım oluşturmayı kolaylaştıran katı bir adlandırma kuralına uyarlar:

  • <Tür>Animasyonu

    "Başlangıç/Bitiş/Başlangıç" veya "temel" animasyon olarak bilinen bu animasyonlar, başlangıç ve hedef değer arasında veya başlangıç değerine bir uzaklık değeri ekleyerek animasyon oluşturur.

    • Başlangıç değeri belirtmek için animasyonun From özelliğini ayarlayın.

    • Bir bitiş değeri belirtmek için animasyonun To özelliğini ayarlayın.

    • Bir uzaklık değeri belirtmek için animasyonun By özelliğini ayarlayın.

    Bu genel bakıştaki örneklerde bu animasyonlar kullanılabilecek en basit animasyonlardır. Başlangıç/Son animasyonları, Başlangıç/Son Animasyonlara Genel Bakış bölümünde ayrıntılı olarak açıklanmıştır.

  • <AnimationUsingKeyFrames Türü>

    Anahtar çerçeve animasyonları, herhangi bir sayıda hedef değer belirtebildiğiniz ve hatta ilişkilendirme yöntemlerini denetleyebileceğiniz için, Başlangıç/Hedef/Göre animasyonlarından daha güçlü olur. Bazı türler yalnızca anahtar çerçeve animasyonlarıyla animasyonlu olabilir. Anahtar çerçeve animasyonları, Anahtar Çerçevesi Animasyonlarına Genel Bakış bölümünde ayrıntılı olarak açıklanmıştır.

  • <AnimationUsingPath Türü>

    Yol animasyonları, animasyonlu değerler üretmek için geometrik yol kullanmanıza olanak tanır.

  • <AnimationBase Türü>

    Bunu uyguladığınızda tür <> değerine animasyon uygulayan soyut sınıf. Bu sınıf, Tür Animasyonu ve< Tür>>AnimasyonuUsingKeyFrames sınıfları için <temel sınıf görevi görür. Yalnızca kendi özel animasyonlarınızı oluşturmak istiyorsanız bu sınıflarla doğrudan ilgilenmeniz gerekir. Aksi takdirde, Tür <>Animasyonu veya Anahtar Çerçeve<Türü>Animasyonu kullanın.

Çoğu durumda ve ColorAnimationgibi DoubleAnimation Tür>Animasyonu sınıflarını kullanmak <istersiniz.

Aşağıdaki tabloda çeşitli yaygın animasyon türleri ve bunların kullanıldığı bazı özellikler gösterilmektedir.

Özellik türü Karşılık gelen temel (Başlangıç/Başlangıç) animasyonu İlgili anahtar çerçeve animasyonu İlgili Yol Animasyonu Kullanım örneği
Color ColorAnimation ColorAnimationUsingKeyFrames Hiçbiri veya GradientStopöğesine Color SolidColorBrush animasyon ekleme.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath veya öğesine DockPanel Height animasyon Width eklemeButton.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath bir öğesinin konumuna Center animasyon ekleme EllipseGeometry.
String Hiçbiri StringAnimationUsingKeyFrames Hiçbiri veya öğesine TextBlock Content animasyon Text eklemeButton.

Animasyonlar Zaman Çizelgeleridir

Tüm animasyon türleri sınıftan devralır Timeline ; bu nedenle, tüm animasyonlar özel zaman çizelgesi türleridir. A Timeline , bir zaman dilimini tanımlar. Zaman çizelgesinin zamanlama davranışlarını belirtebilirsiniz: zaman Durationçizelgesinin kaç kez yineleneceğini ve hatta zaman çizelgesinin ne kadar hızlı ilerleyeceğini belirtebilirsiniz.

Animasyon bir Timelineolduğundan, bir zaman dilimini de temsil eder. Animasyon, belirtilen zaman diliminde (veya Duration) ilerledikçe çıkış değerlerini de hesaplar. Animasyon ilerledikçe veya "oynatılırken", ilişkili olduğu özelliği güncelleştirir.

Sık kullanılan üç zamanlama özelliği şunlardır: Duration, AutoReverseve RepeatBehavior.

Duration Özelliği

Daha önce belirtildiği gibi, zaman çizelgesi bir zaman dilimini temsil eder. Bu kesimin uzunluğu genellikle bir TimeSpan değer kullanılarak belirtilen zaman çizelgesi tarafından belirlenirDuration. Zaman çizelgesi süresinin sonuna ulaştığında bir yinelemeyi tamamlar.

Animasyon, geçerli değerini belirlemek için özelliğini kullanır Duration . Animasyon için bir Duration değer belirtmezseniz, varsayılan değer olan 1 saniye kullanılır.

Aşağıdaki söz diziminde, özelliği için Genişletilebilir Uygulama Biçimlendirme Dili (XAML) özniteliği söz diziminin Duration basitleştirilmiş bir sürümü gösterilmektedir.

saat : dakika : saniye

Aşağıdaki tabloda çeşitli Duration ayarlar ve sonuçta elde edilen değerler gösterilmektedir.

Ayar Sonuçta elde edilen değer
0:0:5.5 5,5 saniye.
0:30:5.5 30 dakika 5,5 saniye.
1:30:5.5 1 saat, 30 dakika ve 5,5 saniye.

Kodda belirtmenin bir Duration yolu, oluşturmak için TimeSpanyöntemini kullanmak FromSeconds ve ardından bunu kullanarak yeni Duration bir yapı bildirmektirTimeSpan.

Değerler ve Genişletilebilir Uygulama Biçimlendirme Dili (XAML) söz diziminin tamamı hakkında Duration daha fazla bilgi için yapıya Duration bakın.

Otomatik Ters

AutoReverse özelliği, bir zaman çizelgesinin sonuna Durationulaştıktan sonra geriye doğru oynatılıp oynatılmayacağını belirtir. Bu animasyon özelliğini olarak trueayarlarsanız, animasyon, bitiş değerinden Durationbaşlangıç değerine kadar oynatıldıktan sonra geri döner. Varsayılan olarak, bu özellik şeklindedir false.

RepeatBehavior

özelliği, RepeatBehavior bir zaman çizelgesinin kaç kez yürütülür olduğunu belirtir. Varsayılan olarak, zaman çizelgelerinin yineleme sayısı 1.0vardır; bu da bir kez oynatıldığı ve hiç yineleme yapılmadığı anlamına gelir.

Bu özellikler ve diğerleri hakkında daha fazla bilgi için bkz. Zamanlama Davranışlarına Genel Bakış.

Özelliğe Animasyon Uygulama

Önceki bölümlerde farklı animasyon türleri ve bunların zamanlama özellikleri açıklanmaktadır. Bu bölümde animasyon eklemek istediğiniz özelliğe animasyonu nasıl uygulayacağınız gösterilir. Storyboard nesneler, özelliklere animasyon uygulamak için tek bir yol sağlar. A Storyboard , içerdiği animasyonlar için hedefleme bilgileri sağlayan bir kapsayıcı zaman çizelgesidir .

Nesneleri ve Özellikleri Hedefleme

Storyboard sınıfı ve TargetProperty ekli özelliklerini sağlarTargetName. Bir animasyonda bu özellikleri ayarlayarak animasyona ne animasyonu gerektiğini söylersiniz. Ancak, bir animasyon bir nesneyi hedeflemeden önce nesneye genellikle bir ad verilmelidir.

'a FrameworkElement ad atamak, bir nesneye ad atamaktan Freezable farklıdır. Denetimlerin ve panellerin çoğu çerçeve öğeleridir; ancak fırçalar, dönüşümler ve geometriler gibi yalnızca grafiksel nesnelerin çoğu dondurulabilir nesnelerdir. Bir türün FrameworkElement veya Freezablebir olup olmadığından emin değilseniz, başvuru belgelerinin Devralma Hiyerarşisi bölümüne bakın.

  • Animasyon hedefi oluşturmak FrameworkElement için, özelliğini ayarlayarak Name ona bir ad verirsiniz. Kodda, öğe adını ait olduğu sayfaya kaydetmek için yöntemini de kullanmanız RegisterName gerekir.

  • Bir Freezable nesneyi XAML'de animasyon hedefi yapmak için, x:Name Yönergesi'ni kullanarak ona bir ad atarsınız. Kodda, yalnızca nesnesini ait olduğu sayfaya kaydetmek için yöntemini kullanırsınız RegisterName .

Aşağıdaki bölümlerde XAML ve kod içindeki bir öğeyi adlandırma örneği sağlanır. Adlandırma ve hedefleme hakkında daha ayrıntılı bilgi için bkz . Görsel Taslaklara Genel Bakış.

Görsel Taslakları Uygulama ve Başlatma

XAML'de görsel taslak başlatmak için bunu ile EventTriggerilişkilendirirsiniz. , EventTrigger belirtilen bir olay gerçekleştiğinde hangi eylemlerin gerçekleştirildiğini açıklayan bir nesnedir. Bu eylemlerden biri, görsel taslaklarınızı başlatmak için kullandığınız bir BeginStoryboard eylem olabilir. Olay tetikleyicileri kavram olarak olay işleyicilerine benzer çünkü uygulamanızın belirli bir olaya nasıl yanıt vereceğini belirtmenize olanak tanır. Olay işleyicilerinden farklı olarak, olay tetikleyicileri XAML'de tam olarak açıklanabilir; başka kod gerekmez.

Kodda başlatmak Storyboard için veya EventTrigger sınıfının yöntemini Storyboard kullanabilirsinizBegin.

Görsel Taslak Denetimi

Önceki örnekte, bir olay gerçekleştiğinde nasıl başlatılacağları Storyboard gösterildi. Ayrıca bir Storyboard öğesini başlatıldıktan sonra etkileşimli olarak denetleyebilirsiniz: öğesini duraklatabilir, sürdürebilir, durdurabilir, doldurma dönemine ilerletebilir, arayabilir ve kaldırabilirsiniz Storyboard. Daha fazla bilgi ve bir öğesini etkileşimli olarak denetlemeyi Storyboardgösteren bir örnek için bkz . Görsel Taslaklara Genel Bakış.

Animasyon Sona Erdikten Sonra Ne Olur?

özelliği, FillBehavior bir zaman çizelgesinin sona erdiğinde nasıl davranacağını belirtir. Varsayılan olarak, zaman çizelgesi sona erdiğinde başlar Filling . Son çıkış değerini tutan Filling animasyon.

DoubleAnimation Önceki örnekteki özelliği olarak ayarlandığından ForeverbitmiyorRepeatBehavior. Aşağıdaki örnek, benzer bir animasyon kullanarak dikdörtgene animasyon ekler. Önceki örnekten farklı olarak, bu animasyonun RepeatBehavior ve AutoReverse özellikleri varsayılan değerlerinde bırakılır. Bu nedenle, animasyon 1'den 0'a beş saniye içinde ilerler ve sonra durur.

<Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>

    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0" Duration="0:0:5" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

FillBehavior Varsayılan değeri olan değerinden değiştirilmediğinden, HoldEndanimasyon sona erdiğinde son değeri olan 0 değerini tutar. Bu nedenle, Opacity animasyon sona erdikten sonra dikdörtgenin değeri 0'da kalır. Dikdörtgenin değerini Opacity başka bir değere ayarlarsanız, animasyon özelliği etkilemeye devam ettiğinden kodunuzun Opacity hiçbir etkisi yok gibi görünür.

Koddaki animasyonlu özelliğin denetimini yeniden kazanmanın bir yolu yöntemini kullanmak BeginAnimation ve parametresi için AnimationTimeline null değerini belirtmektir. Daha fazla bilgi ve örnek için bkz . Görsel Taslakla Animasyonu Yaptıktan Sonra Özellik Ayarlama.

Veya Filling animasyonu olan Active bir özellik değerini ayarlamanın hiçbir etkisi yok gibi görünse de özellik değerinin değişmediğini unutmayın. Daha fazla bilgi için bkz . Animasyon ve Zamanlama Sistemine Genel Bakış.

Veri Bağlama ve Animasyonları Animasyonlara Animasyon Ekleme

Çoğu animasyon özelliği veriye bağlı veya animasyonlu olabilir; örneğin, bir DoubleAnimationözelliğinin özelliğine Duration animasyon uygulayabilirsiniz. Ancak, zamanlama sisteminin çalışma şekli nedeniyle, veri bağlı veya animasyonlu animasyonlar diğer veri bağlı veya animasyonlu nesneler gibi davranmaz. Davranışlarını anlamak için, bir özelliğe animasyon uygulamanın ne anlama geldiğini anlamanıza yardımcı olur.

Önceki bölümde bir dikdörtgenin animasyonunu Opacity gösteren örne bakın. Önceki örnekteki dikdörtgen yüklendiğinde, olay tetikleyicisi uygular Storyboard. Zamanlama sistemi ve animasyonunun Storyboard bir kopyasını oluşturur. Bu kopyalar dondurulur (salt okunur yapılır) ve Clock nesnelerden oluşturulur. Bu saatler, hedeflenen özelliklerin animasyonunu oluşturma işleminin gerçek çalışmasını yapar.

Zamanlama sistemi için DoubleAnimation bir saat oluşturur ve ve tarafından TargetName TargetProperty belirtilen nesnesine ve özelliğine DoubleAnimationuygular. Bu durumda, zamanlama sistemi saati Opacity "MyRectangle" adlı nesnenin özelliğine uygular.

için Storyboardbir saat de oluşturulsa da, saat hiçbir özelliğe uygulanmaz. Amacı, alt saatini, için oluşturulan saati denetlemektir DoubleAnimation.

Animasyonların veri bağlama veya animasyon değişikliklerini yansıtması için saati yeniden oluşturulmalıdır. Saatler sizin için otomatik olarak yeniden oluşturulmuyor. Animasyonların değişiklikleri yansıtmasını sağlamak için veya Begin yöntemini kullanarak BeginStoryboard görsel taslaklarını yeniden uygulayın. Bu yöntemlerden birini kullandığınızda animasyon yeniden başlatılır. Kodda, görsel şeridi önceki konumuna geri kaydırmak için yöntemini kullanabilirsiniz Seek .

Veri bağlama animasyonu örneği için bkz . Anahtar Spline Animasyon Örneği. Animasyon ve zamanlama sisteminin nasıl çalıştığı hakkında daha fazla bilgi için bkz . Animasyon ve Zamanlama Sistemine Genel Bakış.

Animasyon Eklemenin Diğer Yolları

Bu genel bakıştaki örneklerde görsel taslakları kullanarak animasyon ekleme işlemi gösterilmektedir. Kodu kullandığınızda, birkaç farklı yolla animasyon ekleyebilirsiniz. Daha fazla bilgi için bkz . Özellik Animasyon Tekniklerine Genel Bakış.

Animasyon Örnekleri

Aşağıdaki örnekler uygulamalarınıza animasyon eklemeye başlamanıza yardımcı olabilir.

Ünvan Açıklama
Animasyon ve Zamanlama Sistemine Genel Bakış Zamanlama sisteminin animasyon oluşturmanızı sağlayan ve Clock sınıflarını nasıl kullandığını Timeline açıklar.
Animasyon İpuçları ve Püf Noktaları Performans gibi animasyonlarla ilgili sorunları çözmeye yönelik yararlı ipuçlarını listeler.
Özel Animasyonlara Genel Bakış Animasyon sisteminin anahtar kareler, animasyon sınıfları veya çerçeve başına geri çağırmalarla nasıl genişletilip genişletilip genişletilemeyi açıklar.
Gelen/İçin/Göre Animasyonlarına Genel Bakış İki değer arasında geçiş yapılan bir animasyon oluşturmayı açıklar.
Anahtar-Çerçeve Animasyonlara Genel Bakış İlişkilendirme yöntemini denetleme özelliği de dahil olmak üzere birden çok hedef değer içeren bir animasyon oluşturmayı açıklar.
Hızlandırma İşlevleri Zıplama gibi gerçekçi davranışlar elde etmek için animasyonlarınıza matematiksel formüllerin nasıl uygulanacağını açıklar.
Yol Animasyonlarına Genel Bakış Bir nesneyi karmaşık bir yol boyunca taşımayı veya döndürmeyi açıklar.
Özellik Animasyon Tekniklerine Genel Bakış Görsel taslakları, yerel animasyonları, saatleri ve kare başına animasyonları kullanarak özellik animasyonlarını açıklar.
Görsel Taslaklara Genel Bakış Karmaşık animasyonlar oluşturmak için birden çok zaman çizelgesine sahip görsel taslakların nasıl kullanılacağını açıklar.
Zamanlama Davranışlarına Genel Bakış Animasyonlarda Timeline kullanılan türleri ve özellikleri açıklar.
Zamanlama Olaylarına Genel Bakış zaman çizelgesindeki noktalarda kod yürütmek için ve nesnelerinde kullanılabilir Timeline Clock olan başlangıç, duraklatma, sürdürme, atlama veya durdurma gibi olayları açıklar.
Nasıl Yapılır Konuları Uygulamanızda animasyonları ve zaman çizelgelerini kullanmaya yönelik kod örnekleri içerir.
Saatler ile İlgili Nasıl Yapılır Konuları Uygulamanızda nesnesini kullanmaya Clock yönelik kod örnekleri içerir.
Anahtar Çerçeve ile İlgili Nasıl Yapılır Konuları Uygulamanızda anahtar çerçevesi animasyonlarını kullanmaya yönelik kod örnekleri içerir.
Yol Animasyonu ile İlgili Nasıl Yapılır Konuları Uygulamanızda yol animasyonlarını kullanmaya yönelik kod örnekleri içerir.

Başvuru