Angular - это очень известный фреймворк Typescript, который доступен с открытым исходным кодом и помогает в создании веб-приложений для мобильных устройств и настольных компьютеров. Обычно Animation обеспечивает движение иллюзий на веб-странице. Используя анимацию, мы можем улучшить веб-приложения и удобство работы пользователей. Angular анимация обычно строится на функциональности CSS, которая помогает создать любое свойство, которое учитывает браузер. Более того, Angular анимация включает в себя позиции, стили, размеры, цвета, трансформации и т. Д.
Angular - это структурная среда, которая включает множество модулей для веб-приложений. Angular направлен на то, чтобы упростить написание кода JavaScript и тратить на него много времени. Более того, это помогает легко создавать одностраничные приложения.
Чтобы получить более глубокие знания об Angularjs, вы можете записаться на живую демонстрацию на Angular Online Training.
В Angular доступно множество модулей для создания привлекательной анимации. Основными модулями анимации Angular являются @ angular / animations и @ angular / platform-browsers.
Ключевые кадры угловой анимации
Использование keyframes () в анимации Angular относится к набору стилей анимации, имеющим необязательные данные смещения. Он определяет процент применяемого общего времени анимации. Здесь используется вызов animate (). Ключевые кадры объясняют, как применяется каждая запись стиля, и место ключевого кадра в слоте анимации. Более того, анимация Angular использует множество функций, таких как анимация, стиль, переход, состояние, ключевые кадры, последовательность и т. Д. Анимация происходит только в течение заданного временного кадра с простым использованием функций. Кроме того, состояние анимации полезно для перемещения элемента анимации из одного состояния в другое.
Кроме того, мы можем создавать функции последовательной и групповой анимации. Здесь функция последовательности выполняет анимацию последовательно, тогда как групповая функция выполняет анимацию параллельно. Кроме того, метод ключевых кадров (..) импортирует из @ angular / animations. Метод также принимает один аргумент в виде массива AnimationStyleMetaData. Эти массивы также известны как методы style ().
Кроме того, функция keyframe () с анимацией Angular позволяет пользователям указывать различные промежуточные стили. Это происходит в рамках одного перехода, где каждое изменение стиля происходит внутри анимации.
Поднимите свою карьеру на новый уровень успеха с Angular Training
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-view
- нг-класс
- нг-повтор
- 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 Online Training от отраслевых экспертов, таких как IT Guru. Это обучение может помочь получить отличные навыки в этом отношении, чтобы сделать успешную карьеру в сфере информационных технологий. Практический опыт обучения может значительно улучшить положение соискателя на рынке.
