Перевод: Angular 2 Animations — Foundation Concepts
by Thomas Burleson on Sep 16, 2016

Анимация часто пугает разработчиков, а особенно доктрина в Angular:

“… контроллеры не должны напрямую изменять DOM элементы!”

делает анимацию пугающим как ад. Но анимация в Angular 2 не такая уж страшная! Шаблоны плотно интегрированы с @Component. Отметим что анимация следует аналогичному шаблону.

Давайте создадим компонент который скрывает и показывает его контент, используя эффект замедления (fade).

Наш сценарий

Здесь простой Angular 2 компонент со свойством сокрытия и отображения. Данный пример пока еще без анимации:

Этот компонент просто публикует свойство @Input() isVisible; которое позволяет внешним компонентам показывать/скрывать без всякой анимации контент .

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

На нужно что бы компонент my-fader медленно проявлял(fade-in) или скрывал(fade-out) его контент.

Для начало загрузим методаные в наш компонент.

В приведенном примере мы добавили свойство animations декоратора @Component.

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

Когда свойство visibilityChanged меняется и значение == shown, то css свойство элемента opacity равно 1. И соотвественно когда свойство == hidden, значение opacity элемента изменится на 0.

Примечание: [@visibilityChanged] привязывается к <div> дочернему контент элементу в компоненте <my-fader>. Это не сам элемент <my-fader>. Другими словами анимационный элемент в нашем примере <div>; а не сам компонент.

Сейчас, вы возможно спросите откуда берется visibilityChanged? Потому что наше свойство называется visibility. Но давай те не будем забегать вперед, а сейчас расскажем о времени анимации.

Нам нужно анимировать эти изменения в течении некоторого времени вместо моментального изменения скрытия/отображения контента. Нам нужно сконфигурировать свойство transition для указания длительности анимации. В Angular 2 это сделать на удивление очень просто:

В свойстве transition, мы добавили скорость анимации 500 мсек.

Таким образом fade-in (opacity 0 -> 1, продолжительность 500 мсек) каждый раз когда будет меняться значение от hidden к shown. И наоборот fade-out (opacity 1 -> 0, продолжительность 500 мсек) каждый раз когда будет меняться от shown к hidden. Между прочим вы так же можете использовать другой синтаксис animate('500ms') для указания продолжительности анимации.

А что делает transition('* => *', ...)? Думайте о * => * как о переходе от одного состояния к другому; где *wildcard означает любое состояние. Если на нужно fade-out было бы медленее чемfade-in:

Вот как просто это может быть.

Основы концепции

Основная концепция анимации в приведем примере это переключение state changes. Программисты должны рассматривать state changes как эквивалент изменения значенией в свойстве экземпляра компонента.

Привязка анимации к компоненту

В то время как мы сконфигурировали методаные Animation, я уверен что у вас появились вопросы:

  • Как свойство visibilityChanged связанно с компонентом?
  • Как анимация связана с другими свойствами компонента?

Так как свойство data-binding уже поддерживается между компонентом и его шаблоном, то Angular 2 использует специальный шаблонный синтаксис анимации для анимации после связывания изменений. Поэтому шаблон должен быть следующим:

@visibilityChanged это специальное шаблонное свойство анимации и оно используется для привязки [@visibilityChanged]=“visibility” видимости компонента к свойству visibilityChanged.

Далее полный листинг:

Уменьшаем сложность

Что если — вместо использования дополнительного свойства visibility — вам нужно использовать свойство isVisible? Это устранит ngOnChanges() и уменьшит сложность кода:

Нужно будет еще сделать очень важное изменения в метаданных анимации!

Помните что @visibilityChanged это анимационный триггер который принимает значение: shown или hidden.

Если вы используете boolean свойство myFader::isVisible, то для анимации значения может принимать true или false.

 

Процес анимации

В нашем примере мы создали компонент с анимацией. Далее описание процесса [animation]:

  1. входящее значение меняет isVisible,
  2. в шаблоне привязывается к обновлению данных @visibilityChanged, при
  3. изменении триггера анимации,
  4. значение @visibilityChanged используется для изменения состояния анимации и скорости анимации, и
  5. измения состояния прозрачности opacity (и при необходимости других свойств) change-animates

Философия анимации

Главная цель механизма анимации Angular 2 это сделать анимацию простой для программистов, проще конфигурировать и проще использовать. API и синтаксис сделан что бы был:

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

Лучшая часть анимации в Angular 2 это разделение component->template->animation на независимые составляющие и использование шаблона в качестве связующего моста.

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

В большинстве случаев, вам никогда не нужно будет писать логику анимации в JavaScript.

Все механизмы подготовки и управления анимации скрыты от разработчика. Это ‘разделение задач’ предоставляет огромное преимущества разработчикам для более простого кода в создание анимации в Angular 2.

Анимация с иерархическми компонентами

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

В нашем примерах (выше), родительские компоненты могут изменять состояние дочернего my-fader компонента и таким образом управлять его контентом.

 

Заключение

Механизм анимации в Angular 2 делает все тяжелую работу за программистов он подготавливает, контролирует, и запускает анимацию. Программисты используя методаные @Component декларативно определяют стили, шаблоны, и анимацию. А шаблоны в компонентах играют роль мостов связывающих состояние анимации с триггерным свойством компонента.

Спасибо

Спасибо Matias Niemelä за удивительный движок анимации в Angular 2!

 

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