Aracılığıyla paylaş

Gelen/İçin/Göre Animasyonlarına Genel Bakış

  • Makale

Bu konuda bağımlılık özelliklerine animasyon eklemek için From/To/By animasyonlarının nasıl kullanılacağı açıklanmaktadır. Başlangıç/Bitiş/Başlangıç animasyonu iki değer arasında geçiş oluşturur.

Ön koşullar

Bu konuyu anlamak için WPF animasyon özellikleri hakkında bilgi sahibi olmanız gerekir. Animasyon özelliklerine giriş için bkz. Animasyona Genel Bakış.

From/To/By Animasyonu Nedir?

Başlangıç/Bitiş/Bitiş animasyonu, başlangıç değeri ile bitiş değeri arasında geçiş oluşturan bir türüdür AnimationTimeline . Geçişin tamamlanması için gereken süre, bu animasyonun Duration miktarına göre belirlenir.

İşaretlemeyi ve kodu kullanarak veya kodda yöntemini kullanarak Storyboard bir özelliğe From/To/By animasyonu BeginAnimation uygulayabilirsiniz. Ayrıca, animasyon oluşturmak AnimationClock ve bunu bir veya daha fazla özelliğe uygulamak için Başlangıç/Kime/Göre Animasyonu da kullanabilirsiniz. Animasyon uygulamak için kullanılan farklı yöntemler hakkında daha fazla bilgi için bkz . Özellik Animasyon Tekniklerine Genel Bakış.

Başlangıç/Hedef/Son animasyonlarında en fazla iki hedef değer olabilir. İkiden fazla hedef değeri olan bir animasyona ihtiyacınız varsa, bir anahtar çerçevesi animasyonu kullanın. Anahtar çerçevesi animasyonları, Anahtar Çerçevesi Animasyonlarına Genel Bakış bölümünde açıklanmıştır.

Başlangıç/Son/Göre 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.

From/To/By animasyon sınıfları ad alanına System.Windows.Media.Animation aittir ve aşağıdaki adlandırma kuralını kullanır:

<Türü>Animation

Burada <Tür> , sınıfın animasyonunu yaptığı değer türüdür.

WPF aşağıdaki From/To/By animasyon sınıflarını sağlar.

Özellik türü Karşılık Gelen/Gelen/Göre animasyon sınıfı
Byte ByteAnimation
Color ColorAnimation
Decimal DecimalAnimation
Double DoubleAnimation
Int16 Int16Animation
Int32 Int32Animation
Int64 Int64Animation
Point PointAnimation
Quaternion QuaternionAnimation
Rect RectAnimation
Rotation3D Rotation3DAnimation
Single SingleAnimation
Size SizeAnimation
Thickness ThicknessAnimation
Vector3D Vector3DAnimation
Vector VectorAnimation

Hedef Değerler

Başlangıç/Bitiş/Bitiş animasyonu, iki hedef değer arasında bir geçiş oluşturur. Bir başlangıç değeri (özelliğini kullanarak From ayarlayın) ve bir bitiş değeri (özelliğini kullanarak To ayarlayın) belirtmek yaygın bir durumdur. Ancak, yalnızca başlangıç değeri, hedef değer veya uzaklık değeri de belirtebilirsiniz. Bu gibi durumlarda, animasyon animasyonlu özelliğinden eksik hedef değeri alır. Aşağıdaki listede, bir animasyonun hedef değerlerini belirtmenin farklı yolları açıklanmaktadır.

  • Başlangıç Değeri

    Bir animasyonun From başlangıç değerini açıkça belirtmek istediğinizde özelliğini kullanın. özelliğini tek başına veya veya By özelliğiyle To kullanabilirsinizFrom. Yalnızca From özelliğini belirtirseniz, animasyon bu değerden animasyonlu özelliğin temel değerine geçiş yapar.

  • Bitiş Değeri

    Animasyonun bitiş değerini belirtmek için bu To animasyonun özelliğini kullanın. özelliğini tek başına kullanırsanız To animasyon, animasyonlu özelliğinden veya aynı özelliğe uygulanan başka bir animasyonun çıkışından başlangıç değerini alır. Animasyon için To başlangıç ve bitiş değerlerini açıkça belirtmek için özelliğini özelliğiyle From birlikte kullanabilirsiniz.

  • Uzaklık Değeri

    özelliği, By animasyon için açık bir başlangıç veya bitiş değeri yerine bir uzaklık belirtmenizi sağlar. Animasyonun By özelliği, animasyonun süresi boyunca bir değeri ne kadar değiştirdiğiyle belirtir. Özelliğini tek başına veya özelliğiyle From kullanabilirsinizBy. Yalnızca By özelliği belirtirseniz, animasyon uzaklık değerini özelliğin temel değerine veya başka bir animasyonun çıkışına ekler.

From/To/By Değerlerini Kullanma

Aşağıdaki bölümlerde , Tove By özelliklerinin birlikte veya ayrı ayrı nasıl kullanılacağı Fromaçıklanmaktadır.

Bu bölümdeki örneklerin her biri, 10 cihazdan bağımsız piksel yüksekliğinde ve 100 cihazdan bağımsız piksel genişliğinde olan bir özelliğine animasyon Width eklemek için Başlangıç/Bitiş/Bitiş animasyonu türü olan bir Rectangle kullanırDoubleAnimation.

Her örnek bir DoubleAnimationkullanır, ancak tüm From/To/By animasyonlarının From, To ve By özellikleri aynı şekilde davranır. Bu örneklerin her biri bir Storyboardkullansa da, From/To/By animasyonlarını başka şekillerde kullanabilirsiniz. Daha fazla bilgi için bkz . Özellik Animasyon Tekniklerine Genel Bakış.

Başlangıç/Son

ve To değerlerini birlikte ayarladığınızdaFrom, animasyon özelliği tarafından belirtilen değerden özelliği tarafından From belirtilen değere ilerlerTo.

Aşağıdaki örnek özelliğini 50 ve özelliğini To 300 olarak ayarlar.FromDoubleAnimation Sonuç olarak, Width öğesinin Rectangle animasyonu 50 ile 300 arasındadır.

// Demonstrates the From and To properties used together.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "fromToAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Black;

// Demonstrates the From and To properties used together.
// Animates the rectangle's Width property from 50 to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "fromToAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };

' Demonstrates the From and To properties used together.

' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("fromToAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.Black

' Demonstrates the From and To properties used together.
' Animates the rectangle's Width property from 50 to 300 over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 50
myDoubleAnimation.To = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "fromToAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

İşlem

Yalnızca To özelliği ayarladığınızda animasyon, animasyon özelliğinin temel değerinden veya daha önce aynı özelliğe uygulanmış olan oluşturma animasyonunun çıkışından özelliği tarafından belirtilen değere ilerler To .

("Animasyon oluşturma", daha önce geçerli animasyon iletim davranışı kullanılarak uygulandığında hala etkin olan aynı özelliğe uygulanmış bir veya Filling animasyonu Compose ifade ederActive.)

Aşağıdaki örnek yalnızca To özelliğini DoubleAnimation 300 olarak ayarlar. Hiçbir başlangıç değeri belirtilmediğinden DoubleAnimation , özelliğin temel değerini (100) Width başlangıç değeri olarak kullanır. Width öğesinin Rectangle animasyonu 100'den animasyonun hedef değeri olan 300'e kadardır.

// Demonstrates the use of the To property.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "toAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Gray;

// Demonstrates the To property used by itself. Animates
// the Rectangle's Width property from its base value
// (100) to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "toAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };

' Demonstrates the use of the To property.

' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("toAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.Gray

' Demonstrates the To property used by itself. Animates
' the Rectangle's Width property from its base value
' (100) to 300 over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.To = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "toAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

Tarafından

Bir animasyonun By yalnızca özelliğini ayarladığınızda, animasyon animasyonlu özelliğin temel değerinden veya oluşturma animasyonunun çıkışından bu değerin toplamına ve özelliği tarafından belirtilen değere ilerler By .

Aşağıdaki örnek yalnızca By özelliğini DoubleAnimation 300 olarak ayarlar. Örnek bir başlangıç değeri belirtmediğinden, DoubleAnimation başlangıç değeri olarak 100 özelliğinin Width temel değerini kullanır. Bitiş değeri, başlangıç değeri olan 100: 400'e animasyonun 300 değeri eklenerek By belirlenir. Sonuç olarak, Width öğesinin Rectangle animasyonu 100 ile 400 arasındadır.

// Demonstrates the use of the By property.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.RoyalBlue;

// Demonstrates the By property used by itself.
// Increments the Rectangle's Width property by 300 over 10 seconds.
// As a result, the Width property is animated from its base value
// (100) to 400 (100 + 300) over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };

' Demonstrates the use of the By property.

' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("byAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.RoyalBlue

' Demonstrates the By property used by itself.
' Increments the Rectangle's Width property by 300 over 10 seconds.
' As a result, the Width property is animated from its base value
' (100) to 400 (100 + 300) over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.By = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

Başlangıç/Başlangıç

Bir animasyonun From ve By özelliklerini ayarladığınızda, animasyon özelliği tarafından From belirtilen değerden ve By özelliklerinin toplamı tarafından belirtilen değere From ilerler.

Aşağıdaki örnek özelliğini 50 ve özelliğini By 300 olarak ayarlar.FromDoubleAnimation Bitiş değeri, başlangıç değeri olan 50: 350'ye animasyonun 300 değeri eklenerek By belirlenir. Sonuç olarak, Width öğesinin Rectangle animasyonu 50 ile 350 arasındadır.

// Demonstrates the use of the From and By properties.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.BlueViolet;

// Demonstrates the From and By properties used together.
// Increments the Rectangle's Width property by 300 over 10 seconds.
// As a result, the Width property is animated from 50
// to 350 (50 + 300) over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };

' Demonstrates the use of the From and By properties.

' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("byAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.BlueViolet

' Demonstrates the From and By properties used together.
' Increments the Rectangle's Width property by 300 over 10 seconds.
' As a result, the Width property is animated from 50
' to 350 (50 + 300) over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 50
myDoubleAnimation.By = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

From

Yalnızca bir animasyonun From değerini belirttiğinizde, animasyon özelliği tarafından From belirtilen değerden animasyonlu özelliğin temel değerine veya oluşturma animasyonunun çıkışına ilerler.

Aşağıdaki örnek yalnızca From özelliğini DoubleAnimation 50 olarak ayarlar. Hiçbir bitiş değeri belirtilmediğinden DoubleAnimation , bitiş değeri olarak 100 özelliğinin Width temel değerini kullanır. Width öğesinin Rectangle değeri, 50'den 100 özelliğinin Width temel değerine animasyonludur.

// Demonstrates the use of the From property.

// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());

Rectangle myRectangle = new Rectangle();

// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
    "fromAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Purple;

// Demonstrates the From property used by itself. Animates the
// rectangle's Width property from 50 to its base value (100)
// over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.Duration =
    new Duration(TimeSpan.FromSeconds(10));

Storyboard.SetTargetName(myDoubleAnimation, "fromAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
    {
        myStoryboard.Begin(myRectangle);
    };

' Demonstrates the use of the From property.

' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())

Dim myRectangle As New Rectangle()

' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("fromAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.Purple

' Demonstrates the From property used by itself. Animates the
' rectangle's Width property from 50 to its base value (100)
' over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 50
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))

Storyboard.SetTargetName(myDoubleAnimation, "fromAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)

Son/Son

Bir animasyonun To hem hem By de özelliklerini ayarlarsanız, By özelliği yoksayılır.

Diğer Animasyon Türleri

Başlangıç/Son animasyonları WPF'nin sağladığı tek animasyon türü değildir: anahtar çerçeve animasyonları ve yol animasyonları da sağlar.

WPF ayrıca kendi özel animasyon türlerinizi oluşturmanıza da olanak tanır. Daha fazla bilgi için bkz . Özel Animasyonlara Genel Bakış.

Ayrıca bkz.