Angular 6 анимаций с нуля

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Подпишитесь на YouTube | Живая демонстрация | Код на GitHub

В этом руководстве вы узнаете, как использовать модуль Angular Animations в своем приложении Angular 6. Angular предлагает возможность создавать привлекательные анимации и активировать их на основе множества факторов. Вы можете разместить анимацию на любом элементе HTML и заставить ее происходить на основе определенных событий.

Включение привлекательных графических переходов в пользовательский интерфейс вашего приложения улучшает взаимодействие с пользователем и в то же время делает приложение более простым в использовании. Например. определенная анимация может помочь привлечь внимание пользователя к особым элементам пользовательского интерфейса.

В этом руководстве вы узнаете, как реализовать анимацию, следуя практическому примеру приложения. Давайте быстро посмотрим, что мы будем строить.

Что мы собираемся построить

Пример приложения, который мы собираемся создать, будет выглядеть следующим образом:

На начальном экране в центре экрана отображается большой зеленый прямоугольник. Кроме того, у вас есть доступ к двум кнопкам: Изменить состояние 2 и Изменить состояние 1. Используя эти две кнопки, вы можете запускать анимацию прямоугольника. Например. если вы нажмете кнопку «Изменить на состояние 2», прямоугольник отобразит анимацию и изменится на следующий вид:

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

Давайте создадим это приложение с нуля…

Если вам нравится CodingTheSmartWay, подумайте о поддержке нас через Patreon. С вашей помощью мы сможем чаще выпускать руководства для разработчиков. Большое спасибо! Станьте покровителем!

Настройка проекта Angular 6

Чтобы начать практический проект Angular 6 Animations, нам нужно сначала настроить проект Angular. Поэтому мы будем использовать Angular CLI:

$ ng new angularanimation

Эта рекомендация заключается в создании нового каталога проекта angularanimation и установке проекта Angular 6 по умолчанию внутри этой вновь созданной папки. Теперь перейдем в эту папку:

$ cd angularanimation

и проверьте, все ли работает правильно, запустив веб-сервер разработки:

$ ng serve

Если теперь вы перейдете по URL-адресу http: // localhost: 4200 / в браузере, вы должны увидеть следующий вывод:

Настройка угловой анимации

Теперь, когда проект Angular 6 готов, мы можем настроить Angular Animations для этого проекта. Первым шагом является добавление следующего оператора импорта в app.module.ts:

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

Затем нам нужно добавить BrowserAnimationsModule к массиву, который назначен свойству import декоратора @NgModule:

imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],

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

Давайте сначала создадим новый компонент:

$ ng g c animate

В вашем проекте будут созданы следующие четыре новых файла:

animate.component.ts
animate.component.spec.ts
animate.component.html
animate.component.css

Новый компонент AnimateComponent автоматически добавляется к основному модулю приложения в app.module.ts и, таким образом, становится доступным в вашем приложении:

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

Управление изменениями состояния в AppComponent

Приложение должно запускать анимацию на основе изменений состояния, которые вызываются нажатием кнопок. Чтобы управлять состоянием приложения, нам нужно ввести переменную члена класса в AppComponent:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularanimation01';
  toState = 'state1';
  changeState(state: any) {
    this.toState = state;
  }
}

Переменная-член называется toState и изменяется методом changeState. Этот метод используется как метод обработчика событий для события нажатия кнопок. Давайте посмотрим на соответствующий код HTML-шаблона, который нужно вставить в app.component.html:

<div class="container p-4">
  <div class="row">
    <div class="col text-center">
      <a (click)="changeState('state2')" class="btn btn-danger">Change To State 2</a>
    </div>
    <div class="col text-center">
      <a (click)="changeState('state1')" class="btn btn-info">Change To State 1</a>
    </div>
  </div>
  <div class="row justify-content-center align-items-center">
    <app-animate [currentState]="toState"></app-animate>
  </div>
</div>

В этом коде шаблона мы используем классы CSS Bootstrap 4. Это требует, чтобы мы включили файл CSS Bootstrap в наше приложение. Самый простой способ сделать это - включить Bootstrap из CDN в index.html, добавив следующую строку кода в раздел заголовка:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Код шаблона прикрепил метод changeState к событию click двух кнопок. В первом случае значение, которое задается параметром changeState, равно state2, а во втором случае значение - state1.

Кроме того, вывод AnimateComponent включается с помощью элемента ‹app-animate›. Будет доступно свойство ввода с именем currentState, так что мы сможем связать это свойство со значением переменной-члена toState.

Реализация AnimateComponent

Подготовив AppComponent, мы можем продолжить реализацию AnimateComponent. Во-первых, нам нужно включить элемент div в animate.component.html, который отображает прямоугольник, который анимируется.

<div [@changeState]="currentState" class="myblock mx-auto"></div>

Соответствующий код CSS для класса myblock необходимо вставить в animate.component.css:

.myblock {
    background-color: green;
    width: 300px;
    height: 250px;
    border-radius: 5px;
    margin: 5rem;
}

Наконец, мы можем определять анимацию / переходы в файле animate.component.ts:

import { Component, OnInit, Input } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
  selector: 'app-animate',
  templateUrl: './animate.component.html',
  styleUrls: ['./animate.component.css'],
  animations: [
    trigger('changeState', [
      state('state1', style({
        backgroundColor: 'green',
        transform: 'scale(1)'
      })),
      state('state2', style({
        backgroundColor: 'red',
        transform: 'scale(1.5)'
      })),
      transition('*=>state1', animate('300ms')),
      transition('*=>state2', animate('2000ms'))
    ])
  ]
})
export class AnimateComponent implements OnInit {
  @Input() currentState;
  constructor() { }
  ngOnInit() {
  }
}

Обратите внимание: сначала мы импортируем trigger, state, style, animate и transition из пакета @ angular / animations. Импортирование этих ресурсов дает нам возможность определить анимацию, которую мы хотели бы включить в эти компоненты.

Для определения анимации используется свойство анимации декоратора @Component. Используя функцию trigger внутри массива, который назначен этому свойству, мы определяем анимации, которые используются, если триггер changeState активирован (каждый раз, когда currentState изменение значения). Поэтому строковое значение changeState передается в вызов этой функции.

Второй параметр - это снова массив, состоящий из четырех элементов. Для первых двух элементов вызывается функция состояния и определяется стиль, который используется для state1 и state2. Для каждого состояния мы устанавливаем разный цвет фона и разный масштаб.

В качестве последних двух элементов мы определяем переходы (с помощью функции перехода). Первый переход определяется строкой * = ›state1. Это просто означает, что этот переход вызывается каждый раз, когда устанавливается state1, независимо от предыдущего состояния. Используя функцию анимации и передавая строковое значение 300 мс, мы определяем, что продолжительность перехода составляет 300 миллисекунд.

Аналогично определяется второй переход. Таким образом, мы определяем переход, который происходит при входе в state2.

Заключение

Angular Animations - это мощный способ реализовать сложные и привлекательные анимации для вашего одностраничного веб-приложения Angular. Следуя этому руководству, вы теперь имеете глубокое понимание того, как настроить и применить Angular Animations в вашем проекте Angular 6.

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

# 1 Angular 6 - Полное руководство

Осваивайте Angular (Angular 2+, включая Angular 6) и создавайте потрясающие, реактивные веб-приложения с преемником Angular.js
Go To Course…

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

Angular 6 анимаций с нуля