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

В "Основы XAML" , "Основы XAML", вы научились с помощью XAML формировать визуальное представление графических элементов на экране, будь то векторная графика, растровые изображения (с помощью объекта Image ) или видео. В данной лекции будет рассмотрено, как улучшить представление этих графических элементов с помощью различных типов трансформаций (для изменения их вида) и анимации (для изменения атрибутов объекта во времени). Кроме того, будет представлена анимация по ключевым кадрам и описано их использование при создании более сложного поведения. В завершение мы опять ненадолго вернемся к Expression Blend и покажем, как его можно использовать для создания анимации.

Трансформации

В графике трансформация определяет, как точки из одного координатного пространства отображаются в другом координатном пространстве. Обычно это описывается с помощью матрицы трансформации (transformation matrix),специальной математической структуры, которая обеспечивает простое математическое преобразование из одной системы в другую. Silverlight XAML позволяет абстрагировать это, и в данном курсе мы не будем вдаваться в математические детали. Silverlight XAML поддерживает четыре вида трансформации элементов: вращение, масштабирование, наклон и трансляцию (перемещение), а также особый тип трансформации, который позволяет реализовывать собственную матрицу для сочетания трансформаций.

Трансформации реализуются через свойства трансформации. Существует несколько разных типов свойств трансформации, применяемых к разным типам объектов.

Так при использовании типа Brush трансформация определяется либо через свойство Brush.Transform (Трансформация кисти), если необходимо изменить содержимое кисти (например, если вы хотите повернуть изображение, прежде чем использовать его в ImageBrush ), либо с помощью свойства Brush.RelativeTransform (Относительная трансформация кисти), которое позволяет трансформировать кисть, используя относительные значения (это пригодиться при закрашивании одной кистью разных областей разных размеров).

Простые трансформации для типа Geometry выполняются с помощью свойства Geometry.Transform. Этот тип не поддерживает относительные трансформации.

Наконец, при использовании элемента пользовательского интерфейса (UI) трансформация задается через свойство RenderTransform. Например, трансформация эллипса будет выполняться с помощью свойства Ellipse.RenderTransform.

В следующем разделе будут рассмотрены разные типы трансформаций и показано использование этих свойств для конкретных типов объектов.

Вращение с помощью RotateTransform

RotateTransform позволяет поворачивать элемент на заданный угол вокруг заданной центральной точки. Угол поворота задается свойством Angle (Угол) в градусах. Примем за начало отсчета (0 градусов) горизонтальный вектор, направленный вправо. Пусть вращение выполняется по часовой стрелке,тогда вертикальный вектор, указывающий вниз, является результатом поворота на 90 градусов.

Координаты центра трансформации задаются свойствами CenterX и CenterY. По умолчанию центр трансформации имеет координаты 0.0, таким образом, ось вращения по умолчанию находится в верхнем левом углу контейнера.

Рассмотрим пример XAML-кода, в котором выполняется вращение TextBlock с помощью RenderTrans-form, содержащего RotateTransform, который определяет поворот на 45 градусов:

<TextBlock Width="320" Height="40" 
           Text="This is the text to rotate" TextWrapping="Wrap">
  <TextBlock.RenderTransform>
    <RotateTransform Angle="45" />
  </TextBlock.RenderTransform>
</TextBlock>

Как это выглядит, представлено на рис. 5.1.

Рис. 5.1. Использование свойства RotateTransform

Как видите, поворот этого текста был выполнен относительно центральной точки с координатами (0,0), т.е. верхнего левого угла.

В следующем XAML показано, как использовать CenterX и CenterY для выполнения вращения вокруг другой точки. В данном случае, поворот выполняется вокруг точки (100,200):

<TextBlock Width="320" Height="40" 
           Text="This is the text to rotate" TextWrapping="Wrap" >
  <TextBlock.RenderTransform>
    <RotateTransform Angle="45" CenterX="100" CenterY="200" />
  </TextBlock.RenderTransform>
</TextBlock>

Результаты этой трансформации представлены на рис. 5.2.

Рис. 5.2. Вращение вокруг другой центральной точки

Масштабирование с помощью ScaleTransform

ScaleTransform используется для изменения размера объекта в направлении по горизонтальной оси, вертикальной оси или в обоих направлениях.

При выполнении масштабирования объекта необходимо задать, по крайней мере, одну из осей масштабирования и то, на сколько должен быть изменен масштаб объекта по этой оси. Для масштабирования объекта по горизонтальной оси, оси х, используется свойство ScaleX, и для масштабирования по вертикальной оси, оси у, используется свойство ScaleY. Эти свойства принимают значения типа double, которые представляют, во сколько раз должен быть изменен объект в направлении по заданной оси. Следовательно, значения, больше 1, будут увеличивать объект. Например, если свойству ScaleX задать значение 2, это обеспечит увеличение размера объекта по горизонтали в два раза. Значения, меньше 1, но больше 0, будут обусловливать уменьшение объекта. Например, использование значения 0,5 приведет к уменьшению размера объекта вдвое в заданном направлении.

Итак, рассмотрим XAML-код, который обеспечивает создание красного прямоугольника шириной 96 пикселов и высотой 88 пикселов:

<Rectangle Fill="#FFFF0404" Stroke="#FF000000" 
           Width = "96" Height="88" 
           Canvas.Left="112" Canvas.Top="72" />

На рис. 5.3 показано, как это выглядит в Silverlight.

Рис. 5.3. Представление прямоугольника в Silverlight

Чтобы применить к этому объекту ScaleTransform, используется RenderTransform и задается трансформация ScaleTransform. Вот соответствующий XAML:

<Rectangle Fill="#FFFF0404" Stroke="#FF000000" 
           Width = "96" Height="88" Canvas.Left="112" Canvas.Top="72">
  <Rectangle. RenderTransform="">
    <ScaleTransform ScaleX="2" />
    </Rectangle.RenderTransform >
  </Rectangle>

На рис. 5.4 показано, как это выглядит в Silverlight.

Рис. 5.4. Масштабирование с помощью ScaleTransform

Можно заметить, что в результате применения ScaleTransform прямоугольник вытянулся вправо. Это произошло, потому что не был задан центр масштабирования. Для задания центра масштабирования используются свойства CenterX, для масштабировании по горизонтали, и CenterY, для масштабирования по вертикали. Эти свойства определяют координаты центра масштабирования. Эти координаты задаются относительно верхнего левого угла прямоугольника. Координата по умолчанию - 0, т.е. изменение размера будет происходить вправо и вниз.

Если свойству CenterX задать положительное значение (например, 50), масштабирование будет выполняться относительно точки X, смещенной на 50 пикселов вправо от левого края прямоугольника. В результате этого будет создаваться впечатление, что прямоугольник сместился на некоторое число пикселов (в зависимости от коэффициента масштабирования) относительно исходного положения. Это объясняется тем, что масштабирование выполняется относительно заданного центра, и левая часть прямоугольника увеличивается точно также, как и правая. Аналогичные результаты в вертикальном направлении можно получить, задавая ScaleY и CenterY. Рассмотрим пример:

<Rectangle Fill="#FFFF0404" Stroke="#FF000000" 
           Width="96" Height="88" Canvas.Left="80" Canvas.Top="80">
  <Rectangle.RenderTransform>
    <ScaleTransform ScaleX="2" CenterX="50"/>
  </Rectangle.RenderTransform>
</Rectangle>

Как в результате этого изменяется прямоугольник, можно увидеть на рис. рис. 5.5.

Рис. 5.5. Масштабирование относительно центра масштабирования

Перемещение объекта с помощью TranslateTransform

Трансляция (translation) - это трансформация путем перемещения объекта на плоскости из одного места в другое. Описывается она путем задания векторов, которые определяют перемещение объекта относительно осей х и у. Для этого используются свойства X и Y. Чтобы передвинуть элемент на две единицы по горизонтали (объект будет двигаться вправо), свойству X задается значение 2. Чтобы переместить элемент влево, используется отрицательное значение, например, -2. Аналогично, для перемещения объекта по вертикали применяется свойство Y. Задание ему положительных значений обусловит перемещение объекта вниз по экрану, тогда как отрицательные значения обеспечат перемещение объекта вверх.

Рассмотрим пример трансформации трансляцией, которая обеспечивает перемещение уже знакомого нам красного прямоугольника вверх и влево через задание свойств X и Y. Эти значения образуют вектор,определяющий трансформацию.

<Rectangle Fill="#FFFF0404" Stroke="#FF000000" 
           Width="96" Height="88" Canvas.Left="80" Canvas.Top="80">
  <Rectangle.RenderTransform>
    <TranslateTransform X="-50" Y="-50"/>
  </Rectangle.RenderTransform>
</Rectangle>

Результаты этой трансформации представлены на рис. 5.6. Прямоугольник переместился вверх и влево относительно его исходного положения (рис. 5.3).

Рис. 5.6. Использование свойства TranslateTransform