Введение
Анимация определяется как переход от исходного состояния к конечному. Это неотъемлемая часть любого современного веб-приложения. Анимация не только помогает нам создать отличный пользовательский интерфейс, но также делает приложение интересным и веселым в использовании. Хорошо структурированная анимация поддерживает взаимодействие с программой и улучшает взаимодействие с пользователем.
Angular позволяет создавать анимацию, которая обеспечивает такую же нативную производительность, как и анимация CSS. В этой статье мы узнаем, как мы можем создать анимацию с помощью Angular 6.
Мы будем использовать код Visual Studio для нашей демонстрации.
Предпосылки
Установите код VS и Angular CLI.
Если вы новичок в Angular, обратитесь к моей предыдущей статье Начало работы с Angular 6.0, чтобы настроить среду разработки Angular 6 на вашем компьютере.
Исходный код
Загрузите исходный код из GitHub.
Понимание состояний угловой анимации
Анимация предполагает переход из одного состояния элемента в другое. Angular определяет три разных состояния для элемента:
- Void state — представляет состояние элемента, не являющегося частью DOM. Это состояние возникает, когда элемент создан, но еще не помещен в DOM или элемент удален из DOM. Это состояние полезно, когда мы хотим создать анимацию при добавлении или удалении элемента из нашей DOM. Для определения этого состояния в нашем коде мы используем ключевое слово
void. - Состояние подстановки — также известно как состояние элемента по умолчанию. Стили, определенные для этого состояния, применимы к элементу независимо от текущего состояния анимации. Чтобы определить это состояние в нашем коде, мы используем
*символ. - Специальное состояние – это пользовательское состояние элемента, и его нужно четко определить в коде. Чтобы определить это состояние в нашем коде, мы можем использовать любое имя пользователя по своему выбору.
Время перехода анимации
Чтобы показать переход анимации из одного состояния в другое, мы определяем время перехода анимации в нашем приложении.
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-адресу. Вы можете просмотреть веб-страницу, как показано ниже. Нажмите кнопку, чтобы увидеть анимацию.
Анимация с эффектом воздушного шара
В предыдущей анимации переход проходил в двух направлениях. В этой главе мы узнаем, как изменить размер со всех сторон. Это будет похоже на надувание и спуск воздушного шара, отсюда и название анимация эффекта воздушного шара.
Добавьте следующее определение триггера в свойство анимации:
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 способ переключения состояния элемента.
Откройте браузер, чтобы увидеть анимацию в действии, как показано ниже:
Анимация: 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 к
, показывающий эффект угасания и угасания при добавлении и удалении из 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 файл: <Здесь мы определяем две кнопки, в которые можно добавить элементы и удалить их из списка. Мы связываем
триггер до
, показывающий эффект входа и выхода при добавлении и удалении из DOM.» width=»628″ height=»492″ loading=»lazy»/>iy70cW0uBOkKv9iGxVGf7xrxjvuVlywgzlsQ
Введите и выйдите из анимации с помощью Angular 6
Вывод
В этой статье мы узнали об анимации Angular 6. Мы исследовали понятие анимационных состояний и переходов. Мы также увидели несколько анимаций в действии с помощью примера программы.
Пожалуйста, получите исходный код из GitHub и поиграйте, чтобы лучше понять.
Если вы готовитесь к собеседованию, прочтите мою статью о кодировании C# для технических собеседований.
См. такжеСначала опубликовано на