Вбудована анімація Windows Runtime

Як ми переконалися у другому розділі, один з основних принципів побудови інтерфейсу Metro – це його швидкість і чуйність Щоб забезпечити чуйність, можна використовувати різного роду анімацію Проблема в тому, щоб визначити, якого типу анімація підходить в тому чи іншому випадку

Щоб допомогти розробникам визначитися з характером анімації в стандартних сценаріях, Windows Runtime підтримує ряд елементів, які включають готову анімацію при роботі з ними (GridView, FlipView,  ListView  та ін), а також цілу бібліотеку анімації, яку можна використовувати на свій розсуд У бібліотеці виділяють просту анімацію, яка ініціює переміщення під час додавання нових елементів в контейнер або в колекцію елемента на базі ItemsControl, А також аналогічну анімацію, але з підвищеним рівнем контролю Розглянемо обидва стандартних типу анімації

Ця група анімації дозволяє задати механізм появи обєкта на екрані і повязана з переміщенням обєкта Виділяють всього шість типів анімації переміщень

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp AddDeleteThemeTransition  – Дозволяє задати поява елемента в разі додавання його до колекції (або видалення його з колекції) Зовні можна побачити повільно зростаючий (зменшуваний) до фінальних розмірів (до повного зникнення) обєкт

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ContentThemeTransition – Генерує переміщення у разі, якщо було встановлено новий вміст (Content) У елемента управління У цьому випадку відбувається поява обєкта з подальшим переміщенням у фінальну позицію Анімація буде працювати і при першій появі обєкта на екрані, так як тут також відбувається установка властивості Content (працює навіть для примітивів) Цей тип анімації можна комбінувати з попереднім

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp EntranceThemeTransition  – Дає можливість задати переміщення обєкта при його першій появі

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ReorderThemeTransition – Дозволяє задавати анімацію елементів, які, перебуваючи в деякому контейнері, змінюють позицію (наприклад, в результаті вставки)

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp RepositionThemeTransition – Виконується в разі зміни позиції елемента

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp EdgeUIThemeTransition – Поява елемента здійснюється зверху чи знизу екрану (задається)

Розглянемо кілька прикладів завдання анімації і почнемо з ContentThemeTransition Оскільки цей тип анімації задає переміщення, то для нього виділяють дві властивості –HorizontalOffset  іVerticalOffset Якщо Ви встановлюєте однойменні атрибути для анімації, повязаної з переміщенням, то вони показують зсув обєкта на кількість одиниць, які віддалені від його фінальної позиції Саме з цього зміщення і почнеться перехід обєкта у фінальну позицію Якщо дані атрибути відсутні, то буде взято значення за замовчуванням

Наступний код задає переміщення кнопки при появі її на екрані або зміні тексту всередині кнопки

&ltGrid&gt

&ltButton Content=&quotHello&quot&gt

&ltButtonTransitions&gt

&ltTransitionCollection&gt

&ltContentThemeTransition

HorizontalOffset=&quot100&quot VerticalOffset=&quot100&quot/&gt

&lt/TransitionCollection&gt

&lt/ButtonTransitions&gt

&lt/Button&gt

&lt/Grid&gt

Як показує приклад, анімація задається за допомогою властивостіTransitions

елементу, яка може містити колекцію різних типів анімації

У випадку якщо у Вас є контейнер, що включає безліч елементів, для яких потрібно задати одну і ту ж анімацію, то можна скористатися властивістю ChildrenTransitions Наступний приклад аналогічний попередньому (для одного елемента)

&ltGrid&gt

&ltGridChildrenTransitions&gt

&ltTransitionCollection&gt

&ltContentThemeTransition

HorizontalOffset=&quot100&quot VerticalOffset=&quot100&quot/&gt

&lt/TransitionCollection&gt

&lt/GridChildrenTransitions&gt

&ltButton Content=&quotHello&quot&gt

&lt/Button&gt

&lt/Grid&gt

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

&ltGrid Background=&quotWhite&quot&gt

&ltRectangle Height=&quot100&quot Width=&quot100&quot Fill=&quotRed&quot&gt

&ltRectangleTransitions&gt

&ltTransitionCollection&gt

&ltAddDeleteThemeTransition/&gt

&lt/TransitionCollection&gt

&lt/RectangleTransitions&gt

&lt/Rectangle&gt

&lt/Grid&gt

У цьому типі немає ніяких спеціальних властивостей, так як обєкт завжди виникає з нічого

Наступний тип анімації –EntranceThemeAnimation  – Дуже схожий на ContentThemeAnimation, Але генерується тільки при першій появі елемента, та й налаштування за швидкістю виконання трохи інші Приклад використання EntranceTransitionAnimation наведено нижче

&ltGrid Background=&quotWhite&quot&gt

&ltRectangle Height=&quot100&quot Width=&quot100&quot Fill=&quotRed&quot&gt

&ltRectangleTransitions&gt

&ltTransitionCollection&gt

&ltEntranceThemeTransition FromHorizontalOffset=&quot300&quot FromVerticalOffset=&quot300&quot /&gt

&lt/TransitionCollection&gt

&lt/RectangleTransitions&gt

&lt/Rectangle&gt

&lt/Grid&gt

Щоб подивитися на наступний тип анімації, створимо такий XAML код:

&ltGrid&gt

&ltStackPanel Name=&quotstk&quot&gt

&ltRectangle Width=&quot100&quot Height=&quot100&quot Fill=&quotRed&quot&gt&lt/Rectangle&gt

&ltButton Click=&quotButton_Click&quot&gtClick Me&lt/Button&gt

&lt/StackPanel&gt

&lt/Grid&gt

А обробник події опишемо наступним чином:

private void Button_Click_3(object sender, RoutedEventArgs e)

{

Rectangle r = new Rectangle()

{ Height = 100, Width = 100,

Fill=new SolidColorBrush(ColorsRed) } rTransitions = new TransitionCollection() rTransitionsAdd(new ReorderThemeTransition()) stkChildrenInsert(1, r)

}

Як бачите, ми створюємо прямокутник, який будемо вставляти в колекцію елементів усерединіStackPanel Причому саму анімацію ми також створюємо динамічно Щоб побачити роботу цього прикладу, кілька разів натисніть кнопку і додайте нові прямокутники

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

&ltPageResources&gt

&ltStyle x:Key=&quotDefaultButtonStyle&quot TargetType=&quotButton&quot&gt

&ltSetter Property=&quotTransitions&quot&gt

&ltSetterValue&gt

&ltTransitionCollection&gt

&ltEntranceThemeTransition/&gt

&lt/TransitionCollection&gt

&lt/SetterValue&gt

&lt/Setter&gt

&lt/Style&gt

&lt/PageResources&gt

&ltStackPanel x:Name=&quotLayoutRoot&quot&gt

&ltButton Style=&quot{StaticResource DefaultButtonStyle}&quot Content=&quotTransitioning Button&quot /&gt

&lt/StackPanel&gt

Решта два типи анімації працюють аналогічно

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

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*