Анимация в XAML-графике
| № | Код | Вид в браузере |
|---|---|---|
| 7.7.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left ="5"
Canvas.Top="5" Width="190"
Height="90" Stroke="green"
StrokeThickness="2" Fill="Transparent" />
<Rectangle Canvas.Top="40"
Width="20" Height="20"
Fill="red" x:Name="myRectangle">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="
Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="my
Rectangle"
Storyboard.TargetProperty="(Canvas.Left)" >
<DiscreteDoubleKeyFrame Key
Time="0:0:1" Value="100" />
<DiscreteDoubleKeyFrame Key
Time="0:0:3" Value="180" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas> |
||
| Описание | ||
| После загрузки, через одну секунду прямоугольник оказывается в точке 100. Затем спустя еще две секунды он перемещается в точку 180 | ||
| № | Код | Вид в браузере |
| 7.7.2 | ||
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<Ellipse Canvas.Left="40" Canvas.
Top="10" Width="120" Height="80"
Fill="LightPink" Stroke="LightCoral"
StrokeThickness="4" x:Name="FirstEllipse">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="FirstEllipse"
Storyboard.TargetProperty="Height" >
<DiscreteDoubleKeyFrame
KeyTime="0:0:1" Value="80" />
<DiscreteDoubleKeyFrame KeyTime=
"0:0:3" Value="40" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<Ellipse Canvas.Left="40" Canvas.
Top="110" Width="120" Height="80"
Fill="Yellow" Stroke="Orange"
StrokeThickness="4" x:Name="
SecondEllipse">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="SecondEllipse"
Storyboard.TargetProperty="Height" >
<DiscreteDoubleKeyFrame Key
Time="0:0:1" Value="80" />
<DiscreteDoubleKeyFrame Key
Time="0:0:3" Value="40" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Canvas> |
||
| Описание | ||
| Использование дискретных опорных кадров для двух объектов. Эллипсы одновременно, скачком, меняют свои размеры | ||
Для поддержки элементов ColorAnimation, PointAnimation в случае дискретных опорных кадров используются элементы DiscreteColorKeyFrame и DiscretePointKeyFrame.
Опорные кадры сплайна
Представим себе автомобиль, стоящий на перекрестке. После того, как на светофоре появится зеленый свет, автомобиль начнет ускоряться. Достигнув положенных в городе 60 км.\ч, некоторое время он будет двигаться равномерно. Затем, подъезжая к следующему перекрестку, автомобиль начнет тормозить и полностью остановится.
Будем считать, что три участка – разгон, движение и торможение примерно равны между собой. Тогда общее перемещение автомобиля можно представить в виде кривой (сплайна) KeySpline="0.3,0 0.6,1". Здесь точки (0.3, 0) и (0.6,1) определяют квадратичную кривую Безье. Эта кривая нормализована так, что первой точкой кривой является 0.0, вторая 1.1. Пример анимации, использующий описанный сплайн, приводится в табл. 7.8.
| № | Код | Вид в браузере |
|---|---|---|
| 7.8.1 | ||
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left ="5"
Canvas.Top="5" Width="190"
Height="90" Stroke="green"
StrokeThickness="2" Fill="Transparent" />
<Rectangle Canvas.Top="40"
Width="20" Height="20"
Fill="red" x:Name="myRectangle">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="
Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName=
"myRectangle"
Storyboard.TargetProperty=
"(Canvas.Left)" >
<SplineDoubleKeyFrame Key
Time="0:0:9"
KeySpline="0.3,0 0.6,1"
Value="200" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas> |
||
| Описание | ||
| Прямоугольник разгоняется примерно до одной трети своего пути, затем треть двигается равномерно, а к концу начинает замедляться. При определении значений важно помнить, что координаты фигур по-прежнему отсчитываются относительно верхней левой точки | ||
Варьируя значения атрибута KeySpline можно получать различные варианты замедления и ускорения анимации.