Общие сведения об анимациях From/To/By
Обновлен: Ноябрь 2007
В этом разделе описываются способы использования анимаций From/To/By для анимации свойств зависимостей. Анимация From/To/By создает переход между двумя значениями.
В этом разделе содержатся следующие подразделы.
Необходимые компоненты
Для понимания этого раздела требуется знакомство с возможностями анимаций WPF. Вводные сведения о функциональных возможностях анимации см. в разделе Общие сведения об эффектах анимации.
Анимация From/To/By
Анимация From/To/By ― это тип анимации AnimationTimeline, которая создает переход между начальным и конечным значением. Временной интервал, по истечении которого переход завершается, определяется с помощью свойства Duration этой анимации.
Можно применять анимацию From/To/By к свойству, используя Storyboard в разметке и коде, или с помощью метода BeginAnimation в коде. Анимацию From/To/By можно также использовать для создания AnimationClock и применения к одному или нескольким свойствам. Дополнительные сведения о различных способах применения анимации см. в разделе Общие сведения о методах анимации свойств.
Анимации From/To/By могут иметь не более двух конечных значений. Если требуется анимация, которая имеет более двух конечных значений, используйте анимацию по полным кадрам. Анимация по полным кадрам описана в разделе Общие сведения об анимации по ключевым кадрам.
Типы анимаций From/To/By
Поскольку анимация создает значения свойств, для различных типов свойств существуют различные типы анимации. Для анимации свойства, которое принимает значение Double, как, например, свойство Width элемента, необходимо использовать анимацию, создающую значения Double. Для анимации свойства, которое принимает значение Point, необходимо использовать анимацию, создающую значения Point, и т.д.
Классы анимации From/To/By принадлежат к пространству имен System.Windows.Media.Animation и используют следующие правила именования:
*<Тип>*Animation
<Тип> ― тип значения, для которого класс выполняет анимацию.
WPF предоставляет следующие классы анимации From/To/By.
Тип свойства |
Соответствующий класс анимации From/To/By |
|---|---|
Целевые значения
Анимация 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 к значению свойства 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);
};
<!-- Demonstrates the From and To properties used together. -->
<Rectangle Name="fromToAnimatedRectangle"
Height="10" Width="100" HorizontalAlignment="Left"
Fill="Black">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Demonstrates the From and To properties used together.
Animates the rectangle's Width property from 50 to 300 over 10 seconds. -->
<DoubleAnimation
Storyboard.TargetName="fromToAnimatedRectangle"
Storyboard.TargetProperty="Width"
From="50" To="300" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
To
Если задано только свойство 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);
};
<!-- Demonstrates the use of the To property. -->
<Rectangle Name="toAnimatedRectangle"
Height="10" Width="100" HorizontalAlignment="Left"
Fill="Gray">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Demonstrates the To property used by itself.
Animates the Rectangle's Width property from its base value
(100) to 300 over 10 seconds. -->
<DoubleAnimation
Storyboard.TargetName="toAnimatedRectangle"
Storyboard.TargetProperty="Width"
To="300" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
By
Если установлено только свойство By анимации, то анимация продвигается от базового значения свойства, к которому она применяется, либо от выходных данных составной анимации к сумме этого значения и значения свойства By.
В следующем примере устанавливается только свойство By элемента DoubleAnimation, ему задается значение 300. Поскольку начальное значение не задается, DoubleAnimation использует в качестве начального значения базовое значение свойства Width, равное 100. Конечное значение определяется путем добавления значения 300 свойства By анимации к ее начальному значению 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);
};
<!-- Demonstrates the use of the By property. -->
<Rectangle Name="byAnimatedRectangle"
Height="10" Width="100" HorizontalAlignment="Left"
Fill="RoyalBlue">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- 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
Storyboard.TargetName="byAnimatedRectangle"
Storyboard.TargetProperty="Width"
By="300" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
From/By
Если задаются свойства From и By анимации, то анимация продвигается от значения свойства From к значению, которое определяется суммой свойств From и By.
В следующем примере свойство From анимации DoubleAnimation получает значение 50, а свойство By ― значение 300. Конечное значение определяется путем сложения значения 300 свойства By анимации с ее стартовым значением 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);
};
<!-- Demonstrates the use of the From and By properties. -->
<Rectangle Name="fromByAnimatedRectangle" Grid.Row="6" Grid.Column="2"
Height="10" Width="100" HorizontalAlignment="Left"
Fill="BlueViolet">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Demonstrates the From and By properties used by 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
Storyboard.TargetName="fromByAnimatedRectangle"
Storyboard.TargetProperty="Width"
From="50" By="300" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
From
Если указано только значение From анимации, то анимация продвигается от значения, заданного свойством From, к базовому значению свойства, для которого выполняется анимация, или к выходным данным составной анимации.
В следующем примере устанавливается только свойство From анимации DoubleAnimation, ему задается значение 50. Поскольку конечное значение не было задано, анимация DoubleAnimation использует в качестве конечного значения базовое значение 100 свойства Width. Для свойства Width элемента Rectangle выполняется анимация от 50 до базового значения 100 свойства Width.
// 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. -->
<Rectangle Name="fromAnimatedRectangle" Grid.Row="8" Grid.Column="2"
Height="10" Width="100" HorizontalAlignment="Left"
Fill="Purple">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Demonstrates the From property used by itself.
Animates the rectangle's Width property from 50 to its base value (100)
over 10 seconds. -->
<DoubleAnimation
Storyboard.TargetName="fromAnimatedRectangle"
Storyboard.TargetProperty="Width"
From="50" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
To/By
Если заданы два свойства анимации, и To, и By, то свойство By будет проигнорировано.
Другие типы анимации
Анимации From/To/By ― не единственный тип анимации, имеющийся в WPF: предоставляются также анимация по полным кадрам и анимация по пути.
Анимация по полным кадрам выполняется по любому числу целевых значений, описанных с помощью полных кадров. Дополнительные сведения см. в разделе Общие сведения об анимации по ключевым кадрам.
Анимация по пути создает выходные значения из PathGeometry. Дополнительные сведения см. в разделе Общие сведения об анимация с использованием пути.
WPF также позволяет создавать собственные настраиваемые типы анимации. Дополнительные сведения см. в разделе Общие сведения о пользовательской анимации.
См. также
Задачи
Пример использования значений From, To и By при анимации
Основные понятия
Общие сведения об эффектах анимации
Общие сведения об анимации по ключевым кадрам
Общие сведения об анимация с использованием пути
Общие сведения о пользовательской анимации