Нашли ошибку или опечатку? Выделите текст и нажмите

Поменять цветовую

гамму сайта?

Поменять
Обновления сайта
и новые разделы

Рекомендовать в Google +1

Раскадровка

46

Как уже было показано, анимации 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 единиц, а не установлено относительно содержащего кнопку окна. Чтобы использовать ширину окна, понадобится указать выражение привязки данных.

Пройди тесты