Угловой 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 с изображением. Существует событие щелчка, для которого вызывается функция анимации. А для 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.

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

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

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

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

Функция перехода добавляет анимацию к элементу 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>

Свойство стиля добавлено в @componentдиректива, которая централизованно выравнивает 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.

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

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

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

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

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

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