Перевод: Using the Web Animations API in Ionic 2 Josh Morony August 9, 2016

Анимация может являться тем самым инструментом которое позволитсделать обычное приложение  более привлекательным и интересным но в тоже время медленная и не корректная анимация наоборот может значительно ухудшить качество приложения и усложнить работу с ним. В спорах веб против натуральных приложений, я приведу один простой аргумент производительность нативных приложений всегда лучше но при этом редко бывает востребовано – вам не нужен двигатель от Ferrari когда вам нужно двигаться со скоростью не более 100 км/ч – но так же следует учесть что анимация эта та область где разница в производительности между нативными и гибридными подходами все таки является достаточно важным фактором для размышления.

В общем, анимация в гибридных приложениях (таких которые запущены внутри web view, как и Ionic) хорошо выглядят и работают плавно. Возьмем в качестве примера анимацию Ionic 2 по умолчанию, перемещения экрана и анимация других элементов неотличима от нативных приложений. Однако анимации внутри гибридных приложений могут быть проблемой в случае:

  • Анимация запускается на старом устройстве
  • Вы запускаете одновременно несколько сложных анимаций

В обоих случаях вы заметите уменьшение скорости анимации,  даже Ionic анимация будет тормозит на некоторых старых Android устройствах.

Что такое Web Animations API?

Web Animations API это попытка унифицировать различные подходы к веб анимации, обеспечивая такую же скорость как CSS анимация и гибкость JavaScript анимации.

Она все еще остается экспериментальной и имеет ограниченную поддержку, так же для нее есть polyfill (код реализующий поддержку функционала в браузерах в которых нет реализации требуемого функционала). Один из браузеров в котором нет поддержки Web Animations API iOS Safari что является проблемой если вы планируете создавать приложения для iOS с Ionic, поэтому вскоре мы расскажем как пользоваться polyfill.

Если вы хотите лучшее описание Web Animations API чем я мог дать советую обратиться к блогу Daniel Wilson Let’s talk about the Web Animations API.

Я приведу один простой пример использования Web Animations API в обычном Javascript приложение, и затем мы посмотрим как его использовать в Angular 2 и в Ionic 2 приложение.

Взглянем на следующий CSS анимацию из этого руководства:

Что бы применить эту анимацию все что нужно сделать это применить класс slide-in-both-ways требуемому элементу. Это код сдвинет элемент слева на право относительно его текущей позиции, и затем вернет его в начальную позицию.

Что бы сделать такую же анимацию использую Web Animations API, мы должны написать что то типа такого:

Имплементация слегка похоже но синтаксис немного отличается мы использовали offset а не 0%, 50%, и 100% keyframes которые отражали состояние элемента на разных стадиях выполнения. Для более подробного пояснения о работе keyframe анимация, взгляните на это руководство.

Сейчас давайте посмотрим как мы может сделать такое же на Angular 2 с помощью Web Animations API.

До того как мы начнем

До того как мы начнете идти дальше, вам нужно иметь базовые знания о концепции Ionic 2. И как минимум у вас должен быть установлен Ionic 2.

Если вы не знакомы с Ionic 2, я бы рекомендовал к прочтению Ionic 2 Beginners Guide. Если вам нужно больше подробностей для изучения Ionic 2, взгляните на Building Mobile Apps with Ionic 2.

Использование Web Animations API с Angular 2

В Angular 2 имеется встроенная поддержка Web Animations API, анимация может определяться через метаданные компонентов. Я так же верю в то что в Ionic есть встроенная его собственная поддержка Web Animations API хотя достаточно сложно найти более подробную информацию об этом.

В этом руководстве мы создадим простое Ionic 2 приложение с четырьмя различными Angular 2 анимациями.

Они будут выглядеть следующим образом:

ionic2-animations

 

1. Генерация нового Ionic 2 приложения

Давай те начнем с генерации нового Ionic 2 приложения. Мы собираемся создать простое одностраничное приложение с несколькими кнопками, поэтому используем blank шаблон.

Запустите следующие команды для генерации Ionic 2 приложения:

2. Подключаем Polyfill

polyfill это библиотека которая добавляет поддержку Web Animations API на тот случай если в браузере нет встроенной. Она может быть найдена здесь. Очень важно что бы вы добавили эту библиотеку если вы хотите что бы ваша анимация везде работала.

Загрузите web-animations.min.js и web-animations.min.js.map и положите внутрь вашей папки www

Добавте следующую строку в ваш index.html:

Сейчас мы готовы приступить к созданию приложения!

3. Расположение Layout

До того как мы начнем создавать анимацию, нам нужно создать простые layout для наших кнопок с небольшим количеством CSS стилей. Здесь я использую flexbox, я не буду ничего о них рассказывать, если вам интересно вы можете прочитать о них в этом руководстве.

Измените home.html что бы он выглядел следующим образом:

Измените home.scss следующим образом:

Помимо задания нескольких стилей, мы создали 4 кнопки которые вызывают разные функции. Эти функции будут переключать состояния анимаций, но об этом позже!

4. Создание анимации

Сейчас наиболее интересная часть – давайте создадим несколько анимаций. В Angular 2, мы можем определить анимацию в метаданных компонента (внутри его декоратора ), и связать анимацию в шаблоне компонента. До того как мы сможем использовать Web Animations API в Angular 2, нам нужно импортировать несколько классов из библиотек Angular 2.

Измените ваш imports в home.ts следующим образом:

Модифицируйте декоратор home.ts следующим образом:

Сейчас мы добавили массив анимаций к метаданным, которые определяют 4 разных анимаций используя триггеры: flip, flyInOut, fade, и bounce.

Триггеры это то что мы используем для связи анимации с элементом. В случае анимации flip, мы подключаем @flip="state" к элементу в шаблоне. state определяет множество свойств для элемента, через которые и будет работать наша анимация. Для состояния flip мы запускаем анимацию flipped которая вращает элемент на 180 градусов а так же меняет цвет фона. Взглянем на синтаксис в шаблоне:

вы можете увидеть что @flip ссылается на значения в flipState. Этот flipState определен в home.ts и его мы задаем в состояние анимации. Так как у нас есть состояние flipped определенная внутри анимационного триггера flip, и если мы зададим переменную flipState как flipped то запуститься анимация. Если мы изменим flipState на что нибудь другое анимации не будет.

В методанных, после определения state, мы определяем transition – этим мы определяем то как анимация будет работать. Первый параметр:

определяет когда анимация запуститься. В нашем случае мы говорим что анимация должна запуститься “когда flipState изменится из любого значения (*) на flipped". Когда это случиться, мы используем animate для определения то что анимация должно продолжаться 400мс и использовать временную функцию ease. У нас нет анимации для изменения состояния от flipped` к чему то еще :

поэтому если мы изменим flipState на flipped мы увидем что запустилась анимация, но когда мы изменим flipState обратно на любое другое состояние, элемент сразу же вернется в свое начальное состояние вместо плавного перехода через обратную анимацию:

ionic2-animations-flip

Теперь когда у нас есть базовое понимание использованных здесь функций, давай те быстренько пройдемся по остальным. Следующая анимация flyInOut определяется двумя состояниями, in когда элемент будет в его начальной позиции, и out когда он будет правее на 150%. Мы так же определили 2 перехода (transition), один из in к out и один из out к in. Определяя  эти перехода (transition), элемент будет анимирован в обоих случаях когда его состояние изменяется от in и out. Обратите внимание что один переход использует функцию ease-in, а другой ease-out.

Анимация fade похожа на предыдущую, за исключением того что в этом случае анимируется свойство элемента opacity с состоянием visible и invisible. В этом случае мы использовали один переход на две анимации, с 200мс и функцией linear:

что эквивалентно:

или

Наша последняя анимация, bounce, это небольшая уловка. Мы изменяем позицию элемента для создания эффекта bounce, но мы использовали несколько состояний анимаций. Так же как мы использовали проценты для keyframes CSS анимации, которые мы рассматривали раньше, мы так же использовали keyframes, за исключением того что мы использовали offset для задания состояния в определенные фазы анимации. Давай те еще раз взглянем на :

У нас есть три фазы анимации, с offset 0, 0.5, и 1 – они эквивалентны 0%, 50%, и 100% в случае CSS keyframe анимации.В начале анимации, элемент будет на начальной позиции, в средней фазе он будет выше на 10px относительно его начальной позиции, и на последней фазе он вернется на свою начальную позицию.

Теперь когда мы рассмотрели все анимации, давайте завершим остальную часть приложения.

Измените home.html следующим образом:

Сейчас мы использовали синтаксис триггеров для подключения всех наших анимаций к разным кнопкам. Мы так же можем контролировать какое состояние а какая анимация будет применена к каждому элементу через flipState, flyInOutState, fadeState, и bounceState. Нам нужно задать все это в home.ts, так же как и функции которые будут управлять ими.

Измените класс в home.ts следующим образом:

В начале у наши состояние будут:

  • notFlipped
  • in
  • visible
  • noBounce

Поэтому все кнопки будут в их “нормальном” состояние. Оба in и visible состояния со стилями которые мы определили в наших анимациях, поэтому они применяться по умолчанию, но у нас нет анимаций для состояний notFlipped и noBounce.

Функции переключения которые мы определили просто переключают состояние переменных. Для примера, если вы активируете функцию toggleFlip, flipState состояние notFlipped изменится на flipped поэтому состояние flipped в анимации flip и анимация будет запущена.

Оба toggleFade и toggleBounce действуют похожим образом, но toggleFlyInOut немного отличается. Так как мы анимируем элемент так что он выходит за экран, мы добавили setInterval для возвращения элемента обратно к in после 2 секунд.

Если все сделано как мы описывалм вы должны увидеть следующее:

ionic2-animations

 

Заключение

Существует много чего еще что можно сделать с анимациями в Angular 2 и о чем мы не рассказали, поэтому вы можете ознакомится с руководством на этом ресурсе.

В будущих руководствах, я планирую использовать анимацию в Angular 2 для создания более “приближенных к реальности” примеров (например более интересный экран login с анимацией).

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on VK