<Setter.Value>

<ControlTemplate TargetType= {x:Type Button} > <Grid>

<Rectangle Name= outline RadiusX= 9 RadiusY= 9 Stroke= Black

Fill= {TemplateBinding Background} StrokeThickness= 0.4 > </Rectangle>

<ContentPresenter VerticalAlignment= Center HorizontalAlignment= Center

/>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property= IsMouseOver Value= True > <Trigger.EnterActions> <BeginStoryboard> <Storyboard>

<DoubleAnimation Duration= 0:0:0.3 AutoReverse= True

Storyboard.TargetProperty=

(Rectangle.StrokeThickness) Storyboard.TargetName= outline By= 1.2 />

</Storyboard> </BeginStoryboard> </Trigger.EnterActions>

</Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>

</Window.Resources>

<Grid>

<Button Style= {StaticResource MyButtonStyle} Width= 200 Height= l00 > Click Me!

</Button> </Grid> </Window>

Свойства класса Timeline перечислены в табл. 35.4.

Рис. 35.19. Кнопка без анимации

Рис. 35.20. Кнопка в момент через 0.3 секунды после начала движения мыши

Таблица 35.4. Свойства класса Timeline

Свойство

AutoReverse

SpeedRatio

BeginTime

AccelerationRatio DecelerationRatio

Duration

RepeatBehavior

FillBehavior

Описание

Свойством AutoReverse вы можете специфицировать, должно ли значение, подверженное анимации, возвращаться в свое исходное значение по ее окончанию.

SpeedRatio позволяет изменять скорость продвижения анимации. Этим свойством вы можете определить отношение к родителю. По умолчанию оно равно 1; установка в меньшее значение замедляет анимацию, установка в значение больше 1 заставляет ее продвигаться быстрее.

Посредством BeginTime можно указать задержку между стартом события триггера и моментом запуска анимации. Здесь можно задавать дни, часы, минуты, секунды и доли секунды. Значение может не отражать реальное время, в зависимости от временного масштаба - SpeedRatio. Например, если временной масштаб установлен равным 2, а время запуска - 6 секунд, то анимация запустится через 3 секунды.

При анимации значения не обязаны изменяться линейным образом. Вы можете специфицировать AccelerationRatio и DecelerationRatio, чтобы задать ускорение и замедление. Сумма обоих значений не должна превышать 1.

Свойство Duration позволяет указать длительность времени одной итерации анимации.

Присвоение структуры RepeatBehavior свойству RepeatBehavior позволяет определить, сколько раз либо насколько долго должна повторяться анимация.

Свойство FillBehavior важно в том случае, если родительская временная шкала имеет другую длительность. Например, если временная шкала родителя короче, чем шкала данной анимации, установка FillBehavior в Stop означает, что данную анимацию следует остановить. Если же временная шкала родителя длиннее, чем продолжительность данной анимации, то HoldEnd оставляет текущую анимацию активной перед тем, как сбросить ее в исходное значение (если установлено AutoReverse).

В зависимости от типа класса Timeline, могут быть доступны и некоторые другие свойства. Например, в классе DoubleAnimation вы можете специфицировать дополнительные свойства, перечисленные в табл. 35.5.

Таблица 35.5. Свойства класса DoubleAnimation

Свойство

Описание

From

To By

Устанавливая свойства From и To, вы можете специфицировать значения для запуска и завершения анимации.

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

Триггеры

Вместо использования триггера свойств можно определить триггер события, чтобы запустить анимацию. Следующий пример иллюстрирует создание анимации с забавной рожицей, знакомой вам по предыдущим примерам, у которой глаза будут перемещаться, как только случится событие щелчка на кнопке. Этот пример также демонстрирует возможность запуска анимации как из кода XAML, так и из отделенного кода.

На рис. 35.21 показан дизайн примера анимации нашей рожицы.

Рис. 35.21. Дизайн примера анимации

Внутри элемента Window определен элемент DockPanel, чтобы упорядочить картинку и кнопки. Grid, содержащий элемент Canvas, пристыкован вверху. Пристыковка внизу конфигурируется элементом StackPanel, содержащим чет1ре кнопки. Первые две из них используются для анимации глаз из отделенного кода; последние две используются для анимации глаз из XAML.

Анимация определена внутри раздела <DockPanel.Triggers>. Вместо триггера свойств используется триггер события. Первый триггер события срабатывает, как только возникает событие Click в кнопке startButtonXAML, что задано свойствами RoutedEvent и SourceName. Действие триггера определено элементом BeginStoryboard, с которого начинается содержащий его Storyboard. Элемент BeginStoryboard имеет определенное имя, поскольку оно необходимо для целей управления - действий паузы, продолжения и останова. Элемент Storyboard содержит две анимации. Первая изменяет значение позиции Canvas.Left глаза, а вторая изменяет значение Canvas.Top. Обе анимации имеют разные временные значения, что делает движение глаз очень интересным за счет различного поведения повторов.

Второй триггер события срабатывает, как только возникает событие Click кнопки stopButtonXAML. Здесь раскадровка останавливается элементом StopStoryboard, ссылающимся на запущенную раскадровку beginMoveEye.

<Window x:Class= AnimatedFace.Windowl

xmlns= http: schemas.microsoft.com/winfx/20 06/xaml/presentation

xmlns:x= http: schemas.microsoft.com/winfx/200 6/xaml

Title= Face Animation Height= 300 Width= 406 > <DockPanel>

<Grid DockPanel.Dock= Top > <!-- Funny Face -- >

<Canvas Width= 200 Height= 200 >

<Ellipse Canvas.Left= 50 Canvas.Top= 50 Width= l00 Height= l00

Stroke= Blue StrokeThickness= 4 Fill= Yellow /> <Ellipse Canvas.Left= 60 Canvas.Top= 65 Width= 25 Height= 25

Stroke= Blue StrokeThickness= 3 Fill= White /> <Ellipse Name= eye Canvas.Left= 67 Canvas.Top= 72 Width= 5

Height= 5 Fill= Black />