Учебное пособие по анимации Angular 9 для начинающих

Angular Animation обеспечивает иллюзию движения: элементы HTML со временем меняют стиль. Хорошо продуманная анимация может сделать ваше приложение более увлекательным и простым в использовании, но это не просто косметика. Анимация может улучшить ваше приложение и взаимодействие с пользователем несколькими способами:

  1. Без анимации переходы веб-страниц могут казаться резкими и резкими.
  2. Движение значительно улучшает взаимодействие с пользователем, поэтому анимация дает пользователям возможность определить реакцию приложения на их действия.
  3. Хорошая анимация интуитивно привлекает внимание пользователя к тому месту, где оно необходимо.

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

Система анимации Angular построена на функциональности CSS, что означает, что вы можете анимировать любое свойство, которое браузер считает анимируемым. Сюда входят позиции, размеры, преобразования, цвета, границы и многое другое. W3C поддерживает список анимируемых свойств на своей странице переходов CSS.

Пример угловой анимации

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

Во-первых, нам нужно установите Angular Project через Angular CLI.

Шаг 1. Установите Angular CLI глобально.

Выполните следующую команду в своем терминале.

 npm install -g @ angular/cli 

Шаг 2. Создайте новый проект.

Введите следующую команду.

 Новые анимации 

Шаг 3. Запустите приложение.

Перейдите в каталог проекта и запустите сервер.

 cd my-appng serve --open 

Шаг 4. Импорт модуля анимации.

Перейдите в файл app.module.ts и добавьте следующий код.

//app.module.tsimport {BrowserAnimationsModule} из '@ angular/platform-browser/animations';  импорт: [BrowserModule, BrowserAnimationsModule], 

Шаг 5. Используйте Bootstrap CSS Framework.

Перейдите на официальный сайт Bootstrap. Мы будем использовать CDN и вставим эти ссылки в наш файл index.html .

       Nganimation              

Шаг 6. Создайте компонент анимации.

В папке src >> app создайте один файл TypeScript с именем

//animate.component.tsimport {Component} from '@ angular/core'; @ Component ({selector: 'app-animate', template: `
`, стили: [` .myblock {цвет фона: зеленый; ширина: 300 пикселей; высота: 250 пикселей; радиус границы: 5 пикселей; маржа: 5бэр; } `]}) класс экспорта AnimateComponent {}

Теперь импортируйте этот компонент в файл app.module.ts .

//app.module.tsimport {AnimateComponent} из './animate.component'; декларации: [AppComponent, AnimateComponent], 

Наконец, включите селектор в приложение .component.ts .

//app.component.tsimport {Component} from '@ angular/core'; @ Component ({selector: 'app-root', template  : ` `, styleUrls: ['./app.component.css'ght})export class AppComponent {title =' Angular 5 Animations Tutorial ';} 

Итак, в браузере будет компонент "Зеленый прямоугольник".

Шаг 7. Создайте кнопки для запуска анимации.

Далее нам нужно определить правильную сетку в app.component.ts , чтобы разместить кнопки в браузере и запустить событие анимации на основе нажатия ev ent.

//app.component. tsimport {Component} из '@ angular/core'; @ Component ({selector: 'app-root', template: ``, styleUrls: ['./app.component.css'ght})export class AppComponent {title =  «Учебник по анимации Angular 5»;  nextState = 'нормальный';  animateSquare (состояние) {this.nextState = состояние;  }} 

Здесь я завершил код для кнопок и квадрата. Я объясняю, что происходит прямо сейчас.

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

Кроме того, выглядит наш файл app.component.css вот так.

 .buttonanimate {margin: 5rem;} 

Шаг 8. Напишите CSS-код анимации.

Я импортировал функции анимации в этот файл. Когда пользователь нажимает кнопку, этот блок анимации вызывает changeState и реагирует в соответствии с ним.

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

//animate.component.tsimport {Component, Input} from '@ angular/core'; import {trigger, state, style, animate,  transition} from '@ angular/animations'; @ Component ({селектор: 'app-animate', template: `
`, стили: [`.myblock {background-color: green; width: 300px; height: 250px; border-radius: 5px; margin: 5rem;}`], анимации: [trigger ('changeState', [state ('normal' , стиль ({backgroundColor: 'зеленый', преобразование: 'масштаб (1)'})), состояние ('анимированный', стиль ({backgroundColor: 'синий', преобразование: 'масштаб (1. 5) '})), transition (' * => normal ', animate (' 800ms ')), transition (' * => animated ', animate (' 200ms '))])]}) класс экспорта AnimateComponent {@ Input () currentState;}

Здесь @Input используется для получения свойства от родительского компонента. Таким образом, он получает состояние от родительского компонента и будет изменяться в соответствии с ним.

Репозиторий Github

Fork Me On Github

В коде Github есть более старая версия Angular, но в последняя версия также будет работать нормально.

Наконец, наш пример угловой анимации с нуля закончен.

Оцените статью
nanomode.ru
Добавить комментарий