Как использовать анимацию из Angular 6

kak ispolzovat animacziyu iz angular 6

Введение

Анимация определяется как переход от исходного состояния к конечному. Это неотъемлемая часть любого современного веб-приложения. Анимация не только помогает нам создать отличный пользовательский интерфейс, но также делает приложение интересным и веселым в использовании. Хорошо структурированная анимация поддерживает взаимодействие с программой и улучшает взаимодействие с пользователем.

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

Мы будем использовать код Visual Studio для нашей демонстрации.

Предпосылки

Установите код VS и Angular CLI.

Если вы новичок в Angular, обратитесь к моей предыдущей статье Начало работы с Angular 6.0, чтобы настроить среду разработки Angular 6 на вашем компьютере.

Исходный код

Загрузите исходный код из GitHub.

Понимание состояний угловой анимации

Анимация предполагает переход из одного состояния элемента в другое. Angular определяет три разных состояния для элемента:

  1. Void state — представляет состояние элемента, не являющегося частью DOM. Это состояние возникает, когда элемент создан, но еще не помещен в DOM или элемент удален из DOM. Это состояние полезно, когда мы хотим создать анимацию при добавлении или удалении элемента из нашей DOM. Для определения этого состояния в нашем коде мы используем ключевое слово void.
  2. Состояние подстановки — также известно как состояние элемента по умолчанию. Стили, определенные для этого состояния, применимы к элементу независимо от текущего состояния анимации. Чтобы определить это состояние в нашем коде, мы используем * символ.
  3. Специальное состояние – это пользовательское состояние элемента, и его нужно четко определить в коде. Чтобы определить это состояние в нашем коде, мы можем использовать любое имя пользователя по своему выбору.

Время перехода анимации

Чтобы показать переход анимации из одного состояния в другое, мы определяем время перехода анимации в нашем приложении.

Angular придает следующие три свойства времени:

Продолжительность

Это свойство представляет время, за которое наша анимация завершится от начала (начальное состояние) до завершения (конечное состояние). Продолжительность анимации можно определить тремя способами:

  • Использование целого значения для представления времени в миллисекундах. Например – 500
  • Использование строкового значения для представления времени в миллисекундах. Например – «500 мс»
  • Используйте строковое значение для представления времени в секундах. Например – «0,5 с»

Задержка

Это свойство представляет длительность между триггером анимации и началом фактического перехода. Это свойство также обладает тем же синтаксисом, что и продолжительность. Чтобы определить задержку, нам нужно добавить значение задержки после продолжительности в строковом формате — «Задержка продолжительности». Задержка является необязательным свойством.

Например:

  • «0,3с 500 мс». Это означает, что переход будет ждать 500 мс, а затем будет выполняться в течение 0,3 секунды.

Ослабление

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

Например:

  • ‘0,3s 500ms ease-in’ — Это означает, что переход будет ждать 500ms, а затем будет выполняться в течение 0,3s (300ms) с эффектом облегчения.
  • «Увольнение на 300 мс». — Это означает, что переход будет длиться 300 мс (0,3 с) с эффектом облегчения.

Создание программы Angular 6

Откройте командную строку на своей машине и выполните следующий набор команд:

  • mkdir ngAnimationDemo
  • CD ngAnimationDemo
  • Новая ngAnimation

Эти команды создадут каталог с именем ngAnimationDemo а затем создайте программу Angular с именем ngAnimation внутри этого каталога

Откройте приложение ngAnimation с помощью кода VS. Теперь мы создадим наш компонент.

Перейдите к View >> Integrated Terminal. Это откроет окно терминала в VS Code.

Выполните команду, чтобы создать компонент.

ng g c animationdemo

Это создаст наш компонент animationdemo внутри /src/app папку.

Чтобы использовать анимацию Angular, нам нужно импортировать BrowserAnimationsModule который специфичен для анимации модулем в нашей программе. Откройте файл app.module.ts и добавьте определение импорта, как показано ниже:

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

@NgModule({ imports: [BrowserAnimationsModule // other imports]})

Понимание синтаксиса угловой анимации

Мы напишем наш код анимации внутри метаданного компонента. Синтаксис анимации показан ниже:

@Component({
// other component properties.
  animations: [
    trigger('triggerName'), [
      state('stateName', style())
      transition('stateChangeExpression', [Animation Steps])
    ]
  ]
})

Здесь мы будем использовать свойство под названием animations. Это свойство будет принимать массив как входные данные. Массив содержит один или несколько «триггеров». Каждый триггер имеет уникальное название и реализацию. Состояние и переходы для нашей анимации нужно определить в реализации триггера.

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

Каждая функция перехода имеет a stateChangeExpression определено, чтобы показать изменение состояния элемента и соответствующий массив шагов анимации, чтобы показать, как будет происходить переход. Мы можем включить несколько функций триггера внутри свойства анимации как значения, разделенные запятыми.

Эти функции запускают, а состояние и переход определяются в @angular/animations модуль. Итак, нам нужно импортировать этот модуль в наш компонент.

Чтобы применить анимацию к элементу, нужно включить название триггера в определение элемента. Включите название триггера, а затем @ символ в элементе тега. Обратитесь к примеру кода ниже:

<div @changeSize></div>

Это применит триггер changeSize к <div> элемент.

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

Анимация изменения размера

Мы создадим анимацию для изменения размера a <div> элемент при нажатии кнопки.

Откройте animationdemo.component.ts файл и добавьте следующее определение импорта:

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

Добавьте следующее определение свойства анимации в метаданные компонента:

animations: [
  trigger('changeDivSize', [
    state('initial', style({
      backgroundColor: 'green',
      width: '100px',
      height: '100px'
    })),
    state('final', style({
      backgroundColor: 'red',
      width: '200px',
      height: '200px'
    })),
    transition('initial=>final', animate('1500ms')),
    transition('final=>initial', animate('1000ms'))
  ]),
]

Здесь мы определили триггер changeDivSize и две функции состояния внутри триггера Элемент будет зеленым в «начальном» состоянии и красным с увеличенной шириной и высотой в «конечном» состоянии.

Мы определили переходы по изменению состояния. Переход из «начального» состояния в «финальное» займет 1500 мс, а из «конечного» состояния в «начальное» — 1000 мс.

Чтобы изменить состояние нашего элемента, мы определим функцию в определении класса компонента. Включите следующий код в AnimationdemoComponent класс:

currentState="initial";

changeState() {
  this.currentState = this.currentState === 'initial' ? 'final' : 'initial';
}

Здесь мы определили а changeState метод, изменяющий состояние элемента.

ОТКРЫТО animationdemo.component.html файл и добавьте следующий код:

<h3>Change the div size</h3>
<button (click)="changeState()">Change Size</button>
<br />
<div [@changeDivSize]=currentState></div>
<br />

Мы определили кнопку, которая будет вызывать changeState функция при нажатии. Мы определили а <div> и применил анимацию trigger changeDivSize к нему. Когда мы нажимаем на кнопку, она переворачивает состояние of the Элемент

и их размер изменятся с эффектом перехода.

Перед выполнением программы нам нужно включить ссылку на наш Animationdemo компонент внутри app.component.html файл.

ОТКРЫТО app.component.html файл. Вы можете увидеть, что в этом файле есть HTML-код по умолчанию. Удалите весь код и поставьте селектор нашего компонента, как показано ниже:

<app-animationdemo></app-animationdemo>

Чтобы выполнить код, запустите ng serve команду в окне терминала кода VS. После выполнения этой команды она попросит открыть в браузере. Итак, откройте любой браузер на своем компьютере и перейдите по этому URL-адресу. Вы можете просмотреть веб-страницу, как показано ниже. Нажмите кнопку, чтобы увидеть анимацию.

aeLhzRqHdU1Gub7GL3WOvtgno7fMuRnwuy4H
Измените размер Div с помощью анимации Angular

Анимация с эффектом воздушного шара

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

Добавьте следующее определение триггера в свойство анимации:

trigger('balloonEffect', [
   state('initial', style({
     backgroundColor: 'green',
     transform: 'scale(1)'
   })),
   state('final', style({
     backgroundColor: 'red',
     transform: 'scale(1.5)'
   })),
   transition('final=>initial', animate('1000ms')),
   transition('initial=>final', animate('1500ms'))
 ]),

Здесь вместо определения свойств ширины и высоты мы используем свойство transform для изменения размера со всех сторон. Переход произойдет при изменении состояния элемента.

Добавьте следующий HTML-код в файле app.component.html файл:

<h3>Balloon Effect</h3>
<div (click)="changeState()" 
  style="width:100px;height:100px; border-radius: 100%; margin: 3rem; background-color: green"
  [@balloonEffect]=currentState>
</div>

Здесь мы определили div и применили стиль CSS, чтобы сделать его круг. При нажатии на div вызывается changeState способ переключения состояния элемента.

Откройте браузер, чтобы увидеть анимацию в действии, как показано ниже:

O8B90gJ8NVLnCmA1WStQAlqxeRUHnertm6G6
Анимация с эффектом воздушного шара с помощью Angular 6

Анимация: Fade In и Fade Out

Иногда мы хотим показать анимацию при добавлении или удалении элемента в DOM. Мы рассмотрим, как анимировать добавление и удаление элемента из списка с помощью эффекта угасания и угасания.

Добавьте следующий код внутрь AnimationdemoComponent определение класса для добавления и удаления элемента в списке:

listItem = [];
list_order: number = 1;

addItem() {
  var listitem = "ListItem " + this.list_order;
  this.list_order++;
  this.listItem.push(listitem);
}
removeItem() {
  this.listItem.length -= 1;
}

Добавьте следующее определение триггера в свойство анимации:

trigger('fadeInOut', [
  state('void', style({
    opacity: 0
  })),
  transition('void <=> *', animate(1000)),
]),

Здесь мы определили триггер fadeInOut. Когда элемент добавляется к DOM, это переход от void к символу подстановки. void =>государство. Это сказывается использованиемng * =>; *. Когда элемент удаляется из DOM, это переход от подстановки.

к недействительному состоянию. Это сказывается usi <; недействителен. from voiКогда мы используем одинаковое время анимации для обоих направлений анимации, мы используем сокращенный синтаксис.t; * and ;=>. Как определено в этом триггере, анимация

d =&g

<h3>Fade-In and Fade-Out animation</h3>

<button (click)="addItem()">Add List</button>
<button (click)="removeItem()">Remove List</button>

<div style="width:200px; margin-left: 20px">
  <ul>
    <li *ngFor="let list of listItem" [@fadeInOut]>
      {{list}}
    </li>
  </ul>
</div>

* => для завершения void потребуется 1000 мс. <Добавьте следующий HTML-код в app.component.html.

Здесь мы определяем две кнопки, в которые можно добавить элементы и удалить их из списка. Мы привязываем триггер fadeInOut к

1656525492 227 kak ispolzovat animacziyu iz angular 6, показывающий эффект угасания и угасания при добавлении и удалении из DOM.» width=»628″ height=»492″ loading=»lazy»/>
Откройте браузер, чтобы увидеть анимацию в действии, как показано ниже:

BbxpG-Sr4LlqQChVrxZtdRezMHifTwwM3-M3

Анимация нарастания и угасания с помощью Angular 6

Войти и оставить анимацию void => * При добавлении в DOM элемент будет входить в экран слева. При удалении элемент покинет экран справа. * => void Переход от

  • и
  • очень распространен. Поэтому Angular предоставляет псевдонимы для этих анимаций:

для void => * мы можем использовать ‘:enter’

для * => void мы можем использовать ‘:leave’

trigger('EnterLeave', [
  state('flyIn', style({ transform: 'translateX(0)' })),
  transition(':enter', [
    style({ transform: 'translateX(-100%)' }),
    animate('0.5s 300ms ease-in')
  ]),
  transition(':leave', [
    animate('0.3s ease-out', style({ transform: 'translateX(100%)' }))
  ])
])

Псевдонимы делают эти переходы более читабельными и более легкими для понимания. EnterLeaveДобавьте следующее определение триггера в свойство анимации:

Здесь мы определили триггер app.component.html . Переход ‘:enter’ будет ждать 300 мс, а затем будет производиться в течение 0,5 с с эффектом простоты. В то время как переход ‘:leave продлится 0,3 секунды с эффектом облегчения.

<h3>Enter and Leave animation</h3>

<button (click)="addItem()">Add List</button>
<button (click)="removeItem()">Remove List</button>

<div style="width:200px; margin-left: 20px">
  <ul>
    <li *ngFor="let list of listItem" [@EnterLeave]="'flyIn'">
      {{list}}
    </li>
  </ul>
</div>

Добавьте следующий HTML-код в файле EnterLeave файл: <Здесь мы определяем две кнопки, в которые можно добавить элементы и удалить их из списка. Мы связываем

триггер до

1656525493 568 kak ispolzovat animacziyu iz angular 6, показывающий эффект входа и выхода при добавлении и удалении из DOM.» width=»628″ height=»492″ loading=»lazy»/>
Откройте браузер, чтобы увидеть анимацию в действии, как показано ниже:

iy70cW0uBOkKv9iGxVGf7xrxjvuVlywgzlsQ

Введите и выйдите из анимации с помощью Angular 6

Вывод

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

Пожалуйста, получите исходный код из GitHub и поиграйте, чтобы лучше понять.

Если вы готовитесь к собеседованию, прочтите мою статью о кодировании C# для технических собеседований.

См. такжеСначала опубликовано на

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *