Перевод: Create an Animated Login Screen in Ionic 2
Josh Morony · August 11, 2016

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

login-animation

Это руководство будет сфокусировано на создание анимации а не на создание элементом или использование CSS, если вам нужно узнать больше об этом я рекомендую почитать :
An In Depth Look at the Grid System in Ionic 2
A Guide to Styling an Ionic 2 Application

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

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

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

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

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

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

Запустите следующую команду для генерации страницы входа

Так как мы создали новую страницу нам нужно указать ее в файле app.module.ts.
Измените src/app/app.module.ts следующим образом:

Так как мы будем работать со страницей Login (а не с Home ) нам нужно изменить корневую страницу.

Измените src/app/app.component.ts следующим образом:

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

Если вы читали предыдущие руководства, то наверно уже знаете что Web Animations API которое Angular 2 использует для анимации не везде поддерживается, например ее нет в iOS Safari что будет большой проблей для использования вашего приложения в iOS.

К счастью, существует polyfill который решит эту проблему для iOS.

Добавьте web-animations.min.js и web-animations.min.js.map в папку src/assets/js/ в вашем проекте (вам нужно будет создать эту папку).

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

<script src=»web-animations.min.js»></script>

3. Установка картинок

Если вы взглянете еще разок на анимацию вы увидите что мы использовали две картинки: прозрачную картинку в фоновыми облаками и лого. Фоновой слой появляется первым затем появляется лого.

Вам нужно добавить картинки в папку *src/assets/images.

4. Создание Layout

Сейчас мы разместим наши layout, разместив так как они будут выглядеть после завершения анимации. Мы добавим две наши картинки, форму входа и кнопку login .

Измените src/pages/login-page/login-page.html следующим образом:

Мы создали базовую структуру нашей страницы, мы просто разместили несколько разных компонентов внутри сетки, и затем добавили фоновую картинку.

Обратите внимание что мы так же задали анимацию для каждого элемента которого мы будем анимировать:

@flyInBottomFast это имя триггера, а cloudState переменная для определения в классе которое будет контролировать состояние анимации.

Сейчас добавим немного стилей.

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

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

Сейчас самое забавное. Так как я рассказывал о создание анимации в предыдущем руководстве, я не буду подробно описывать что здесь происходит а пройдусь об этом вскользь.

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

Здесь мы создали 4 анимации:

  • flyInBottomSlow
  • flyInBottomFast
  • bounceInBottom
  • fadeIn

 

Анмиация flyInBottomSlow будет анимировать элемент начиная снаружи низа экрана перемещая в его конечную позицию. Обратите внимание что в transition у нас изменяет состояние от void to * (то есть любое состояние). Мы еще не использовали void, он используется для перемещения элемента которое еще не был добавлен на экране. Поэтому добавляя void => *, анимация запуститься как только элемент добавиться на экран.

Другое отличие в том что мы задавали стили в state, и затем мы могли переключать анимацию элемента через разными классы. Сейчас мы определяем стили в transition, а не из через state.

Анимация flyInBottomFast точно такая же, за исключением того что она завершается немного быстрее. С анимацией bounceInBottom мы использовали keyframes для добавления различных стадией анимации – она вначале перейдет от низа страницы затем переместиться выше его конечной позиции и в конце перейдет на конечную позицию.

В конце, мы использовали fadeIn для анимации прозрачности элемента от 0 до 1.Так же обратите внимание что последние две анимации имеют задержку внутри функции анимациии перед запуском. Анимация fadeIn для примера имеет задержку 2000мс перед запуском, а затем завершает все анимацию в течение 1000мс.

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

login-animation

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