Angular 6 — Анимации

Анимации добавляют много взаимодействия между элементами HTML. Анимация была также доступна с Angular2. Разница с Angular 6 заключается в том, что анимация больше не является частью библиотеки @ angular / core , а представляет собой отдельный пакет, который необходимо импортировать в app.module.ts .

Для начала нам нужно импортировать библиотеку следующим образом:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

BrowserAnimationsModule необходимо добавить в массив импорта в app.module.ts, как показано ниже —

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

В app.component.html мы добавили элементы html, которые нужно анимировать.

<div>
   <button (click) = "animate()">Click Me</button>
   <div [@myanimation] = "state" class = "rotate">
      <img src = "assets/images/img.png" width = "100" height = "100">
   </div>
</div>

Для основного div мы добавили кнопку и div с изображением. Есть событие click, для которого вызывается функция animate. И для div, директива @myanimation добавляется и получает значение как состояние.

Давайте теперь посмотрим app.component.ts, где определена анимация.

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   styles:[`
      div{
         margin: 0 auto;
         text-align: center;
         width:200px;
      }
      .rotate{
         width:100px;
         height:100px;
         border:solid 1px red;
      }
   `],
   animations: [
      trigger('myanimation',[
         state('smaller',style({
            transform : 'translateY(100px)'
         })),
         state('larger',style({
            transform : 'translateY(0px)'
         })),
         transition('smaller <=> larger',animate('300ms ease-in'))
      ])
   ]
})
export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == 'larger' ? 'smaller' : 'larger';
   }
}

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

import { trigger, state, style, transition, animate } from '@angular/animations';

Здесь мы импортировали триггер, состояние, стиль, переход и анимацию из @ angular / animations.

Теперь мы добавим свойство animations в декоратор @Component () —

animations: [
   trigger('myanimation',[
      state('smaller',style({
         transform : 'translateY(100px)'
      })),
      state('larger',style({
         transform : 'translateY(0px)'
      })),
      transition('smaller <=> larger',animate('300ms ease-in'))
   ])
]

Триггер определяет начало анимации. Первым параметром для него является имя анимации, которая будет дана тегу html, к которому необходимо применить анимацию. Второй параметр — это импортированные нами функции — состояние, переход и т. Д.

Функция состояния включает этапы анимации, между которыми будет переходить элемент. Прямо сейчас мы определили два состояния, меньшее и большее. Для меньшего состояния мы дали преобразование стиля : translateY (100px) и transform: translateY (100px) .

Функция перехода добавляет анимацию к элементу html. Первый аргумент принимает состояния, т. Е. Начало и конец; второй аргумент принимает функцию animate. Функция animate позволяет определить длину, задержку и замедление перехода.

Давайте теперь посмотрим файл .html, чтобы увидеть, как работает функция перехода.

<div>
   <button (click) = "animate()">Click Me</button>
   <div [@myanimation] = "state" class="rotate">
      <img src = "assets/images/img.png" width = "100" height = "100">
   </div>
</div>

В директиву @component добавлено свойство style , которое выравнивает div по центру. Давайте рассмотрим следующий пример, чтобы понять то же самое —

styles:[`
   div{
      margin: 0 auto;
      text-align: center;
      width:200px;
   }
   .rotate{
      width:100px;
      height:100px;
      border:solid 1px red;
   }
`],

Здесь специальный символ [«] используется для добавления стилей в элемент html, если таковые имеются. Для div мы дали имя анимации, определенное в файле app.component.ts.

При нажатии кнопки она вызывает функцию animate, которая определяется в файле app.component.ts следующим образом:

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == ‘larger’? 'smaller' : 'larger';
   }
}

Переменная состояния определяется и получает значение по умолчанию как меньшее. Функция анимации изменяет состояние при нажатии. Если состояние больше, оно преобразуется в меньшее; и если меньше, он будет преобразован в больший.

Вот так будет выглядеть вывод в браузере ( http: // localhost: 4200 / ) —

После нажатия кнопки Click Me положение изображения изменяется, как показано на следующем снимке экрана.

Функция преобразования применяется в направлении y , которое изменяется при нажатии кнопки Click Me от 0 до 100 пикселей. Изображение хранится в папке assets / images .