Animasyona Genel bakış

Windows Presentation Foundation (WPF) etkileyici kullanıcı arabirimleri ve çekici belgeler oluşturmanızı sağlayan güçlü bir grafik ve düzen özellikleri kümesi sağlar. Animasyon etkileyici bir kullanıcı arabirimini daha da etkileyici ve kullanılabilir hale getirebilirsiniz. Yalnızca bir arka plan renginin animasyonunu yaparak veya animasyonlu bir animasyon uygulayarak Transform , çarpıcı ekran geçişleri oluşturabilir veya yararlı görsel yardımlar sağlayabilirsiniz.

Bu genel bakış, WPF animasyon ve zamanlama sistemine bir giriş sağlar. WPFFilm şeritleri kullanarak nesnelerin animasyonuna odaklanır.

Animasyonları tanıtma

Animasyon, her biri son verilerden biraz farklı olan bir dizi görüntüden hızlıca geçiş yaparak oluşturulan bir yanıdır. Bey, görüntü grubunu tek bir değişen sahne olarak beyin. Bu yanışta, her saniye çok sayıda fotoğraf veya kare kaydeden kameralar kullanılarak oluşturulur. Çerçeveler bir projektör tarafından geri yürütüldüğünde, hedef kitle bir hareketli resim görür.

Bir bilgisayardaki animasyon benzerdir. Örneğin, görünümün dışına çıkan bir dikdörtgen çizimi oluşturan bir program aşağıdaki gibi çalışabilir.

  • Program bir zamanlayıcı oluşturur.

  • Program, ne kadar süre geçtiğini görmek için zamanlayıcıyı ayarlanan aralıklarda denetler.

  • Program zamanlayıcıyı her denetlediğinde, dikdörtgenin ne kadar süre geçtiğini temel alarak geçerli opaklık değerini hesaplar.

  • Daha sonra program, dikdörtgeni yeni değerle güncelleştirir ve yeniden çizer.

öncesinde WPF , Microsoft Windows geliştiricilerin kendi zamanlama sistemlerini oluşturması ve yönetmesi veya özel özel kitaplıklar kullanması gerekiyordu. WPF , yönetilen kod ile sunulan ve Framework 'e derinlemesine bir şekilde tümleştirilmiş olan etkili bir zamanlama sistemi içerir Extensible Application Markup Language (XAML) WPF . WPF animasyon denetimleri ve diğer grafik nesnelerinin animasyonunu kolaylaştırır.

WPF bir zamanlama sisteminin yönetilmesi ve ekranı verimli bir şekilde çizmek için tüm arka planda çalışmayı işler. Bu etkileri sağlamak yerine, oluşturmak istediğiniz etkilere odaklanmanız için zamanlama sınıfları sağlar. WPF Ayrıca, Özel animasyonlar oluşturmak için sınıflarınızın devraldığı animasyon temel sınıflarını açığa çıkaran kendi animasyonlarınızı oluşturmayı kolaylaştırır. Bu özel animasyonlar, standart animasyon sınıflarının birçok performans avantajı elde edebilir.

WPF özelliği animasyon sistemi

Zamanlama sistemiyle ilgili birkaç önemli kavramı anladıysanız, WPF animasyonların kullanımı daha kolay olabilir. En önemlileri, ' de WPF , tek tek özelliklerine animasyon uygulayarak nesneleri canlandırmaktır. Örneğin, bir çerçeve öğesini büyütmek için, Width ve özelliklerini canlandırırsınız Height . Bir nesneyi görünümden soluklaştırmak için, özelliği canlandırırsınız Opacity .

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

  • Bağımlılık özelliği olmalıdır.

  • Sınıfından devralan ve arabirimini uygulayan bir sınıfa ait olmalıdır DependencyObject IAnimatable .

  • Kullanılabilir uyumlu bir animasyon türü olmalıdır. ( WPF Bir tane sağlamıyorsa, kendi kendinizinkini oluşturabilirsiniz. Bkz. Özel animasyonlara genel bakış.)

WPF özellikleri olan çok sayıda nesne içerir IAnimatable . Ve gibi denetimler Button ve TabControl Ayrıca, ve Panel de Shape nesneleri öğesinden devralınır DependencyObject . Özelliklerinin çoğu bağımlılık özellikleridir.

Animasyonları, stiller ve denetim şablonlarına dahil neredeyse her yerde kullanabilirsiniz. Animasyonların görsel olması gerekmez; Bu bölümde açıklanan ölçütlere uyduklarında, Kullanıcı arabiriminin parçası olmayan nesnelere animasyon uygulayabilirsiniz.

Örnek: bir öğeyi Soluklaştırın ve görünümün dışında yapma

Bu örnek WPF , bir bağımlılık özelliğinin değerine animasyon uygulamak için animasyonun nasıl kullanılacağını gösterir. DoubleAnimation Double Öğesinin özelliğine animasyon uygulamak için değer üreten bir animasyon türü olan bir kullanır Opacity Rectangle . Sonuç olarak, Rectangle belirme ve görünümün dışına çıkar.

Örneğin ilk bölümü bir Rectangle öğesi oluşturur. Aşağıdaki adımlar bir animasyon oluşturmayı ve dikdörtgenin özelliğine nasıl uygulanacağını gösterir Opacity .

Aşağıda, Rectangle XAML içinde bir öğesinin nasıl oluşturulacağı gösterilmektedir StackPanel .

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

Aşağıda, Rectangle içindeki bir öğenin nasıl oluşturulacağı gösterilmektedir StackPanel .

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

1. kısım: DoubleAnimation oluşturma

Bir öğeyi soluklaştırın ve görünümün dışında yapmanın bir yolu, özelliğin animasyonunu kullanmaktır Opacity . OpacityÖzelliği türünde olduğundan Double , Double değerleri üreten bir animasyon gerekir. DoubleAnimation, Bu tür bir animasyondur. DoubleAnimationİki Double değeri arasında bir geçiş oluşturur. Başlangıç değerini belirtmek için, From özelliğini ayarlarsınız. Bitiş değerini belirtmek için, To özelliğini ayarlarsınız.

  1. Opaklık değeri 1.0 nesnenin tamamen opak olmasını sağlar ve opaklık değeri 0.0 tamamen görünmez hale gelir. ' Den ' e geçiş yapmak 1.0 için 0.0 , From özelliğini 1.0 ve To özelliğini olarak ayarlayın 0.0 . Aşağıda, XAML içinde nasıl oluşturulacağı gösterilmektedir DoubleAnimation .

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

    Aşağıda bir kod içinde nasıl oluşturulacağı gösterilmektedir DoubleAnimation .

    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 belirtmeniz gerekir Duration . DurationBir animasyon, başlangıç değerinden hedef değerine gitmek için geçen süreyi belirtir. Aşağıda, Duration xaml 'de beş saniyelik olarak nasıl ayarlanacağı gösterilmektedir.

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

    Aşağıda, Duration kodda beş saniyelik olarak nasıl ayarlanacağı gösterilmektedir.

    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
    
    myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
    
  3. Önceki kod, ' dan ' a geçiş yapan bir animasyon gösterdi 1.0 0.0 . Bu, hedef öğenin tamamen opak ve tamamen görünmez hale gelmesine neden olur. Öğe geçtikten sonra öğeyi görünüme geri dönerek yapmak için AutoReverse animasyonun özelliğini olarak ayarlayın true . Animasyonun süresiz olarak tekrarlanması için RepeatBehavior özelliğini olarak ayarlayın Forever . Aşağıda, AutoReverse xaml 'de ve özelliklerinin nasıl ayarlanacağı gösterilmektedir RepeatBehavior .

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

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

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

2. Bölüm: görsel taslak oluşturma

Bir nesneye animasyon uygulamak için bir oluşturur Storyboard ve TargetName TargetProperty animasyon eklenecek nesne ve özelliği belirtmek için ve ekli özellikleri kullanırsınız.

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

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

    Storyboardİçinde kod oluşturmak için Storyboard sınıf düzeyinde bir 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. , Storyboard Animasyonun nereye uygulanacağını bilmelidir. Storyboard.TargetNameCanlandırılacak nesneyi belirtmek için iliştirilmiş özelliğini kullanın. Aşağıda, ' nin hedef adının XAML 'de nasıl ayarlanacağı gösterilmiştir DoubleAnimation MyRectangle .

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

    Aşağıda, ' nin hedef adının kodda olarak nasıl ayarlanacağı gösterilmiştir DoubleAnimation MyRectangle .

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
    
    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
    
  3. TargetPropertyAnimasyon uygulanacak özelliği belirtmek için iliştirilmiş özelliğini kullanın. Aşağıda animasyonun Opacity xaml içindeki özelliğini hedeflemek için nasıl yapılandırıldığı gösterilmiştir 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 Opacity kod içindeki özelliğini hedeflemek üzere nasıl yapılandırıldığı gösterilmiştir Rectangle .

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

Sözdizimi ve ek örnekler hakkında daha fazla bilgi için TargetProperty bkz. görsel taslaklara genel bakış.

Bölüm 3 (XAML): görsel taslağı bir tetikleyici ile Ilişkilendirme

' In uygulanması ve başlatılması en kolay yolu Storyboard XAML bir olay tetikleyicisi kullanmaktır. Bu bölümde, Storyboard ' nın xaml 'de bir tetikleyiciyle ilişkilendirilmesi gösterilmektedir.

  1. Bir BeginStoryboard nesne oluşturun ve görsel taslağınızı onunla ilişkilendirin. BeginStoryboard, TriggerAction Uygulanan ve Başlatan bir türüdür Storyboard .

    <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. Oluşturun EventTrigger ve BeginStoryboard koleksiyonuna ekleyin Actions . RoutedEventÖğesinin özelliğini EventTrigger başlatmak istediğiniz yönlendirilmiş olay olarak ayarlayın Storyboard . (Yönlendirilmiş olaylar hakkında daha fazla bilgi için bkz. yönlendirilmiş 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. Öğesini EventTrigger Triggers dikdörtgenin koleksiyonuna 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 taslağı bir olay Işleyicisiyle Ilişkilendirme

Bir kod içinde uygulamanın en kolay yolu bir Storyboard olay işleyicisi kullanmaktır. Bu bölümde, Storyboard ' nin kodda bir olay işleyicisi ile ilişkilendirilmesi gösterilmektedir.

  1. LoadedDikdörtgenin olayına kaydolun.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
    
    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded
    
  2. Olay işleyicisini bildirin. Olay işleyicisinde, Begin film şeridini uygulamak için yöntemini kullanın.

    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 görünüm içinde ve dışında solduran bir dikdörtgenin nasıl oluşturulup oluşturulacakları gösterir.

<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 görünüm içinde beliren ve görünümden çıkaran bir dikdörtgenin nasıl oluşturulup oluşturulacakları ve nasıl oluşturulacakları gösterir.

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ştura olduğundan, farklı özellik türleri için farklı animasyon türleri vardır. Bir öğenin özelliği gibi bir Double alan bir özele animasyonu oluşturmak için değer üreten bir animasyon Width Double kullanın. alan bir özelle animasyonu oluşturmak için değer üreten bir animasyon kullanın ve Point Point bu şekilde devam eder. Farklı özellik türlerinin sayısı nedeniyle ad alanı içinde birkaç animasyon sınıfı System.Windows.Media.Animation vardır. Neyse ki, aralarında ayrımı kolaylaştıran katı bir adlandırma kuralına uyarlar:

  • <Type>Animasyon

    "Başlangıç/Başlangıç/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 ekler.

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

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

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

    Bu genel bakıştaki örnekler, kullanımı en basit olan animasyonları kullanır. From/To/By animasyonları, Animasyonlara Genel Bakış makalesinde ayrıntılı olarak açıklanmıştır.

  • <Type>AnimationUsingKeyFrames

    Herhangi bir sayıda hedef değer belirtebilirsiniz ve hatta ilişkilendirme yöntemlerini kontrol etmek için anahtar kare animasyonları Başlangıç/Başlangıç/By animasyonlarından daha güçlüdür. Bazı türler yalnızca anahtar çerçeve animasyonları ile animasyonlu olabilir. Anahtar çerçevesi animasyonları, Anahtar Çerçeve Animasyonları'nın Genel Bakış makalesinde ayrıntılı olarak açıklanmıştır.

  • <Type>AnimationUsingPath

    Yol animasyonları, animasyonlu değerler oluşturmak için geometrik yol kullanmana olanak sağlar.

  • <Type>AnimationBase

    Bir değere animasyonlar uygulayan soyut <Type> sınıf. Bu sınıf Animation ve <Type> <Type> AnimationUsingKeyFrames sınıfları için temel sınıf olarak görev gösterir. Yalnızca kendi özel animasyonlarınızı oluşturmak için bu sınıflarla doğrudan ilgilenebilirsiniz. Aksi takdirde bir Animasyon <Type> veya Anahtar Çerçeve Animasyonu <Type> kullanın.

Çoğu durumda, ve gibi Animasyon <Type> sınıflarını kullanmak istemeniz DoubleAnimation ColorAnimation gerekir.

Aşağıdaki tabloda birçok yaygın animasyon türü ve bunların birlikte kullanıldıkları bazı özellikler yer alır.

Özellik türü Karşılık gelen temel (Gelen/Gelen/Göre) animasyonu Karşılık gelen anahtar çerçevesi animasyonu İlgili Yol Animasyonu Kullanım örneği
Color ColorAnimation ColorAnimationUsingKeyFrames Hiçbiri bir veya Color 'ine SolidColorBrush animasyonu animasyonu. GradientStop
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath bir veya Width bir DockPanel 'ine Height animasyonu animasyonu. Button
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath bir Center konumunun animasyonunu EllipseGeometry seçin.
String Hiçbiri StringAnimationUsingKeyFrames Hiçbiri bir veya Text bir TextBlock 'ine Content animasyonu animasyonu. Button

Animasyonlar Zaman Çizelgeleridir

Tüm animasyon türleri sınıfından Timeline devralınır; bu nedenle, tüm animasyonlar özel zaman çizelgesi türleridir. , Timeline bir zaman segmentini tanımlar. Bir zaman çizelgesinin zamanlama davranışlarını belirtebilirsiniz: zaman çizelgesi, kaç kez yinelenir ve hatta bunun için ne kadar Duration hızlı ilerler?

Animasyon bir Timeline olduğundan, bir zaman segmentini de temsil eder. Animasyon, belirtilen zaman segmentinde (veya ) ilerleken çıkış değerlerini de Duration hesaplar. Animasyon ilerle ettikçe veya "oynatıyor" olarak, ilişkili olduğu özelliği de günceller.

Sık kullanılan üç zamanlama özelliği Duration , AutoReverse ve 'tir. RepeatBehavior

Duration Özelliği

Daha önce belirtildiği gibi, zaman çizelgesi bir zaman dilimini temsil eder. Bu segmentin uzunluğu, genellikle bir Duration değer kullanılarak belirtilen zaman çizelgesinin uzunluğuna göre TimeSpan belirlenir. Bir zaman çizelgesi, süresinin sonuna ulaştığında bir yinelemeyi tamamlar.

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

Aşağıdaki söz dizimi özelliği için öznitelik söz Extensible Application Markup Language (XAML) dizimlerinin basitleştirilmiş bir sürümünü Duration gösterir.

saat : dakika : saniye

Aşağıdaki tabloda çeşitli ayarlar Duration ve bunların sonucunda elde edilen değerler yer alır.

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

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

Değerler ve tam söz Duration dizimi hakkında daha Extensible Application Markup Language (XAML) fazla bilgi için yapısına Duration bakın.

Autoreverse

özelliği, AutoReverse bir zaman çizelgesinin sonuna ulaştıktan sonra geriye doğru çalışıp oynanmay olmadığını Duration belirtir. Bu animasyon özelliğini olarak ayarlayarak animasyon, bitiş değerinden başlangıç değerine geri doğru ilerler. true Duration Varsayılan olarak bu false özelliktir.

Repeatbehavior

özelliği, RepeatBehavior bir zaman çizelgesinin kaç kez oynanacaklarını belirtir. Varsayılan olarak, zaman çizelgeleri yineleme sayısına sahip olur. Başka bir ifadeyle bunlar 1.0 bir kez oynanıyor ve hiç tekrarlanmıyor.

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

Özel bir Özelle ilgili Animasyon Uygulama

Önceki bölümlerde farklı animasyon türleri ve bunların zamanlama özellikleri açıklanmaktadır. Bu bölümde animasyonun animasyonu oluşturmak istediğiniz özelliye nasıl uygulanacakları gösterir. Storyboard nesneleri, özelliklere animasyon uygulamak için tek bir yol sağlar. , Storyboard içerdiği animasyonlar için hedefleme bilgileri sağlayan bir kapsayıcı zaman çizelgesidir.

Nesneleri ve Özellikleri Hedefleme

sınıfı Storyboard ve TargetName ekli TargetProperty özelliklerini sağlar. Bu özellikleri bir animasyonda ayarerek animasyona animasyona nelerin animasyona animasyona nelerin animasyona neleri ifade etmek istediğini söylersiniz. Ancak, bir animasyon bir nesneyi hedefleyemeden önce nesneye genellikle bir ad ver gerekir.

bir nesnesine ad FrameworkElement atamak, bir nesneye ad atamadan Freezable farklıdır. Çoğu denetim ve panel çerçeve öğeleridir; ancak fırçalar, dönüşümler ve geometriler gibi çoğu tamamen grafiksel nesneler serbest bırakılabilir nesnelerdir. Bir türün veya olduğundan emin FrameworkElement Freezable değilsanız, başvuru belgelerinin Devralma Hiyerarşisi bölümüne bakın.

  • Bir animasyon FrameworkElement hedefi oluşturmak için özelliğini ayarerek animasyona bir ad Name vetirsiniz. Kodda, öğe adını RegisterName ait olduğu sayfayla kaydetmek için yöntemini de kullanacaksınız.

  • Bir nesneyi Freezable içinde animasyon hedefi yapmak için XAML x:Name Yönergesini kullanarak bir ad atarsiniz. Kodda, nesnesini RegisterName ait olduğu sayfayla kaydetmek için yöntemini kullanırız.

Aşağıdaki bölümlerde ve kodundaki bir öğeyi adlandırma örneği XAML ve sağlanmıştır. Adlandırma ve hedefleme hakkında daha ayrıntılı bilgi için bkz. Storyboards Overview.

Storyboard'ları Uygulama ve Başlatma

'de bir storyboard başlatmak XAML için bunu bir ile ilişkilendirmelisiniz. EventTrigger , EventTrigger belirtilen bir olay oluştuğunda hangi eylemlerin gerçekleştirilmelidir açıklayan bir nesnesidir. Bu eylemlerden biri, BeginStoryboard storyboard'larınızı başlatmak için kullanabileceğiniz bir eylem olabilir. Olay tetikleyicileri, kavram olarak olay işleyicilerine benzer çünkü bunlar, uygulamanın belirli bir etkinliğe nasıl yanıt ver olduğunu belirtmenize olanak sağlar. Olay işleyicilerin aksine, olay tetikleyicileri içinde tam olarak XAML açıklanmıştır; başka bir kod gerekmez.

Kodda Storyboard başlatmak için bir kullanabilir veya EventTrigger sınıfının yöntemini Begin Storyboard kullanabilirsiniz.

Görsel Taslağı etkileşimli olarak denetleme

Önceki örnek bir olay gerçekleştiğinde nasıl başlatılacağını gösterdi Storyboard . Başladıktan sonra etkileşimli bir şekilde denetleyebilirsiniz Storyboard : duraklatıp devam edebilir, durdurabilir, Fill dönemine ilerletebilirsiniz, arayabilir ve kaldırabilirsiniz Storyboard . Daha fazla bilgi ve bir örneğini etkileşimli olarak nasıl denet, gösteren bir örnek için Storyboard bkz. görsel taslaklara genel bakış.

Bir animasyon bittikten sonra ne olur?

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

DoubleAnimationÖnceki örnekteki, RepeatBehavior özelliği olarak ayarlandığı için sonlanmıyor Forever . Aşağıdaki örnek, benzer bir animasyon kullanarak bir dikdörtgeni hareketlendirir. Önceki örneğin aksine, RepeatBehavior AutoReverse Bu animasyonun ve özellikleri varsayılan değerlerinde bırakılır. Bu nedenle, animasyon beş saniye boyunca 1 ile 0 arasında ilerlerler ve sonra duraklar.

<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))

FillBehaviorVarsayılan değerinden değişmediğinden, HoldEnd Bu, animasyon son değerini, 0, sona erdiğinde tutar. Bu nedenle, Opacity bir animasyon bittikten sonra dikdörtgenin 0 ' da kalması gerekir. OpacityDikdörtgenin bir değerini başka bir değere ayarlarsanız, animasyon özelliği hala etkilediği için kodunuzun etkisi olmaz gibi görünür Opacity .

Kodda animasyonlu bir özelliğin denetimini yeniden kazanmak için bir yol BeginAnimation yöntemi kullanmak ve parametresi için null değeri belirtmektir AnimationTimeline . Daha fazla bilgi ve bir örnek için bkz. Görsel Taslakla animasyon uygulandıktan sonra özelliği ayarlama.

Ya da animasyonu olan bir özellik değerinin Active Filling etkin olmadığından, özellik değerinin değişebileceğini unutmayın. Daha fazla bilgi için bkz. animasyon ve zamanlama sistemine genel bakış.

Veri bağlama ve animasyonları hareketlendirme

Animasyon özelliklerinin çoğu veri veya animasyonlu olabilir; Örneğin, Duration bir öğesinin özelliğine animasyon uygulayabilirsiniz DoubleAnimation . Ancak, zamanlama sisteminin çalışma biçimi nedeniyle, veri bağlantılı veya animasyonlu animasyonlar diğer veri bağlantılı veya animasyonlu nesneler gibi davranmaz. Davranışlarını anlamak için bir özelliği bir animasyon uygulamak için ne anlama geldiğini anlamanıza yardımcı olur.

Bir dikdörtgenin nasıl hareketlendirileceğini gösteren önceki bölümde yer alan örneğe bakın Opacity . Önceki örnekteki dikdörtgen yüklendiğinde, olay tetikleyicisi uygular Storyboard . Zamanlama sistemi, ve animasyonunun bir kopyasını oluşturur Storyboard . Bu kopyalar dondurulur (salt okunurdur) ve Clock nesneler bunlardan oluşturulur. Bu saatler, hedeflenen özellikleri hareketlendirmek için gerçek çalışmalara sahiptir.

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

İçin bir saat de oluşturulsa da, Storyboard saat herhangi bir özelliğe uygulanmaz. Amacı, için oluşturulan saat olan alt saatini denetme amaçlıdır DoubleAnimation .

Bir animasyonun veri bağlamayı veya animasyon değişikliklerini yansıtması için, saatinin yeniden oluşturulması gerekir. Saatler sizin için otomatik olarak yeniden oluşturulmaz. Bir animasyonun değişiklikleri yansıtmasını sağlamak için, veya metodunu kullanarak film şeridini yeniden uygulayın BeginStoryboard Begin . Bu yöntemlerden birini kullandığınızda animasyon yeniden başlatılır. Kod içinde, Seek Görsel Taslağı önceki konumuna geri kaydırmak için yöntemini kullanabilirsiniz.

Veri bağlantılı animasyon örneği için bkz. Anahtar eğri 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 almanın diğer yolları

Bu genel bakışdaki örneklerde film şeritleri kullanılarak nasıl animasyon ekleneceği gösterilmektedir. Kodu kullandığınızda, birkaç farklı yolla animasyon uygulayabilirsiniz. Daha fazla bilgi için bkz. animasyon tekniklerine genel bakış.

Animasyon örnekleri

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

Başlık Açıklama
Animasyon ve Zamanlama Sistemine Genel Bakış Zamanlama sisteminin, ve sınıflarını nasıl kullandığını açıklar Timeline ve Clock Bu da animasyonları oluşturmanızı sağlar.
Animasyon İpuçları ve Püf Noktaları Performans gibi animasyonlarla ilgili sorunları çözmek için faydalı ipuçları listeler.
Özel Animasyonlara Genel Bakış Animasyon sisteminin anahtar çerçeveler, animasyon sınıfları veya kare başına geri çağırmalar ile nasıl genişletileceğini açıklar.
Gelen/İçin/Göre Animasyonlarına Genel Bakış İki değer arasında geçiş yapan bir animasyonun nasıl oluşturulacağını açıklar.
Anahtar-Çerçeve Animasyonlara Genel Bakış Enterpolasyon yöntemini denetleme özelliği de dahil olmak üzere birden çok hedef değeri olan bir animasyonun nasıl oluşturulacağını açıklar.
Kolaylaştırıcı İşlevler Sıçramalar gibi gerçekçi davranışları almak için animasyonlarınızın matematiksel formüllerin nasıl uygulanacağını açıklar.
Yol Animasyonlarına Genel Bakış Bir nesnenin karmaşık bir yol üzerinde nasıl taşınacağını veya döndürüleceğini açıklar.
Özellik Animasyon Tekniklerine Genel Bakış Görsel taslak, yerel animasyon, saat ve çerçeve başına animasyonları kullanarak özellik animasyonlarını açıklar.
Görsel Taslaklara Genel Bakış Karmaşık animasyonlar oluşturmak için birden çok zaman çizelgesi ile film şeritlerinin nasıl kullanılacağını açıklar.
Zamanlama Davranışlarına Genel Bakış TimelineAnimasyonlarda kullanılan türleri ve özellikleri açıklar.
Zamanlama Olaylarına Genel Bakış Timeline Clock Başlangıç, duraklatma, devam etmeyi, atla veya Durdur gibi zaman çizelgesindeki noktalarda kod yürütmek için ve nesnelerinde kullanılabilir olayları açıklar.
Nasıl yapılır konuları Uygulamanızda animasyon ve zaman çizelgelerini kullanmaya yönelik kod örnekleri içerir.
Saatler ile İlgili Nasıl Yapılır Konuları Uygulamanızda nesnesini kullanmak için kod örnekleri içerir Clock .
Anahtar Çerçeve ile İlgili Nasıl Yapılır Konuları Uygulamanızda anahtar çerçeve animasyonlarını kullanmaya yönelik kod örnekleri içerir.
Yol Animasyonu ile İlgili Nasıl Yapılır Konuları Uygulamanızdaki yol animasyonlarını kullanmaya yönelik kod örnekleri içerir.

Başvuru