Практическое руководство. Анимация прямоугольника с помощью ключевых кадров
Обновлен: Ноябрь 2007
В этом примере демонстрируется анимация свойства Rect элемента управления RectangleGeometry с помощью полных кадров.
Пример
В следующем примере для анимации свойства Rect элемента управления RectangleGeometry используется класс RectAnimationUsingKeyFrames. В этой анимации используются три полных кадра следующим образом:
В течение первых двух секунд используется экземпляр класса LinearRectKeyFrame для анимации постепенного изменения позиции, ширины и высоты прямоугольника. Линейные полные кадры, такие как LinearRectKeyFrame, создают гладкий линейный переход между значениями.
Во время окончания следующей половины секунды используется экземпляр класса DiscreteRectKeyFrame для внезапного уменьшения высоты прямоугольника. Дискретные полные кадры типа DiscreteRectKeyFrame совершают мгновенные переходы между значениями, т. е. уменьшение высоты происходит быстро, но заметно.
В течение последних двух секунд используется экземпляр класса SplineRectKeyFrame для обратного преобразования прямоугольника к исходному размеру и расположению. Полные сплайновые кадры, такие как SplineRectKeyFrame, создают переменный переход между значениями в соответствии со значениями свойства KeySpline. В этом примере изменение начинается медленно и ускоряется экспоненциально к концу временного отрезка.
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Media;
namespace Microsoft.Samples.KeyFrameExamples
{
/// <summary>
/// This example shows how to use the RectAnimationUsingKeyFrames class to
/// animate the position and size of a rectangle.
/// Key frame animations enable you to create complex animations
/// by specifying multiple destination values
/// and controlling the animation's interpolation method.
/// </summary>
public class RectAnimationUsingKeyFramesExample : Page
{
public RectAnimationUsingKeyFramesExample()
{
Title = "RectAnimationUsingKeyFrames Example";
Background = Brushes.White;
Margin = new Thickness(20);
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
StackPanel myStackPanel = new StackPanel();
myStackPanel.Orientation = Orientation.Vertical;
myStackPanel.HorizontalAlignment = HorizontalAlignment.Center;
//Add the Path Element
Path myPath = new Path();
myPath.Stroke = Brushes.Black;
myPath.Fill = Brushes.LemonChiffon;
myPath.StrokeThickness = 1;
// Create a RectangleGeometry to specify the Path data.
RectangleGeometry myRectangleGeometry = new RectangleGeometry();
myRectangleGeometry.Rect = new Rect(0, 200, 100, 100);
myPath.Data = myRectangleGeometry;
myStackPanel.Children.Add(myPath);
// Assign the TranslateTransform a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"AnimatedRectangleGeometry", myRectangleGeometry);
// Create a RectAnimationUsingKeyFrames to
// animate the RectangleGeometry.
RectAnimationUsingKeyFrames rectAnimation
= new RectAnimationUsingKeyFrames();
rectAnimation.Duration = TimeSpan.FromSeconds(6);
// Set the animation to repeat forever.
rectAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Animate position, width, and height in first 2 seconds. LinearRectKeyFrame creates
// a smooth, linear animation between values.
rectAnimation.KeyFrames.Add(
new LinearRectKeyFrame(
new Rect(600,50,200,50), // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2))) // KeyTime
);
// In the next half second, change height to 10. DiscreteRectKeyFrame creates a
// sudden "jump" between values.
rectAnimation.KeyFrames.Add(
new DiscreteRectKeyFrame(
new Rect(600, 50, 200, 10), // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5))) // KeyTime
);
// In the final 2 seconds of the animation, go back to the starting position, width, and height.
// Spline key frames like SplineRectKeyFrame creates a variable transition between values depending
// on the KeySpline property. In this example, the animation starts off slow but toward the end of
// the time segment, it speeds up exponentially.
rectAnimation.KeyFrames.Add(
new SplineRectKeyFrame(
new Rect(0, 200, 100, 100), // Target value (KeyValue)
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4.5)), // KeyTime
new KeySpline(0.6, 0.0, 0.9, 0.0) // KeySpline
)
);
// Set the animation to target the Rect property
// of the object named "AnimatedRectangleGeometry."
Storyboard.SetTargetName(rectAnimation, "AnimatedRectangleGeometry");
Storyboard.SetTargetProperty(
rectAnimation, new PropertyPath(RectangleGeometry.RectProperty));
// Create a storyboard to apply the animation.
Storyboard rectStoryboard = new Storyboard();
rectStoryboard.Children.Add(rectAnimation);
// Start the storyboard after the rectangle loads.
myPath.Loaded += delegate(object sender, RoutedEventArgs e)
{
rectStoryboard.Begin(this);
};
Content = myStackPanel;
}
}
}
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Title="ThicknessAnimationUsingKeyFrames Example">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<Path Stroke="Black" StrokeThickness="1" Fill="LemonChiffon">
<Path.Data>
<RectangleGeometry x:Name="myRectangleGeometry" Rect="0,200,100,100" />
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the Rect property of the RectangleGeometry which causes the
rectangle to animate its position as well as its width and height. -->
<RectAnimationUsingKeyFrames
Storyboard.TargetName="myRectangleGeometry"
Storyboard.TargetProperty ="Rect"
Duration="0:0:6" FillBehavior="HoldEnd" RepeatBehavior="Forever">
<!-- Animate position, width, and height in first 2 seconds. LinearRectKeyFrame creates
a smooth, linear animation between values. -->
<LinearRectKeyFrame Value="600,50,200,50" KeyTime="0:0:2" />
<!-- In the next half second, change height to 10. DiscreteRectKeyFrame creates a
sudden "jump" between values. -->
<DiscreteRectKeyFrame Value="600,50,200,10" KeyTime="0:0:2.5" />
<!-- In the final 2 seconds of the animation, go back to the starting position, width, and height.
Spline key frames like SplineRectKeyFrame creates a variable transition between values depending
on the KeySpline property. In this example, the animation starts off slow but toward the end of
the time segment, it speeds up exponentially.-->
<SplineRectKeyFrame Value="0,200,100,100" KeyTime="0:0:4.5" KeySpline="0.6,0.0 0.9,0.00" />
</RectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</StackPanel>
</Page>
Полный пример см. в разделе Пример анимации с ключевыми кадрами.
См. также
Задачи
Пример анимации с ключевыми кадрами
Основные понятия
Общие сведения об анимации по ключевым кадрам
Ссылки
Другие ресурсы
Практические руководства, посвященные анимации по полным кадрам