Спонсор: Microsoft
Опубликован: 23.01.2009 | Уровень: для всех | Доступ: платный
Лекция 7:

Анимация в XAML-графике

Таблица 7.7. Анимация с дискретными опорными кадрами
Код Вид в браузере
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. Анимация с опорными кадрами сплайна
Код Вид в браузере
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 можно получать различные варианты замедления и ускорения анимации.

Илья Столупин
Илья Столупин
Россия
Олег Борхаленко
Олег Борхаленко
Украина