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 с изображением. Есть событие click, для которого вызывается функция animate. И для div, директива @myanimation добавляется и получает значение как состояние.

Давайте теперь посмотрим 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.

Теперь мы добавим свойство 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, которое изменяется от 0 до 100 пикселей, когда мы нажимаем кнопку Click Me. Изображение хранится в папке assets / images .