Общие сведения об анимациях From/To/By
В этом разделе описываются способы использования анимаций From/To/By для свойств зависимостей. Анимация From/To/By создает переход между двумя целевыми значениями.
Предварительные требования
Для понимания этого раздела необходимо ознакомиться с WPF средствах анимации. Общие сведения о возможностях анимации, см. в разделе Общие сведения об анимации.
Что такое анимация From/To/By?
From/To/By анимации — это разновидность AnimationTimeline , создает переход между начальным и конечным значением. Количество времени, которое занимает переход определяется Duration этой анимации.
From/To/By можно применить анимацию к свойству с помощью Storyboard в разметке и коде или с помощью BeginAnimation метод в коде. Вы также может использовать анимацию для создания AnimationClock и применить его к одному или нескольким свойствам. Дополнительные сведения о различных способах применения анимации см. в разделе Общие сведения о методах анимации свойств.
Анимация From/To/By может иметь не более двух целевых значений. Если требуется анимация, у которой более двух целевых значений, используйте анимацию по ключевым кадрам. Анимации по ключевым кадрам описаны в сведения об анимации по ключевым кадрам.
Типы анимации From/To/By
Так как при анимации создаются значения свойств, существуют различные типы анимаций для различных типов свойств. Для анимации свойства, которое принимает Double, такие как Width свойства элемента, используйте анимацию, создающую Double значения. Для анимации свойства, которое принимает Point, используйте анимацию, создающую Point значений и т. д.
Классы анимации From/To/By принадлежат к System.Windows.Media.Animation пространства имен и используется следующее соглашение об именовании:
<Тип > Animation
Где <Type> — тип значения, которое выполняет анимацию класса.
WPF предоставляет следующие From/To/By классы анимации.
Тип свойства | Соответствующий класс анимации From/To/By |
---|---|
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 |
Целевые значения
Анимация From/To/By создает переход между двумя целевыми значениями. Обычно задается начальное значение (с помощью From свойства) и конечное значение (с помощью To свойство). Но можно также указать только начальное значение, конечное или значение смещения. В таких случаях анимация получает отсутствующее целевое значение из свойства, для которого она выполняется. Ниже описаны различные способы задания целевых значений анимации.
Начальное значение
Используйте From свойства, если вы хотите явно указать начальное значение анимации. Можно использовать From свойство самостоятельно или с To или By свойство. Если указать только From свойство, анимация переходит от этого значения к базовому значению анимируемого свойства.
Конечное значение
Чтобы задать конечное значение анимации, используйте его To свойство. Если вы используете To само свойство, анимация получает начальное значение из анимируемого свойства или из выходных данных другой анимации, которая применяется к тому же свойству. Можно использовать To свойство вместе с From свойство, чтобы явно указать начальное и конечное значения для анимации.
Значение смещения
By Свойство позволяет указать смещение вместо явного начального или конечного значения анимации. By Свойство анимации определяет, сколько анимация изменяет значение за время своего выполнения. Можно использовать By свойство отдельно или с From свойство. Если указать только By свойство, анимация добавит значение смещения к базовому значению свойства или выходным объектом другой анимации.
Использование значений From/To/By
В следующих разделах рассматривается использование From, To, и By свойства вместе или по отдельности.
В примерах этого раздела используется DoubleAnimation, который является типом анимации From/To/By, для анимации Width свойство Rectangle то есть 10 аппаратно-независимых пикселях в высокого уровня и 100 аппаратно-независимых пикселей в ширину.
Несмотря на то, что каждый пример использует DoubleAnimation, From, To и By свойства всех From/To/By анимации ведут себя одинаково. Хотя в каждом из этих примеров используется Storyboard, анимации From/To/By можно использовать в других целях. Дополнительные сведения см. в разделе Общие сведения о методах анимации свойств.
От/кому
При задании From и To значения одновременно, анимация выполняется от значения, который задается параметром From свойство, которое задается параметром To свойство.
В следующем примере задается From свойство DoubleAnimation 50 и его To в значение 300. В результате Width из Rectangle анимируется от 50 до 300.
// 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);
};
Кому
Если задано только To свойство, анимация выполняется от базового значения анимируемого свойства или из выходных данных составляющей анимации, которая ранее была применена к тому же свойству, которое задается параметром To свойство.
(«Составляющая анимация» ссылается на Active или Filling анимации, ранее примененную к тому же свойству, остается в силе при применении текущей анимации с помощью Compose переадресуемое поведение.)
В следующем примере задается только To свойство DoubleAnimation до 300. Так как начальное значение не указано, DoubleAnimation использует базовое значение (100) Width свойство в качестве своего начального значения. Width Из Rectangle анимируется от 100 до конечного значения анимации 300.
// 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);
};
На
Если задано только By свойство анимации, анимация выполняется от базового значения анимируемого свойства или из выходных данных составляющей анимации к сумме этого значения и значения, который задается параметром By свойство.
В следующем примере задается только By свойство DoubleAnimation до 300. Так как в примере указывается начальное значение, DoubleAnimation использует базовое значение Width свойства, 100, как начальное значение. Конечное значение определяется добавлением By значение анимации, 300, к начальному значению, 100: 400. В результате Width из Rectangle анимируется от 100 до 400.
// 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);
};
From/By
При задании From и By свойства анимации, анимация выполняется от значения, который задается параметром From свойства, чтобы значение, которое указано на сумму From и By свойства.
В следующем примере задается From свойство DoubleAnimation 50 и его By в значение 300. Конечное значение определяется добавлением By значение анимации, 300, к начальному значению, 50: 350. В результате Width из Rectangle анимируется от 50 до 350.
// 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);
};
Исходный тип
Если указано только From значение анимации, анимация выполняется от значения, который задается параметром From свойство, к базовому значению анимируемого свойства или выходных данных составляющей анимации.
В следующем примере задается только From свойство DoubleAnimation до 50. Так как конечное значение не указано, DoubleAnimation использует базовое значение Width 100 свойства, в качестве конечного значения. Width Из Rectangle анимируется от 50 до базового значения Width 100 свойства.
// 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);
};
To/By
Если заданы оба To и By свойства анимации, By свойство учитывается.
Другие типы анимаций
From/To/By ― не единственный тип анимации, WPF предоставляет: он также предоставляет анимации по ключевым кадрам и анимация с использованием пути.
Анимация по ключевым кадрам анимирует по любому числу конечных значений, описанных с помощью ключевых кадров. Дополнительные сведения см. в разделе сведения об анимации по ключевым кадрам.
Анимация пути формирует выходные значения из PathGeometry. Дополнительные сведения см. в разделе Общие сведения об анимации пути.
WPF также позволяет создавать собственные настраиваемые типы анимации. Дополнительные сведения см. в разделе Общие сведения о настраиваемых анимации.