Управление анимацией с помощью триггеров

Expression Blend --- Основы работы --- Управление анимацией с помощью триггеров

Назначение триггеров на платформе WPF было ранее определено как способ реагирования в разметке на условия наступления событий, а в предыдущем примере проекта было продемонстрировано действие простого триггера на практике. Для более подробного ознакомления со средой триггеров на платформе WPF создайте новый проект приложения WPF, присвоив ему имя WPFAnimationTriggerApp.

В данном примере проекта вам предстоит создать новую раскадровку анимации, в ходе которой объект типа Button совершает полный оборот. Сначала добавьте новый объект типа Button на монтажном столе, присвойте ему имя btnSpin и установите подходящее значение в его свойстве Content. Затем создайте новую раскадровку, присвоив ей имя SpinButtonAnimation (анимация вращения кнопки); напомним, что для этого достаточно щелкнуть на кнопке со знаком + на панели Objects and Timeline. И наконец, определите односекундный промежуток времени на временной шкале, введя два ключевых кадра анимации выбранного элемента управления начиная с нульсекундной отметки:

А теперь выберите объект типа Button на монтажном столе и поверните его на 360 градусов воспользовавшись мышью. Напомним, что графические преобразования объектов можно выполнять непосредственно на монтажном столе. В данном случае поместите мыши с внешней стороны одного из углов кнопки, нажмите кнопку мыши и, не отпуская , переместите курсор в нужном направлении вращения кнопки:

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

<Window
                  ...
	<!-- Объекты раскадровки используются как ресурсы -->
	<Window.Resources>
		<Storyboard x:Key="SpinButtonAnimation">
			<DoubleAnimationUsingKeyFrames 
			       Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" 
				   Storyboard.TargetName="btnSpin">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-360"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</Window.Resources>
	
	<!-- Этот триггер запускает раскадровку SpinButtonAnimation, когда объект
	     Window загружается в оперативную память -->
	<Window.Triggers>
		<EventTrigger RoutedEvent="FrameworkElement.Loaded">
			<BeginStoryboard Storyboard="{StaticResource SpinButtonAnimation}"/>
		</EventTrigger>
	</Window.Triggers>
    
    ...

Вернитесь сначала к виду рабочего пространства конструирования (Design), нажав функциональную клавишу <F6>, если вы еще не сделали этого, а затем наидите панель Triggers (Триггеры). В рабочем окне Expression Blend IDE она находится рядом с анелью Assets но ее, как, впрочем, и любую другую панель в этой среде можно показывать и скрывать по соответствующей команде, выбираемой из меню Window.

На панели Triggers доступен один и только один триггер для текущего объекта типа Window, а именно: триггер, запускающий анимацию по раскадровке SpinButtonAnimation после загрузки главного окна приложения в оперативную память.

В верхней области панели Triggers находятся три выбираемые кнопки, с помощью которых можно взаимодействовать с перечисленными ниже типами триггеров на платформе WPF:

Триггер события

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

Триггер свойства

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

С помощью кнопки +Event можно вводить новый триггер события, с помощью кнопки +Property — новый триггер свойства, запускающий анимацию по раскадровке при изменении свойства выбранного объекта, а с помощью кнопки -Trigger — удалять выбранный в настоящий момент триггер из редактора или разметки.

Глядя на настройку текущего триггера, приведенную на рисунке выше, можно заметить, что этот триггер отслеживает событие Window.Loaded, обозначенное знаком молнии слева от его имени. Ниже списка текущих триггеров находится ряд раскрывающихся списков, с помощью которых составляется простое и удобочитаемое предложение, описывающее то, что происходит при срабатывании триггера. Ниже приведен общий шаблон такого предложения:

When objectName.eventOnObject is raised storyboardName.storyboardAction

В настоящий момент это предложение гласит: "При наступлении события objectName.eventOnObject запускается анимация по раскадровке storyboardName.storyboardAction. Итак, удалите текущий триггер полностью, выделив элемент списка Window.Loaded и щелкнув на кнопке -Trigger.

А теперь введите новый триггер, который начнет анимацию по раскадровке SpinButtonAnimation, если щелкнуть на самой кнопке. Для этого щелкните сначала на кнопке +Event, а затем выберите объект типа Button по его имени из раскрывающегося списка When. После этого выберите событие Click:

Если не можете найти объект для настройки триггера события на панели Triggers, убедитесь в том, что этот объект выбран в соответствующем узле иерархического представления на панели Objects and Timeline panel! По умолчанию на панели Triggers отображаются варианты выбора только для самого верхнего в иерархии объекта типа Window и выбранного в настоящий момент элемента пользовательского интерфейса.

Выбрав объект и условие наступления события, щелкните на кнопке со знаком + — самой последней в определении триггера. В итоге появится дополнительная часть пользовательского интерфейса панели Triggers, где вы можете выбрать любую раскадровку из теку щего документа. В данном случае выберите сначала раскадровку SpinButtonAnimation, а затем команду, позволяющую начать анимационную последовательность. Обратите внимание на то, что, помимо команды начать анимацию, можно также выбрать другие команды управления анимацией:

Эти команды аналогичны тем что применяются непосредственно в коде для управления анимациеи. Если после этого вы запустите свое приложение на выполнение, нажав функциональную клавишу <F5> или комбинацию клавиш <Ctrl+F5>, то обнаружите, что кнопка начнет вращаться только после того, как вы щелкнете на ней. А если вы проанализируете разметку автоматически сформированную в коде XAML, то заметите, что теперь триггер описывается в ней так, как показано ниже:

<Window.Triggers>
		<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="btnSpin">
			<BeginStoryboard Storyboard="{StaticResource SpinButtonAnimation}"/>
		</EventTrigger>
	</Window.Triggers>