Трансформация и анимация в XAML

Анимация точки с помощью PointAnimation

Для изменения во времени значения, определенного как точка, используется тип PointAnimation. Анимация вычисляется как линейная интерполяция между значениями в заданный промежуток времени.

Аналогично тому, как это делалось для анимации цвета и объектов типа Double, исходное значение задается с помощью свойства From и конечное значение задается как относительное (используя By ) или как абсолютное (используя To ). Далее представлен пример анимации конечной точки кривой Безье:

<Path Stroke="Black" >
  <Path.Data>
    <PathGeometry>
      <PathFigure StartPoint="100,100">
        <QuadraticBezierSegment x:Name="seg" 
            Point1 = "200,0" Point2="300,100"  />
      </PathFigure>
    </PathGeometry>
  </Path.Data>
  <Path.Triggers>
    <EventTrigger RoutedEvent="Path.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <PointAnimation Storyboard.TargetName="seg" 
            Storyboard.TargetProperty="Point2" 
            From="300,100" To="300,600" Duration="0:0:5" />
        </Storyboard>
      </BeginStoryboard >
    </EventTrigger>
  </Path.Triggers>
</Path>

В данном случае кривая Безье описывается начальной точкой (100,100), конечной точкой (300,100) и опорной точкой (200,0). Задано, что анимация запускается после загрузки контура и обеспечивает перемещение конечной точки кривой ( Point2 ) от точки (300,100) в точку (300,600) в течение 5 секунд.

Использование ключевых кадров

Все рассматриваемые до сих пор типы анимации: Color Animation, DoubleAnimation и PointAnimation, -выполнялись путем изменения заданного свойства во времени с использованием линейной интерполяции. Например, при изменении значения типа double от 100 до 500 за 5 секунд, его приращение составляет 80 единиц в секунду.

Каждый из этих переходов может быть определен рядом промежуточных этапов, называемых ключевыми кадрами(key frames).Для изменения линейного поведения анимации от начального свойства к конечному используется один или более ключевых кадров. Затем задается, какой стиль анимации должен быть применен между различными точками.

Ключевые кадры определяются с помощью опорных моментов (key times).Это моменты, задаваемые относительно начала анимации и определяющие время окончания ключевого кадра. Итак, представим, что необходимо создать анимацию продолжительностью 9 секунд с тремя ключевыми кадрами, расположенными через равные промежутки времени друг от друга. Первый ключевой кадр можно задать в конце третьей секунды (0:0:3), второй - в конце шестой (0:0:6), и третий - в конце девятой (0:0:9). Вы не задаете продолжительность опорного момента, вы задаете время окончания каждого ключевого кадра.

В качестве еще одного примера возьмем анимацию объектов типа Double То есть для описания анимации объектов типа, с разделением промежутка 100 - 500 на две равные части. Анимация должна двигаться очень быстро первую половину пути и очень медленно вторую половину. Все перемещение должно занять 6 секунд. Поскольку средней точкой между 100 и 500 является 300, начало ключевого кадра определяем в точке 300. Указываем, что перемещение из начальной точкой в среднюю точку должно занять 1 секунду, используя опорный момент 0:0:1. Затем задаем продолжительность перемещения из средней точки в конечную точку равным 5 секундам, используя второй опорный момент, 0:0:6. Теперь элемент будет мгновенно перескакивать из начальной в среднюю точку и затем медленно проходить остальную часть пути.

В предыдущем примере оба сегмента анимации используют линейную интерполяцию. Для обеспечения дополнительной гибкости существует еще два типа ключевых кадров: ключевой кадр дискретной анимации, который мгновенно "перебрасывает" значение от одного значения к другому, и ключевой кадр сглаженной анимации, который обеспечивает плавное изменение значения, используя для определения интерполяции кривую второго порядка. (В следующих разделах будет рассмотрено описание анимации с использованием ключевых кадров для объектов типа Double. Аналогичные принципы применяются для анимации Point и Color.)

В наименованиях типов анимации с использованием ключевых кадров используется постфикс UsingKeyFrames (с использованием ключевых кадров). То есть для описания анимации объектов типа Double с ключевыми кадрами будет использоваться тип DoubleAnimationUsingKeyFrames, для которого будут заданы цель и свойство (точно также, как это делалось для DoubleAnimation). DoubleAnimationUsingKeyFrames включает описания ключевых кадров. (И как я уже говорил, то же самое касается PointAni-mationUsingKeyFrames и ColorAnimationUsingKeyFrames.)

Использование линейных ключевых кадров

Стандартным методом анимации изменения значений свойства является линейная интерполяция, при которой общая величина изменения равномерно распределяется по времени, отведенному на изменение. Другой способ - определение линейных шагов между кадрами с помощью LinearKeyFrame (Линейный ключевой кадр), в котором используется все та же линейная интерполяция, но между ключевыми кадрами, поэтому можно создавать эффекты ускорения/замедления.

Рассмотрим следующий пример анимации. В нем используется DoubleAnimationUsingKeyFrames. В этом случае определяются два ключевых кадра. Один кадр описывает линейную интерполяцию для изменения Canvas.Left от 0 до 300 за 1 секунду, второй - линейную интерполяцию для изменения Can-vas.Left от 300 до 600 за 8 секунд. В результате создается эффект быстрого перемещения прямоугольника в первой половине пути и медленного движения во второй. Аналогичные принципы применяются для LinearPointKeyFrame и LinearColorKeyFrame.

<Rectangle Fill="#FFFF0000" Stroke="#FF000000"
           Width="40" Height="40" Canvas.Top="40" x:Name="rect">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard >
        <Storyboard>
          <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rect" 
                            Storyboard.TargetProperty="(Canvas.Left)" >
            <LinearDoubleKeyFrame KeyTime="0:0:1" Value="300" />
            <LinearDoubleKeyFrame KeyTime="0:0:9" Value="600" />
          </DoubleAnimationUsingKeyFrames></Storyboard>
        </BeginStoryboard >
      </EventTrigger>
    </Rectangle.Triggers >
  </Rectangle>

Использование ключевых кадров дискретной анимации

Если необходимо изменить свойство от одного значения к другому, но без применения линейной интерполяции, можно использовать ключевой кадр дискретной анимации. Он заставит объект "перескочить" на заданное значение в заданное время ключевого кадра. Далее показан тот же пример, что был представлен выше, но с использованием ключевого кадра дискретной анимации. За 1 секунду анимации прямоугольник перепрыгнет полпути на экране. Остальные 8 секунд анимации он будет проходить оставшийся отрезок пути.

<Rectangle Fill="#FFFF0000" Stroke="#FF000000" 
           Width="40" Height="40" Canvas.Top="40" x:Name="rect">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rect" 
                           Storyboard.TargetProperty=" (Canvas.Left)" >
            <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="300" />
            <DiscreteDoubleKeyFrame KeyTime="0:0:9" Value="600" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard >
    </EventTrigger>
  </Rectangle.Triggers >
</Rectangle>

Аналогичные принципы применяются для DiscretePointKeyFrame и DiscreteColorKeyFrame.

Использование ключевых кадров сглаженной анимации

Для изменения свойства от одного значения к другому с использованием нелинейно изменяемого значения, обеспечивающим ускорение и замедление, применяется ключевой кадр сглаженной анимации. Для этого задается квадратическая кривая Безье. Тогда скорость изменения свойства от одного значения к другому определяется параллельной проекцией этой кривой.

Чтобы представить это, возьмем наглядный пример: солнце стоит прямо над головой, вы посылаете футбольный мяч в дальнюю часть поля. Проследите за тенью мяча. Пока он летит вверх, кажется, что тень движется с ускорением. Когда он достигает верхней точки, тень замедляет ход. Когда мяч начинает падать, скорость тени опять начинает возрастать до тех пор, пока мяч не упадет на землю.

Теперь представьте, что ваша анимация - это тень мяча, а плавная линия - это траектория мяча. Траектория, плавная линия или сплайн, описывается с помощью KeySpline (Опорная сглаженная линия). KeySpline определяет опорные точки квадратической кривой Безье. Кривая нормализована, так что первая точка кривой находится в 0, вторая - в 1. Для описания параболической дуги, именно по такой траектории падает мяч, KeySpline будет включать два нормализованных значения через запятую.

Описать кривую, по которой двигается мяч, можно с помощью сглаженной линии, используя KeySpline, например 0.3,0 0.6,1. Здесь задается первая (0.3,0) и вторая (0.6,1) точки кривой. В результате будет создан эффект быстрого ускорения анимации в первой трети пути, затем перемещение будет происходить с постоянной скоростью до прохождения примерно двух третей траектории мяча, и затем оставшуюся часть пути движение будет замедляться, имитируя падения мяча на землю.

Далее представлен пример использования KeySpline для описания сглаженной кривой при моделировании такого движения с помощью анимации DoubleAnimationUsingKeyFrames:

<Ellipse Fill= "#FF444444" Stroke="#FF444444" 
         Width = "40" Height="40" Canvas.Top="40" x:Name="ball">
  <Ellipse.Triggers>
    <EventTrigger RoutedEvent="Ellipse.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ball" 
                           Storyboard.TargetProperty=" (Canvas.Left)" >
            <SplineDoubleKeyFrame KeyTime="0:0:5" 
                          KeySpline="0.3,0 0.6,1" Value="600" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard >
    </EventTrigger>
  </Ellipse.Triggers>
</Ellipse>

В этом примере выполняется анимация эллипса. Его перемещение по экрану моделирует движение тени мяча, если смотреть на нее сверху.