Главная » Silverlight » Классы анимации

0

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

Пивная проблема состоит в правильном выборе анимируемого свойства. Преодолеть пропасть между желаемым результатом (например, перемещением элемента по страни­це) и необходимым для этого анимируемым свойством (в данном случае Canvas.Left и Canvss.Top) не всегда легко. Чтобы облегчить ее преодоление, руководствуйтесь сле­дующими правилами.

Рис. 10.6. Графики смягчающих функций разных типов

можно реализовать, анимируя такие свойства, как Margin и Padding, с помощью класса ThicknessAnimation. Можно также анимировать свойства MinWidth или MinHeight, а также столбец или строку контейнера Grid.

На практике чаще всего анимируют объекты преобразований (см. главу 9). Их можно использовать для перемещения или зеркального отражения элемента (объект TranslateTransform), поворота (объект RotateTransform), изменения раз­меров или растягивания элемента (объект ScaleTransform) и т.д. При правильном использовании они позволяют избежать жесткого кодирования размеров и пози­ций. Кроме того, объект TranslateTransform позволяет перемещать элементы в контейнерах Grid так же, как и в Canvas.

Хороший способ плавного изменения поверхности элемента состоит в анимации свойств кисти. Класс ColorAnimation можно использовать для изменения цвета.

Другие объекты анимации применяются для изменения свойств более сложных кистей, например для изменения смещения градиента.

В приведенных ниже примерах демонстрируется анимация объектов преобразова­ний и кистей, а также использование нескольких других классов анимации. Кроме того, будет рассмотрена сегментированная анимация на основе ключевых кадров.

Анимация объектов преобразований

Объекты преобразований предоставляют мощные способы настройки внешнего вида элементов. При их использовании обновляются не просто границы элемента, а все его содержимое. Элемент можно перемещать, зеркально отражать, наклонять, растяги­вать, увеличивать, сокращать, поворачивать. Например, при анимировании размеров кнопки с помощью объекта ScaleTransform увеличивается не только рамка кнопки, но и внутренняя надпись: эффект намного более впечатляющий, чем при анимировании свойств Width, Height и FontSize.

Чтобы применить в анимации класс преобразований, в первую очередь нужно опре­делить его объект. Анимация может изменить существующий объект преобразований, но не создать его. Предположим, нужно плавно повернуть кнопку. Для этого использу­ется объект RotateTransform.

<Button Content="A Button"> <Button.RenderTrans form> <RotateTransform></RotateTransform>

</Button.RenderTransform>

</Button>

Совет. Вы легко можете комбинировать преобразования. Фактически для этого необходимы лишь объект Trans- formGroup и свойство RenderTransform. В объект TransformGroup можно вложить произвольное количество преобразований (см. игру с перехватом бомб).

Ниже приведена разметка анимации, поворачивающей кнопку при наведении на нее указателя. Анимация изменяет объект Button.RotateTransform и целевое свойство Angle. Свойство RenderTransform может содержать набор разных объектов преобра­зований, каждый с разными свойствами. Для анимации достаточно определить угол поворота в объекте преобразования.

<Storyboard х: Name="rotateStoryboard"> <DoubleAnimation

Storyboard.TargetName="cmd.RenderTrans form" Storyboard.TargetProperty="Angle" To="360" Duration="0:0:0.8" RepeatBehavior="Forever"></DoubleAnimation>

</Storyboard>

Если поместить эту анимацию в коллекцию Resources страницы, ее можно запу­скать при наведении указателя на кнопку.

private void cmd_MouseEnter(object sender, MouseEventArgs e)

(

rotateStoryboard.Begin();

Кнопка поворачивается каждые 0,8 секунды и продолжает поворачиваться беско­нечно. Когда кнопка поворачивается, ее можно использовать, например щелкнуть на ней и обработать событие Click.

Чтобы кнопка поворачивалась вокруг центральной точки, а не левого верхнего угла, установите свойство RenderTransformOrigin следующим образом.

<Button Content="One" Margin="5" RenderTransform0rigin="0.5,0.5"

MouseEnter="cmd_MouseEnter"> <Button.RenderTransform>

<RotateTransformx/RotateTransform> </Button.RenderTransform> </Button>

He забывайте, что в свойстве RenderTransformOrigin используются относительные значения от 0 до 1. Поэтому значение 0.5,0.5 представляет центральную точку объекта.

Чтобы прекратить вращение, нужно установить реакцию на событие MouseLeave. Можно остановить раскадровку, выполняющую вращение, но тогда кнопка одним скач­ком вернется к исходной ориентации. Лучше запустить вторую анимацию, замещающую первую. Вторая анимация плавно вернет кнопку к исходной ориентации за 0,2 секунды.

<Storyboard x:Name="unrotateStoryboard"> <DoubleAnimation

Storyboard.TargetName="cmd.RenderTransform" Storyboard.TargetProperty="Angle" Duration="0:0:0.2"> </DoubleAnimation> </Storyboard>

Ниже приведен код обработчика события.

private void cmd_MouseLeave(object sender, MouseEventArgs e) {

unrotateStoryboard.Begin ();

}

Написав еще немного кода, можно применить эти два обработчика и две анимации к ряду поворачивающихся кнопок (рис. 10.7). Обработка событий всех кнопок выполня­ется одним и тем же кодом, а метод Storyboard. SetTarget () динамически присваивает целевое свойство раскадровки текущей кнопке.

private void cmd_MouseEnter(object sender, MouseEventArgs e) {

rotateStoryboard.Stop (); Storyboard.SetTarget(rotateStoryboard,

((Button)sender).RenderTransform); rotateStoryboard.Begin();

}

private void cmd_MouseLeave(object sender, MouseEventArgs e) {

unrotateStoryboard. Stop (); Storyboard.SetTarget(unrotateStoryboard, ((Button)sender).RenderTransform); unrotateStoryboard.Begin();

}

Рассмотренному способу присущи два ограничения. Первое состоит в том, что в коде повторно используется одна и та же раскадровка для всех кнопок, поэтому не существу­ет способа заставить две кнопки вращаться одновременно. Например, если быстро про­вести указателем по нескольким кнопкам, первая кнопка, из которой вышел указатель, быстро перескочит в исходное состояние, потому что раскадровка теперь управляется другой кнопкой. Чтобы решить эту проблему, нужно создавать раскадровки динамиче­ски в коде. Далее мы рассмотрим этот способ на примере игры с перехватом бомб.

Рис. 10.7. Использование объекта преобразований

Второе ограничение состоит в том, что необходима громоздкая разметка для определе­ния пустых полосок, обработчиков событий и объектов преобразований для каждой кноп­ки. Упростить разметку можно с помощью стилей, применяющих одинаковые параметры к разным кнопкам (см. главу 12), или путем программного конфигурирования кнопок.

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

  • Комментарии