Главная » C#, Windows Runtime, XAML, Разработка для Windows 8 » Встроенная анимация Windows Runtime

0

Как мы убедились во второй  главе, один из основных принципов  построения интерфейса  Metro  —  это  его  скорость  и  отзывчивость.  Чтобы  обеспечить отзывчивость,  можно  использовать различного  рода  анимацию.  Проблема в том, чтобы определить, какого типа анимация подходит в том или ином случае.

Чтобы   помочь   разработчикам   определиться   с    характером    анимации в   стандартных  сценариях,  Windows  Runtime  поддерживает  ряд  элементов, которые   включают   готовую   анимацию   при   работе   с   ними   (GridView, FlipView,  ListView  и   др.),  а  также  целую  библиотеку  анимации,  которую можно использовать по своему усмотрению. В библиотеке выделяют простую анимацию,  которая  инициирует  перемещение  во  время добавления  новых элементов в контейнер или в коллекцию элемента на базе ItemsControl, а также аналогичную анимацию, но с повышенным уровнем контроля. Рассмотрим оба стандартных типа анимации.

Анимация перемещений

Эта группа анимации позволяет задать механизм появления объекта на экране и связана с перемещением объекта. Выделяют всего шесть  типов анимации перемещений.

·                   AddDeleteThemeTransition  —  позволяет задать  появление   элемента в  случае добавления его в  коллекцию (или удаление его из коллекции). Внешне   можно   увидеть  медленно   растущий   (уменьшающийся)  до финальных размеров (до полного исчезновения) объект.

·                   ContentThemeTransition — генерирует перемещение в случае, если было установлено новое содержимое (Content) у элемента управления. В этом случае происходит появление объекта с  последующим перемещением в финальную позицию. Анимация будет работать и при первом появлении объекта  на  экране,  так  как  тут  также  происходит установка свойства Content  (работает  даже  для  примитивов).  Этот  тип  анимации  можно комбинировать с предыдущим.

·                   EntranceThemeTransition  —  дает  возможность задать   перемещение объекта при его первом появлении.

·                   ReorderThemeTransition —  позволяет задавать анимацию  элементов, которые, находясь в некотором контейнере, меняют позицию (например, в результате вставки).

·                   RepositionThemeTransition — выполняется в случае изменения позиции элемента.

·                   EdgeUIThemeTransition — появление элемента осуществляется  сверху или снизу экрана (задается).

Рассмотрим    несколько    примеров   задания    анимации    и    начнем    с ContentThemeTransition. Поскольку этот тип анимации  задает перемещение, то  для  него  выделяют два  свойства   —   HorizontalOffset  и  VerticalOffset. Если  Вы  устанавливаете   одноименные  атрибуты  для  анимации,  связанной с перемещением, то они показывают смещение объекта на количество единиц, отстоящих  от его финальной позиции. Именно с этого смещения и начнется переход объекта в   финальную позицию. Если данные атрибуты  отсутствуют, то будет взято значение по умолчанию.

Следующий код задает перемещение кнопки при появлении ее на экране или изменении текста внутри кнопки.

<Grid>

<Button Content="Hello">

<Button.Transitions>

<TransitionCollection>

<ContentThemeTransition

HorizontalOffset="100" VerticalOffset="100"/>

</TransitionCollection>

</Button.Transitions>

</Button>

</Grid>

Как показывает пример, анимация задается с помощью свойства  Transitions

элемента, которое может содержать коллекцию различных типов анимации.

В случае если у Вас есть контейнер, включающий  множество  элементов,  для которых  нужно задать одну  и  ту  же  анимацию,  то  можно воспользоваться свойством ChildrenTransitions. Следующий  пример аналогичен предыдущему (для одного элемента).

<Grid>

<Grid.ChildrenTransitions>

<TransitionCollection>

<ContentThemeTransition

HorizontalOffset="100" VerticalOffset="100"/>

</TransitionCollection>

</Grid.ChildrenTransitions>

<Button Content="Hello">

</Button>

</Grid>

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

<Grid Background="White">

<Rectangle Height="100" Width="100" Fill="Red">

<Rectangle.Transitions>

<TransitionCollection>

<AddDeleteThemeTransition/>

</TransitionCollection>

</Rectangle.Transitions>

</Rectangle>

</Grid>

В этом типе нет никаких специальных свойств, так как объект всегда возникает из ничего.

Следующий  тип  анимации  —  EntranceThemeAnimation  —  очень  похож на ContentThemeAnimation,  но  генерируется  только  при   первом появлении элемента, да и настройки по скорости выполнения  немного другие. Пример использования EntranceTransitionAnimation приведен ниже.

<Grid Background="White">

<Rectangle Height="100" Width="100" Fill="Red">

<Rectangle.Transitions>

<TransitionCollection>

<EntranceThemeTransition FromHorizontalOffset="300" FromVerticalOffset="300" />

</TransitionCollection>

</Rectangle.Transitions>

</Rectangle>

</Grid>

Чтобы посмотреть на следующий тип анимации, создадим такой XAML код:

<Grid>

<StackPanel Name="stk">

<Rectangle Width="100" Height="100" Fill="Red"></Rectangle>

<Button Click="Button_Click">Click Me</Button>

</StackPanel>

</Grid>

А обработчик события опишем следующим образом:

private void Button_Click_3(object sender, RoutedEventArgs e)

{

Rectangle r = new Rectangle()

{ Height = 100, Width = 100,

Fill=new SolidColorBrush(Colors.Red) }; r.Transitions = new TransitionCollection(); r.Transitions.Add(new ReorderThemeTransition()); stk.Children.Insert(1, r);

}

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

Безусловно, анимация может являться частью стиля Вашего элемента:

<Page.Resources>

<Style x:Key="DefaultButtonStyle" TargetType="Button">

<Setter Property="Transitions">

<Setter.Value>

<TransitionCollection>

<EntranceThemeTransition/>

</TransitionCollection>

</Setter.Value>

</Setter>

</Style>

</Page.Resources>

<StackPanel x:Name="LayoutRoot">

<Button Style="{StaticResource DefaultButtonStyle}" Content="Transitioning Button" />

</StackPanel>

Оставшиеся  два типа анимации работают аналогично.

Сергей Лутай, Сергей Байдачный, Windows 8 для C# разработчиков

По теме:

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