Gelen/İçin/Göre Animasyonlarına Genel Bakış
Bu konuda, bağımlılık özelliklerine animasyonlar oluşturmak için From/To/By animasyonlarını kullanma açıklanmıştır. A From/To/By animasyonu iki değer arasında bir geçiş oluşturur.
Önkoşullar
Bu konuyu anlamak için WPF animasyon özellikleri hakkında bilgi sahibi olmak gerekir. Animasyon özelliklerine giriş için bkz. Animasyona Genel Bakış.
Gelen/Gelen/Animasyon Nedir?
Başlangıç/Bitiş/Bitiş animasyonu, başlangıç değeri AnimationTimeline ile bitiş değeri arasında geçiş oluşturan bir türe göredir. Geçişin tamamlanması için gereken süre, bu Duration animasyonun tarafından belirlenir.
Bir özellik için biçimlendirme ve kod içinde veya kodda yöntemini kullanarak bir From/To/By StoryboardBeginAnimation animasyonu uygulayabilirsiniz. Ayrıca, bir oluşturmak ve bir veya daha fazla özele uygulamak için Bir From/To/By AnimationClock Animasyonu da kullanabilirsiniz. Animasyon uygulamanın farklı yöntemleri hakkında daha fazla bilgi için bkz. Özellik Animasyon Tekniklerine Genel Bakış.
From/To/By animasyonları en fazla iki hedef değere sahip olabilir. İkiden fazla hedef değere sahip bir animasyona ihtiyaç varsa anahtar çerçeve animasyonu kullanın. Anahtar çerçeve animasyonları, Anahtar Çerçeve Animasyonlara Genel Bakış konusunda açıklanmıştır.
Animasyon Türlerine/Türlerine/Türlerine Göre
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 Width özele animasyonu oluşturmak için değer üreten bir animasyon Double kullanın. alan bir özelle animasyonu oluşturmak için değer üreten bir animasyon kullanın ve PointPoint bu şekilde devam eder.
From/To/By animasyon sınıfları ad alanına System.Windows.Media.Animation aittir ve aşağıdaki adlandırma kuralını kullanın:
Türü>Animation
Burada Tür, > sınıfın animasyona kat katarak değer t değeridir.
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
A From/To/By animasyonu iki hedef değer arasında bir geçiş oluşturur. Bir başlangıç değeri (özelliğini kullanarak ayarlayın) ve bir bitiş değeri (özelliğini kullanarak From ayarlamak) To yaygındır. Ancak, yalnızca bir başlangıç değeri, hedef değer veya uzaklık değeri de belirtsiniz. Bu durumlarda animasyon, animasyonlu özellikten eksik hedef değeri elde ediyor. Aşağıdaki listede, bir animasyonun hedef değerlerini belirtmenin farklı yolları açık almaktadır.
Başlangıç Değeri
Bir From animasyonun başlangıç değerini açıkça belirtmek için özelliğini kullanın. özelliğini tek From başına veya veya özelliğiyle ToBy kullanabilirsiniz. Yalnızca özelliğini From belirtirsiniz, animasyon bu değerden animasyonlu özelliğin temel değerine geçişler.
Bitiş Değeri
Animasyonun bitiş değerini belirtmek için özelliğini To kullanın. Özelliğini tek başına kullanırsanız animasyon, animasyonun başlangıç değerini animasyonlu olan özellikten veya aynı özellise uygulanan başka bir To animasyonun çıkışından elde eder. Animasyonun başlangıç To ve bitiş değerlerini açıkça belirtmek için özelliğini From özelliğiyle 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. Bir By animasyonun özelliği, animasyonun bir değerin süresi boyunca ne kadar değişiklikle değiştigini belirtir. özelliğini tek By başına veya özelliğiyle From kullanabilirsiniz. Yalnızca özelliğini belirtirsiniz, animasyon özelliğin temel değerine veya başka bir animasyonun By çıkışına uzaklık değerini ekler.
Gelen/Gelen/Göre Değerlerini Kullanma
Aşağıdaki bölümlerde, , ve özelliklerinin birlikte veya From ayrı ayrı nasıl kullanımı ToBy açıklanmaktadır.
Bu bölümdeki örneklerin her biri, 10 cihazdan bağımsız piksel yüksek ve 100 cihazdan bağımsız piksel genişliğinde olan bir özelliğini animasyon olarak kullanmak için bir Gelen/Gelen/Göre animasyon türü olan bir DoubleAnimationWidthRectangle kullanır.
Her örnekte , From, To ve By özelliklerinin tüm DoubleAnimation From/To/By animasyonları aynı şekilde davransa da. Bu örneklerin her biri bir kullansa Storyboard da, farklı şekillerde Gelen/Gelen/Göre animasyonlarını kullanabilirsiniz. Daha fazla bilgi için bkz. Özellik Animasyon Tekniklerini Genel Bakış.
Gelen/Gelen
ve değerlerini birlikte ayar belirttiğinizde animasyon, özelliği tarafından belirtilen değerden özelliği tarafından FromTo belirtilen From değere To ilerler.
Aşağıdaki örnek, özelliğini FromDoubleAnimation 50 ve özelliğini To 300 olarak ayarlar. Sonuç olarak , WidthRectangle 50'den 300'e animasyonlu olarak animasyonlu olarak elde edilen .
// 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)
Amaç
Yalnızca özelliğini ayar her ayarda animasyon, animasyonlu özelliğin temel değerinden veya daha önce aynı özellik için uygulanmış olan bir oluşturma animasyonun çıkışından, özelliği tarafından belirtilen değere ToTo ilerler.
("Animasyon oluşturma", daha önce geçerli animasyonun devredilen davranış kullanılarak uygulandığında hala geçerli olan aynı özellik için uygulanan veya ActiveFillingCompose animasyonunu ifade eder.)
Aşağıdaki örnek yalnızca özelliğini ToDoubleAnimation 300 olarak ayarlar. Başlangıç değeri belirtilmediklerine göre, başlangıç değeri olarak özelliğinin temel değerini DoubleAnimation (100) Width kullanır. , WidthRectangle 100'den animasyonun hedef değeri olan 300'e animasyonlu olur.
// 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)
Ölçüt
Bir animasyonun yalnızca özelliğini ayar her ayarda animasyon, animasyonlu olan özelliğin temel değerinden veya bir oluşturma animasyonu çıkışından bu değerin toplamına ve özelliği tarafından belirtilen değere doğru ByBy ilerler.
Aşağıdaki örnek yalnızca özelliğini ByDoubleAnimation 300 olarak ayarlar. Örnek bir başlangıç değeri belirtmese de, başlangıç değeri olarak DoubleAnimationWidth 100 özelliğinin temel değerini kullanır. Bitiş değeri, animasyonun By 300 değerinin başlangıç değeri olan 100: 400'e ek olarak belirlenir. Sonuç olarak , WidthRectangle 100'den 400'e animasyonlu olarak animasyonlu.
// 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)
Gelen/Gelen
Bir animasyonun ve özelliklerini ayar belirttiğinizde, animasyon özelliği tarafından belirtilen değerden ve özelliklerinin toplamı tarafından belirtilen FromByFrom değere FromBy ilerler.
Aşağıdaki örnek, özelliğini FromDoubleAnimation 50 ve özelliğini By 300 olarak ayarlar. Bitiş değeri, animasyonun By 300 değerinin başlangıç değeri olan 50: 350'ye ek olarak belirlenir. Sonuç olarak , WidthRectangle 50'den 350'ye animasyonlu olarak harekettir.
// 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)
Kaynak
Animasyonun yalnızca değerini belirttiğinizde, animasyon özelliği tarafından belirtilen değerden animasyonlu özelliğin temel değerine veya bir oluşturma animasyonun çıkışına FromFrom ilerler.
Aşağıdaki örnek yalnızca özelliğini FromDoubleAnimation 50 olarak ayarlar. Bitiş değeri belirtilmediklerine göre, DoubleAnimation bitiş değeri olarak Width 100 özelliğinin temel değerini kullanır. , WidthRectangle özelliğinin temel değeri olan 100'e Width 50'den animasyonlu olarak animasyon eklenmiş.
// 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)
To/By
Bir animasyonun hem To hem de By özelliklerini ayarsanız özellik By yoksayılır.
Diğer Animasyon Türleri
From/To/By animasyonları WPF'nin sağladığı tek animasyon türü değildir: Anahtar çerçeve animasyonları ve yol animasyonları da sağlar.
Anahtar çerçeve animasyonu, anahtar çerçeveler kullanılarak açıklanan herhangi bir sayıda hedef değere animasyon animasyonu sağlar. Daha fazla bilgi için bkz. Anahtar Çerçeve Animasyonlara Genel Bakış.
Yol animasyonu, bir 'den çıkış değerleri PathGeometry oluşturur. Daha fazla bilgi için bkz. Yol Animasyonlara Genel Bakış.
WPF ayrıca kendi özel animasyon türlerinizi oluşturmanıza da olanak sağlar. Daha fazla bilgi için bkz. Özel Animasyonlara Genel Bakış.