Angular7 - Анимация

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

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

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule
   ],
   providers: [MyserviceService],
   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, которой присваивается значение state.

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

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
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, к которому должна применяться анимация. Второй параметр - это импортированные нами функции - состояние, переход и т. Д.

Функция состояния включает шаги анимации, между которыми будет переходить элемент. Прямо сейчас мы определили два состояния, меньшее и большее. Для штата меньшего размера мы дали стиль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 папка.