Раскадровка
46WPF --- Графика и анимация WPF --- Раскадровка
Как уже было показано, анимации WPF представлены группой классов анимации. Существенная информация, такая как начальное значение, конечное значение и длительность, задается с помощью нескольких свойств. Это очевидно делает их удобными для использования в XAML-разметке. Что менее ясно — так это каким образом привязать анимацию к конкретному элементу и свойству, и как инициировать ее в нужное время.
В результате, в любой декларативной анимации должны присутствовать два описанных ниже ингредиента:
- Раскадровка
Это XAML-эквивалент метода BeginAnimation(). Он позволяет направить анимацию на корректный элемент и свойство.
- Триггер события
Отвечает за изменение свойства или события (такого как Click для кнопки) и управляет раскадровкой. Например, чтобы запустить анимацию, триггер события должен начать раскадровку. В последующих разделах вы узнаете, как работают оба ингредиента.
Раскадровка (storyboard) — это усовершенствованная временная шкала. Ее можно применять для группирования множества анимаций и, кроме того, она позволяет управлять воспроизведением анимации — приостанавливать ее, прекращать и изменять текущую позицию. Однако самым базовым средством, предлагаемым классом StoryBoard, является способность указывать на определенное свойство и определенный элемент, используя свойства TargetProperty и TargetName. Другими словами, раскадровка заполняет пробел между анимацией и свойством, для которого должна осуществляться анимация.
TargetProperty и TargetName представляют собой присоединенные свойства. Это означает, что их можно применять непосредственно к анимации. Ниже показано, как определить раскадровку, которая управляет анимацией DoubleAnimation:
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="300"
Duration="0:0:2"></DoubleAnimation>
</Storyboard>
Приведенный синтаксис более распространен, поскольку он позволяет поместить несколько анимаций в одну раскадровку, но при этом позволяет каждой анимации воздействовать на разные элементы и свойства.
Определение раскадровки — первый шаг в создании анимации. Чтобы действительно запустить эту раскадровку, понадобится триггер события.
Использование триггеров событий для запуска анимации
Триггер события может быть определен в четырех местах:
в стиле (коллекция Styles.Triggers);
в шаблоне данных (коллекция DataTemplate.Triggers);
в шаблоне элемента управления (коллекция ControlTemplate.Triggers);
непосредственно в элементе (коллекция FrameworkElement.Triggers).
При создании триггера события нужно указать маршрутизируемое событие, которое запускает триггер, и действие (или действия), выполняемые триггером. В случае анимаций наиболее часто используемым действием является BeginStoryboard, которое эквивалентно вызову BeginAnimation().
В следующем примере коллекция Triggers кнопки применяется для присоединения анимации к событию Click. После щелчка кнопка начинает расти:
<Button MaxHeight="50" Width="160" Padding="5" Name="btn1"
Click="btn_Click" Margin="0,10,0,10" Content="Щелкни и я расширюсь ;)">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Width" To="300"
Duration="0:0:2"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
Свойство Storyboard.TargetProperty идентифицирует свойство, которое должно изменяться (в данном случае — Width). Если имя класса не указано, то раскадровка использует родительский элемент, которым является расширяемая кнопка. Чтобы установить присоединенное свойство (например, Canvas.Left или Canvas.Тор), все свойство понадобится заключить в скобки, например:
<DoubleAmmation Storyboard.TargetProperty="(Canvas.Left)" ... />
Свойство Storyboard.TargetName в данном примере не требуется. Если оно опущено, то раскадровка использует родительский элемент, которым является кнопка.
Все триггеры событий способны выполнять действия. Все действия представлены классами, унаследованными от System.Windows.TriggerAction. В настоящее время WPF включает очень небольшой набор действий, предназначенных для взаимодействия с раскадровкой и управления воспроизведением.
Существует разница между представленным здесь декларативным подходом и подходом на основе только кода, который был продемонстрирован выше. В частности, значение То жестко закодировано в 300 единиц, а не установлено относительно содержащего кнопку окна. Чтобы использовать ширину окна, понадобится указать выражение привязки данных.