Введення в анімацію Windows Runtime

Windows Runtime дозволяє використовувати анімацію для зміни властивостей будь-якого з обєктів, успадкованих від UIElement Анімація являє собою потужний механізм, який допомагає створювати красиві ефекти, практично не використовуючи код на C #

Перш ніж перейти до створення прикладів з використанням анімації,

розглянемо доступні типи анімації

DoubleAnimation

Анімація DoubleAnimation використовується для створення анімації будь-яких властивостей типу double Основними властивостями даного типу анімації є From і To, Які задають початкове і кінцеве значення аніміруемого властивості Якщо початкове значення властивості невідомо, то можна скористатися ще однією властивістю – By, Яке дозволяє задати відносне значення для аніміруемого властивості

ColorAnimation

Тип анімації ColorAnimation використовується для анімації властивостей типу Color На тип аніміруемого властивості потрібно звернути особливу увагу Так, якщо Ви вирішили анімувати такі властивості, як Fill  або Stroke для графічних примітивів, то потрібно відштовхуватися не від них, а від властивостей кистей Основними властивостями даного типу анімації є ті ж, що і в попередньому випадку, тільки замість значень типу double задається колір

PointAnimation

Анімація PointAnimation дозволяє анімувати точку Основні її властивості ті ж, що і у випадку з DoubleAnimation, Проте в якості значень задаються координати точок

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

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Duration – Це властивість задає час тривалості анімації в форматі ГГ: ММ: СС (00:00:03 – 3 секунди) Всі перераховані види анімації дозволяють змінювати аніміруемие властивості рівномірно, розбиваючи прирощення по заданому інтервалу часу

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp BeginTime – Якщо планується запустити анімацію не відразу, а тільки через деякий проміжок часу, то цей проміжок можна визначити за допомогою даної властивості, вказавши час початку анімації

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp SpeedRatio  – Це властивість дозволяє прискорити анімацію в n разів

Може бути використане для реалізації різних програвачів анімації, надаючи механізм прискорення або уповільнення процесу

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp AutoReverse – Це властивість приймає булевское значення і дозволяє определитьнеобходимостьвыполненияанимациивобратномпорядкеПри цьому якщо тривалість анімації – 5 секунд, то з встановленим властивістю AutoReverse вtrue  загальна тривалість анімації складе 10 секунд

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp RepeatBehavior – Остання властивість, яке дозволяє встановити можливість повторення анімації Тут можливі нижченаведені значення

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Час в секундах – Після проходження проміжку часу, заданого тут, анімація буде запускатися повторно

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Forever – Запускає анімацію повторно відразу після її закінчення

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Nx – Тут N необхідно замінити на число, що визначає кількість повторень анімації Буква х була додана, щоб не плутати це значення з часом в секундах

Оскільки в одному обєкті можуть анімувати відразу кілька властивостей, обєкти анімації не можуть бути «безпритульними» Щоб обєднати потрібну кількість обєктів анімації, використовується спеціальний обєкт типу StoryBoard У його завдання входить контроль і запуск анімації Крім того, він використовує два залежних властивостіStoryBoardTargetName  іStoryBoard TargetProperty для визначення імені обєкта, стосовно якого спрямована анімація, та імені властивості, яке буде анімовані

Ось приклад визначення обєкта StoryBoard, Який містить лише одну анімацію

&ltStoryboard&gt

&ltDoubleAnimation StoryboardTargetName=&quotmyButton&quot StoryboardTargetProperty=&quot(CanvasLeft)&quot To=&quot200&quot Duration=&quot0:0:5&quot AutoReverse=&quotTrue&quot /&gt

&lt/Storyboard&gt

Розібравшись з типами анімації, розглянемо, яким чином можна її запускати

Для запуску анімації існує два механізми:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp запуск анімації за допомогою XAML в момент завантаження обєкта

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp запуск анімації з коду на C #

Щоб реалізувати запуск анімації з XAML, досить визначити елемент EventTrigger, Який розміщений в колекції Triggers  потрібного нам елемента керування Якщо тригер дозволяє реагувати на якусь подію, то EventTrigger дає можливість реагувати на подію, повязане з елементом управління Незважаючи на наявність колекції Triggers у кожного з візуальних елементів управління, в WinRT існує тількиEventTrigger, Здатний реагувати лише на подіюLoaded  (Вказується UserControlLoaded або КонтейнерLoaded, наприклад CanvasLoaded) Розглянемо невеликий приклад заповнення тригера нашої анімацією

&ltButton x:Name=&quotmyButton&quot CanvasTop=&quot0&quot CanvasLeft=&quot0&quot Width=&quot100&quot Height=&quot50&quot Content=&quotHello&quot&gt

&ltButtonTriggers&gt

&ltEventTrigger RoutedEvent=&quotUserControlLoaded&quot&gt

&ltBeginStoryboard&gt

&ltStoryboard&gt

&ltDoubleAnimation StoryboardTargetName=&quotmyButton&quot StoryboardTargetProperty=&quot(CanvasLeft)&quot To=&quot200&quot Duration=&quot0:0:5&quot AutoReverse=&quotTrue&quot /&gt

&lt/Storyboard&gt

&lt/BeginStoryboard&gt

&lt/EventTrigger&gt

&lt/ButtonTriggers&gt

&lt/Button&gt

Другий спосіб, який є більш універсальним, – це розміщення обєктаStoryBoard  в ресурсах, повязаних з елементом або додатком, з наступним запуском з керованого коду Цей спосіб найбільш універсальний і гнучкий, оскільки дозволяє запустити анімацію в момент будь-якої події Щоб управляти обєктом StoryBoard з коду, існує кілька простих методів:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Begin

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Stop

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Pause

Крім цих методів, існує дуже корисна подія Completed, Яке дозволяє визначити момент завершення анімації

Стандартні типи анімації дозволяють змінити властивості обєктів з плином часу, використовуючи рівномірний прирощення властивостей Але якщо Ви хочете змінювати властивості не по лінійному закону, то типи анімації, розглянуті раніше, не підійдуть Замість них в Silverlight доступні аналогічні типи анімації, але з можливістю розбивати весь процес на окремі фрагменти Ось список цих типів:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp DoubleAnimationUsingKeyFrames

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp PointAnimationUsingKeyFrames

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ColorAnimationUsingKeyFrames

Таким чином, до назви стандартних типів анімації був доданий суфікс

UsingKeyFrames

Розглянемо приклад використання DoubleAnimationUsingKeyFrames

&ltStoryboard&gt

&ltDoubleAnimationUsingKeyFrames Duration=&quot0:0:5&quot AutoReverse=&quotTrue&quot StoryboardTargetName=&quotmyButton&quot StoryboardTargetProperty=&quot(CanvasLeft)&quot&gt

&ltLinearDoubleKeyFrame KeyTime=&quot0:0:2&quot Value=&quot70&quot&gt&lt/LinearDoubleKeyFrame&gt

&ltLinearDoubleKeyFrame KeyTime=&quot0:0:5&quot Value=&quot100&quot&gt&lt/LinearDoubleKeyFrame&gt

&lt/DoubleAnimationUsingKeyFrames&gt

&lt/Storyboard&gt

Як видно з коду, лінійне прирощення задається за допомогою обєктів LinearDoubleKeyFrame У даному випадку вони задають переміщення кнопки на 70 одиниць за перші дві секунди і на 30 одиниць за наступні три секунди

КрімLinearDoubleKeyFrame,        ми могли б використовувати DiscreteDoubleKeyFrame  абоSplineDoubleKeyFrame Перший з обєктів задає дискретне прирощення властивості, тобто обєкт почне рухатися стрибками Другий з обєктів анімації задає зміна властивості по математичному закону, використовуючи криву Безьє

Аналогічні механізми зміни властивостей присутні і в двох інших типах анімації

У розглянутому класі обєктів анімації існує ще один тип анімації –ObjectAnimationUsingKeyFrame, Здатний змінювати будь-які властивості у будь-якого обєкта Тут підтримується лише дискретний набір кадрів, що вимагає задати стан обєкта в бажані проміжки часу, без можливості автоматичного прирощення властивостей (адже тип властивості може не укладатися в підтримувані)

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

Наприклад, щоб виконати анімацію для мячика, що падає на поверхню, використовувати один обєкт анімації недостатньо Малоймовірно, що мячик впаде на поверхню і не підскочить вгору Якщо ж програміст хотів реалізувати стрибучий мячик, то доводилося створювати для кожного стрибка окремий кадр, що значно збільшувало код і складність програми

Windows Runtime підтримує декілька корисних функцій для вирішення ряду поширених завдань з мінімальними зусиллями Нижче показаний код, який використовує функцію, що дозволяє досягти ефекту стрибаючого мячика

&ltUserControl x:Class=&quotSilverlightApplication52MainPage&quot xmlns=&quothttp://schemasmicrosoftcom/winfx/2006/xaml/presentation&quot xmlns:x=&quothttp://schemasmicrosoftcom/winfx/2006/xaml&quot Width=&quot400&quot Height=&quot300&quot Loaded=&quotUserControl_Loaded&quot&gt

&ltUserControlResources&gt

&ltStoryboard x:Name=&quotsb1&quot&gt

&ltDoubleAnimation From=&quot0&quot To=&quot250&quot StoryboardTargetName=&quotel1&quot StoryboardTargetProperty=&quot(CanvasTop)&quot Duration=&quot0:0:5&quot&gt

&ltDoubleAnimationEasingFunction&gt

&ltBounceEase Bounces=&quot10&quot EasingMode=&quotEaseOut&quot Bounciness=&quot2&quot&gt

&lt/BounceEase&gt

&lt/DoubleAnimationEasingFunction&gt

&lt/DoubleAnimation&gt

&lt/Storyboard&gt

&lt/UserControlResources&gt

&ltCanvas x:Name=&quotLayoutRoot&quot Background=&quotWhite&quot&gt

&ltEllipse Fill=&quotBlue&quot Width=&quot50&quot Height=&quot50&quot x:Name=&quotel1&quot&gt&lt/Ellipse&gt

&lt/Canvas&gt

&lt/UserControl&gt

Як бачите, була використана BounceEase   – Функція з затухаючої амплітудою, що дозволяє реалізувати «стрибки» мячика

На поточний момент існує 11 простих функцій анімації Ось повний список:ExponentialEase,  PowerEase,  QuadraticEase,   BackEase,  BounceEase, CircleEase, CubicEase, ElasticEase, QuarticEase, QuinticEase, SineEase

Кожна з функцій має свої параметри, що дозволяють задати коефіцієнти Крім того, за допомогою спеціального властивостіEasingMode  можна легко отримати дзеркальне відображення функції

Сергій Лутай, Сергій Байдачний, 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>

*

*