Angular — это очень известный фреймворк Typescript с открытым исходным кодом, который помогает создавать веб-приложения для мобильных и настольных компьютеров. Обычно анимация обеспечивает движение иллюзий на веб-странице. Используя анимацию, мы можем улучшить веб-приложения и пользовательский опыт. Угловая анимация обычно построена на функциональности CSS, которая помогает создавать любое свойство, которое рассматривает браузер. Кроме того, анимация Angular включает в себя позиции, стили, размеры, цвета, преобразования и т. д.
Angular — это структурная структура, которая поставляется с множеством модулей для веб-приложений. Angular направлен на упрощение написания кода JavaScript и траты на него большого количества времени. Кроме того, это помогает легко создавать одностраничные приложения.
В Angular доступно множество модулей для создания привлекательных анимаций. Основными модулями анимации Angular являются @angular/animations и @angular/platform-browsers.
Чтобы получить углубленные знания об Angularjs, вы можете записаться на демоверсию в разделе Онлайн-обучение Angularjs.
Ключевые кадры угловой анимации
Использование ключевых кадров () в анимации Angular относится к набору стилей анимации, имеющих необязательные данные смещения. Он указывает процент применяемой общей продолжительности анимации. Здесь используется вызов animate(). Ключевые кадры объясняют, как применяется каждая запись стиля, и место ключевого кадра в слоте анимации. Кроме того, анимация Angular использует множество функций, таких как анимация, стиль, переход, состояние, ключевые кадры, последовательность и т. д. Анимация происходит только для заданного периода времени с простым использованием функций. Кроме того, состояние анимации полезно для перемещения элемента анимации из одного состояния в другое.
Кроме того, мы можем создавать последовательности и функции групповой анимации. Здесь функция последовательности выполняет анимацию последовательно, тогда как групповая функция выполняет анимацию параллельно. Кроме того, метод ключевых кадров (..) импортирует из @angular/animations. Метод также принимает один аргумент в виде массива AnimationStyleMetaData. Эти массивы также известны как методы style().
Поднимите свою карьеру на новый уровень успеха с Angular Training
Кроме того, функция keyframe() с анимацией Angular позволяет пользователям указывать различные промежуточные стили. Это происходит в рамках одного перехода, когда каждое изменение стиля происходит в анимации.
слайд ng-animate
Анимация Angular объявляется под @component, который проектирует класс, чтобы отделить его как компонент от Angular. Анимации связаны с их основными компонентами через метаданные декоратора. ng-Animate — это набор многоразовых и гибких анимаций, полезных в этой технологии. Это помогает реализовать все анимации в animate.css. Более того, чтобы приложение было готово к анимации, оно должно включать библиотеку анимации AngularJS. Синтаксис, используемый для всего слайда ngAnimate, следующий.
<body ng-app="ngAnimate">
Чтобы добавить ng-animate в качестве зависимости в модуль приложения, если имя приложения существует. Мы используем,
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
Модуль ngAnimate помогает добавлять/удалять классы. Модуль ngAnimate в анимации Angular не анимирует элементы HTML пользователей. Кроме того, в AngularJS есть несколько директив, полезных для добавления или удаления различных классов. Они есть;
- нг-скрыть
- нг-шоу
- нг-просмотр
- нг-класс
- нг-повторить
- ng-if
- нг-переключатель
Здесь директивы ng-show и ng-hide полезны для добавления или удаления значения класса ng-hide. Директива ng-repeat также полезна для добавления значения класса ng-move, когда элемент HTML меняет свою позицию. ng-view добавляет класс ng-enter при входе в DOM. При выходе из DOM добавляется класс ng-leave. Точно так же ng-include и ng-repeat также указывают одни и те же значения свойств при добавлении или выходе из DOM. Более того, элемент HTML, имеющий определенный набор классов, удаляет их после завершения анимации.
Анимация ng-view с помощью переходов CSS3
В анимации Angular директива ng-view полезна как контейнер для перезагрузки части страницы. Это полезно, когда пользователь хочет переключаться между различными представлениями. Как и добавление или удаление элементов с помощью ng-if, это тоже делается быстро. Более того, если пользователь хочет анимировать значения, входящие или выходящие из элементов в представление, он может использовать классы ng-enter, ng-enter-active, ng-leave, ng-leave-active и т. д. Использование класса ng-animate предоставит правила CSS, необходимые при применении анимации. Здесь мы можем использовать определенный пример этого.
.planet-view.ng-animate {
transition: all ease 0.4s;
position: absolute;
}
.planet-view.ng-enter {
top: 200px;
opacity: 0;
}
.planet-view.ng-leave,
.planet-view.ng-enter.ng-enter-active {
top: 0;
opacity: 1;
}
.planet-view.ng-leave.ng-leave-active {
top: -200px;
opacity: 0;
}
Приведенный выше пример объясняет состав атмосферы планет. Здесь мы видим, что между свойствами планеты применяется переход. При этом, когда в поле зрения попадает какая-либо информация о какой-либо планете, непрозрачность начинается с 0, а верхняя позиция устанавливается на 200 пикселей. Кроме того, элементы, покидающие вид, имеют непрозрачность, равную 1. Более того, в конце этого перехода все входящие элементы достигают верхней позиции вида, и он становится полностью непрозрачным.
Точно так же мы можем использовать ng-repeat для анимации с использованием некоторых анимаций ключевых кадров.
Обратный вызов угловой анимации
Во время анимации он запускает обратный вызов, когда анимация начинается и закрывается. Чтобы показать это, пользователь может зарегистрировать значение события, упомянув приведенный ниже код.
import { Component, HostBinding } from "@angular/core";
import {
trigger,
transition,
style,
animate,
state
} from "@angular/animations";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
animations: [
trigger("openClose", [
state(
"true",
style({ height: "200px", opacity: 1, backgroundColor: "yellow" })
),
state(
"false",
style({ height: "100px", opacity: 0.5, backgroundColor: "green" })
),
transition("false <=> true", animate(500))
])
]
})
export class AppComponent {
onAnimationEvent(event: AnimationEvent) {
console.log(event);
}
}
Здесь обратный вызов onAnimationEvent полезен, чтобы указать, что анимация начинается и заканчивается соответственно. Кроме того, он полезен для отладки еще и потому, что предлагает информацию о состоянии и элементах анимации.
Преимущества использования анимации в Angular
Использование ngAnimate для создания анимации в Angular дает пользователям больше преимуществ. Он предлагает различные виды директив и таблиц стилей CSS, которые помогают сделать страницу более привлекательной. Дизайн и анимация помогают улучшить внешний вид контента и привлечь больше зрителей. Более того, это поможет любому бизнесу привлечь своих клиентов в свои границы. Анимации дают пользователю богатый опыт просмотра хорошего веб-сайта или веб-страницы. Он обеспечивает иллюзии движений внутри контента.
При создании анимаций следует помнить, что они не используются повторно. Потому что это отвлекает внимание пользователя и заставляет его отойти от представления. Особенно этого следует избегать в основном приложении. Если создатель считает нужным добавить анимацию в том или ином пространстве, то добавлять их должен только он.
Наконец, мы прошли процесс создания анимации Angular с помощью ngAnimate и других ключевых кадров, которые помогают в этом отношении. Угловая анимация придает большую популярность веб-страницам и приложениям. Это делает их привлекательными и улучшает их качество. Использование ngAnimate вместе с некоторыми свойствами CSS помогает пользователю создавать динамические веб-страницы. Каждый пользователь использует эти представления и стили, чтобы сделать веб-приложение более креативным и привлекательным. Более того, это не только повышает качество приложения, но и вовлекает зрителя.
Чтобы получить больше информации об использовании анимации, вы можете выбрать Онлайн-обучение Angular от отраслевых экспертов, таких как IT Guru. Это обучение может помочь получить отличные навыки в этом отношении, чтобы сделать успешную карьеру в области ИТ. Практический опыт обучения может значительно улучшить положение стремящегося на рынке.
