Главная » Silverlight » Пример простой анимации

0

Процесс разработки анимации состоит из многих этапов. Нужно создать три от­дельных компонента: объект анимации, изменяющий свойства; объект раскадровки (stroyboard), управляющий анимацией; обработчик события (триггер события), запуска­ющий раскадровку. В следующих разделах подробно рассматривается создание каждо­го компонента.

Класс анимации

В Silverlight существует два вида классов анимации. В каждом виде используется определенная стратегия изменения свойства.

•       Линейная интерполяция. Свойство плавно (по линейному закону) изменяется на протяжении заданного интервала времени. К этому виду относятся три клас­са анимации: DoubleAnimation, PointAnimation и ColorAnimation.

•       Анимация на основе ключевых кадров. Свойства изменяются от одних клю­чевых значений к другим либо скачками, либо плавно на основе линейной интерполяции. К этому виду относятся четыре класса анимации: ColorAnima- tionUsingKeyFrames, DoubleAnimationUsingKeyFrames, PointAnimationUsingKey- Frarnes и ObjectAnimationUsingKeyFrames.

В этой главе внимание сосредоточено на самом популярном и незаменимом клас­се DoubleAnimation, в котором для изменения вещественного значения с двойной точ­ностью от начального до конечного состояния используется линейная интерполяция.

Анимация определяется в разметке XAML. Классы анимации не являются элемента­ми Silverlight, однако для их создания используется тот же синтаксис XAML. Например, приведенная ниже разметка создает объект анимации вида DoubleAnimation.

<DoubleAnimation From="160" То="300" Duration="0:0:5">

</DoubleAnimation>

Данная анимация длится 5 секунд. Это определено в свойстве Duration, в кото­ром используется стандартный формат времени: часы:минуты:секунды:доли_секунды. В процессе анимации целевое значение изменяется от 160 до 300. Используется линей­ная интерполяция, поэтому целевое свойство изменяется непрерывно и плавно.

В приведенной выше разметке недостает важной детали. В ней указано, как изменя­ется свойство, но не указано, какое свойство изменяется. Для задания свойства необхо­дим другой компонент анимации, представленный классом Storyboard (Раскадровка).

Класс Storyboard

Система раскадровки управляет временной шкалой анимации (timeline). Раскадровка используется для группирования нескольких анимаций. Кроме того, с помощью раска­дровки можно управлять воспроизведением: создавать паузы, останавливать анима­цию, изменять позицию и т.д. Однако наиболее важная функция класса Storyboard — задание конкретных целевых элемента и свойства с помощью свойств TargetName и TargetProperty. Иными словами, раскадровка заполняет брешь между анимацией и анимируемыми свойствами.

Ниже приведено определение объекта раскадровки, который применяет класс ани­мации DoubleAnimation к свойству Width кнопки cmdGrow.

<Storyboard x:Name="storyboard" Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width">

<DoubleAnimation From="160" To="300" Duration="0:0 :5"> </DoubleAnimation>

</Storyboard>

Свойство Storyboard. TargetProperty раскадровки определяет изменяемое свойство элемента (в данном примере — свойство Width). Если не указать имя класса, в раска­дровке используется родительский элемент. Чтобы установить подключенное свойство (например, Canvas . Left или Canvas . Тор), нужно заключить его в скобки.

<Storyboard х:Name="storyboard" Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="(Canvas.Left)">

</Storyboard>

Свойства TargetName и TargetProperty сами являются подключенными. Это означа­ет, что их можно использовать непосредственно в анимации.

<Storyboard x:Name="storyboard"> <DoubleAnim_ation

Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width"

From="160" To="300" Duration="0:0:5"></DoubleAnimation>

</Storyboard»

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

Запуск анимации с помощью триггера события

Определение раскадровки и объекта анимации — первый этап создания анимиро- ванной сцены. Однако нужно еще и запустить раскадровку с помощью триггера собы­тия. Реакцией триггера на событие является запуск раскадровки. В текущей версии Silverlight поддерживается только один триггер BeginStroyboard, запускающий раска­дровку и все определенные в ней объекты анимации.

В приведенном ниже примере принадлежащая странице коллекция триггеров Triggers подключает анимацию к событию Loaded. При первой прорисовке содержи­мого Silverlight в браузере и загрузке элемента страницы кнопка начинает увеличивать­ся. За 5 секунд ее ширина увеличивается от 160 до 300 пикселей.

<UserControl … > <UserControl.Triggers» <EventTrigger> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width" From="160" To="300" Duration="0:0:5"» </DoubleAnimation> </Storyboard> </BeginStoryboard> </EventTrigger.Actions» </EventTrigger>

</UserControl.Triggers» <Grid x:Name="LayoutRoot" Background="White"> <Button x:Name="cmdGrow" Width="160" Height="30" Content="Этa кнопка увеличивается"></Вutton> </Grid>

</UserControl>

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

Запуск анимации в коде

Запустить анимацию в ответ на любое событие можно с помощью кода, взаимодей­ствующего с объектом раскадровки. В первую очередь нужно переместить объект рас­кадровки за пределы коллекции Triggers, поместив ее в другую коллекцию этого же элемента — коллекцию Resources.

Как показано в главе 1, элементы Silverlight предоставляют свойство Resources, со­держащее коллекцию, в которой могут храниться разные объекты. Піавное назначение коллекции Resources — позволить определять в разметке XAML объекты, которые не являются элементами и, следовательно, не могут быть размещены в визуальной струк­туре области содержимого. Например, в качестве ресурса можно объявить кисть Brush, чтобы разрешить ее использование не в одном, а в нескольких элементах. Ресурсы мож­но извлекать в коде и применять их в любом месте разметки.

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

<UserControl … > <UserControl.Resources> <Storyboard x:Name="storyboard"> <DoubleAnimation Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width" From="160" To="300" Duration="0:0:5"> </DoubleAnimation> </Storyboard> </UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White"> <Button x:Name="cmdGrow" Width="160" Height="30" Content="Этa кнопка увеличивается"></Вutton> </Grid>

</UserControl>

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

Теперь достаточно вызвать нужный метод через объект Storyboard в обработчике события, определенном в фоновом коде Silverlight. Доступны методы Begin (), Stop (), Pause(), Resume() и Seek().

private void Button_Click(object sender, RoutedEventArgs e)

(

storyboard.Begin();

}

Щелчок на кнопке запускает анимацию. После щелчка ширина кнопки увеличива­ется от 160 до 300 пикселей.

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

По теме:

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