[MUSIC]
Давайте получим краткий обзор поддержки анимации в угловом, прежде чем мы идем и
попробовать наши силы на самом деле реализации некоторых анимаций в нашем угловом приложении.
Как вы понимаете, сами по себе анимации
не добавляют к функциональности вашего Angular приложения.
Тогда возникает вопрос, зачем использовать анимацию?
Теперь, если вы посмотрите на него с пользовательского опыта, или
с точки зрения дизайна пользовательского интерфейса, то вы начинаете видеть, что анимации
имеют смысл и цель для их использования в приложении.
Дайте визуальную обратную связь пользователю о
вещах, которые происходят в вашем угловом приложении.
Таким образом, вы можете иметь приложение полностью лишен анимации и
, что оно по-прежнему обеспечивает тот же набор функций.
Так что это то, что нам нужно иметь в виду
, когда мы вводим анимации в наше угловое приложение.
Анимация не требуется или не требуется, но
они добавляют эту маленькую специю к вашему угловатому приложению, если вы держите это представление в
ваш ум, то вы будете подходить к анимации с совершенно другой точки зрения.
Это как не добавлять слишком много соли в ваши блюда только потому, что соль добавляет вкус.
Для большей части соли также портит ваше блюдо.
То же самое с анимацией тоже.
Слишком много анимации и вы в конечном итоге с запутанным пользователем.
Но анимации, добавленные в тонко, чтобы дать предложения пользователям, или
дать визуальную обратную связь пользователям, добавляют большую ценность для вашего углового приложения.
Теперь, к счастью, угловая структура материала, которую мы уже используем в рамках
нашего углового приложения, поставляется со своим собственным встроенным набором анимации.
Действительно, именно поэтому мы включили модуль анимации браузера.
В нашем угловом приложении прямо в начале, потому что угловой
материал уже использует поддержку анимации, которую
угловой обеспечивает через или это анимация.
Таким образом, библиотека угловых материалов
использует предложенную анимацию, которая поставляется с дизайном материала.
Такие вещи, как, например, когда вы нажимаете на кнопку,
эффекты пульсации, которые вы видите на кнопке и тонкое увеличение,
и уменьшение различных частей вашего представления, и так далее.
Они уже предложены подходом к материальному дизайну, и
так угловой материал уже принимает многие из этих вещей.
Таким образом, даже без явного прикладывания усилий,
вы автоматически получаете некоторые из необходимых анимаций в
ваше угловое приложение просто с помощью углового материала.
Но предположим, что вы хотите добавить свою пряность в микс.
Тогда, как вы подходите к анимации в угловом?
Это то, что мы быстро рассмотрим в этой лекции.
А затем перейти к упражнению, где мы будем реализовывать fu и посмотреть, если мы имеем смысл
или если они имеют значение для того, как вы воспринимаете ваше угловое приложение.
Идея поддержки Angular для анимации
заключается в том, что она позволяет создавать анимации с почти
родной производительностью того, что вы получите с чистыми анимациями CSS.
Теперь вы можете сразу задаться вопросом,
почему бы просто не использовать чистую анимацию CSS?
Действительно, вы можете это сделать, но ничто не мешает вам использовать чистую анимацию CSS в вашем Angular приложении.
Но преимущество использования
углового подхода к внедрению анимации заключается в том, что угловая,
в первую очередь, использует поддержку API веб-анимации, который поддерживается
в более современных версиях всех браузеров.
Теперь, так что если ваша версия браузера уже поддерживает Web Animations API,
, то Angular просто использовать начало для
поддержки анимации, которые вы будете включать в ваше приложение Angular.
Если нет, то вам нужно использовать полизаполнение
под названием web-animations.min.js в вашем угловом приложении.
В упражнениях мы начнем с предположения, что мы нацелены на современные браузеры
, поэтому я явно не включаю полифилл.
Если вы решите сделать это, документация по угловым анимациям
явно указывает вам, как заполнить это для таргетинга старых браузеров.
Итак, снова возвращаясь к вопросу,
почему бы не использовать чистую анимацию CSS, а не использовать угловую анимацию?
Теперь здесь
преимущество использования угловой анимации в вашем приложении выходит на первый план.
Тот факт, что угловая анимация тесно связана
с вашим кодом, который вы пишете для своего углового приложения.
И, следовательно, вы можете вызвать многие из этих анимаций, привязанных в
непосредственно к тому, как развивается ваше угловое приложение, и
, что происходит в вашем угловом приложении.
Таким образом, вы можете связать его с жизненным циклом ваших компонентов.
Вы можете связать его с различными этапами изменения представления
во время рендеринга представления.
И так это преимущество, которое вы получаете от использования библиотеки Angular Animations,
вместо чистых анимаций CSS, - это то, что стоит рассмотреть.
Как мы подходим к анимации в Angular?
Сами анимации построены вокруг состояний и
переходов между состояниями в угловой структуре, поэтому
мы определяем разные состояния, состояние может быть что угодно, но
вы хотите определить как состояние с точки зрения анимации.
Любое изменение состояния, которое вы хотите вызвать
, может вызвать эффект анимации, чтобы появиться в картинке.
Таким образом, переходы вдоль состояний вызовут поведение анимации
в вашем угловом приложении.
Как мы увидим в следующем слайде, где я покажу вам пример
, как вы можете использовать ленты и переходы для запуска анимации.
Таким образом, анимационный аспект вашего углового приложения
определяется внутри декоратора компонентов, который вы используете в своих компонентах.
Таким образом, декоратор компонентов имеет анимацию цветов свойств, которую вы
будете использовать для определения триггеров значений для ваших анимаций.
Так что я использовал слово триггер.
В упражнениях вы увидите, как мы будем реализовывать триггеры для анимации
и как мы будем применять триггеры к различным элементам шаблона,
, а затем запускать эти анимации при определенных обстоятельствах.
И кроме того, когда вам нужно использовать анимацию в вашем приложении Angular
, в первую очередь, вам нужно импортировать модуль анимации браузера.
Мы уже сделали это в нашем первом упражнении, потому что
модуль анимации браузера был необходим для поддержки углового материала.
Теперь, кроме того, когда вы реализуете анимацию в своих компонентах.
Тогда вам понадобится помощь классов радиуса, таких как триггер, состояние,
стиль, animate,
переход, которые должны быть импортированы из библиотеки Angular animations.
И мы будем делать это в каждом компоненте, который требует использования анимации.
Как я уже упоминал в предыдущем слайде, поведение анимации в вашем
Angular приложении вращается вокруг состояний и переходов между состояниями.
Штаты могут быть все, что вы определяете как состояние.
Как вы увидите в примере, который следует в самом первом упражнении после этой лекции
, вы были определены 2 состояния, называемых показано и скрыто.
Из названия государства вы автоматически
начинаете угадывать, что означают эти два состояния.
Теперь, когда вы переходите из отображаемого состояния в скрытое, переход
из показанного в скрытое состояние вызовет своего рода анимацию.
Так что, может быть, вы скрываете элемент в вашем представлении
, изменив непрозрачность элемента,
непрозрачность означает, насколько прозрачен элемент и непрозрачность
означает, что элемент полностью непрозрачный и видимый на экране.
Если установить непрозрачность в ноль, элемент полностью исчезает с экрана.
Мы не удаляем этот элемент из
, просто скрывая этот элемент, изменяя его непрозрачность.
Итак, таким образом, вы можете спровоцировать.
Аналогично, вы можете изменить размер элемента.
Вы можете расширить или сократить размер элемента, применив преобразование к свойству
этого элемента с помощью преобразования масштаба для элемента.
Мы увидим примеры, как я сказал в следующем упражнении.
Таким образом, все анимации, которые вы описываете в своем угловом приложении
в директиве компонента с использованием свойства анимации
, будут вращаться вокруг состояний и переходов между состояниями.
Когда вы говорите о состояниях и переходах, есть несколько специальных состояний
, которые мы должны учитывать при определении этих переходов.
Одно из этих государств называется пустым государством.
И элемент, которого нет на экране.
Элемент или вид частиц, который не прикреплен к виду
, будет считаться в состоянии пустоты.
Таким образом, когда элемент появляется в представлении,
, что если он прикреплен к примеру, то элемент переходит из
состояние пустоты в одно из существующих состояний этого элемента.
Таким образом, в этом случае
вы можете определить переход от перехода от пустоты к заданному состоянию.
Аналогично, у вас также есть другое государство, называемое подстановочным состоянием, или
оно определяется звездой, что означает, что вас не волнует, какое это состояние.
Поэтому, если вам нужно определить переход, вы можете сказать,
, если вы переходите из состояния void в состояние звезды, то есть из состояния void в любое
другое состояние, которое вы переходите, вы можете применить определенное преобразование.
Таким образом, это два специальных способа определения определенных состояний
при определении анимации в компоненте декоратора.
Так, в частности, есть несколько способов
описания переходов, которые представляют особый интерес для курса.
Переход из состояния void в любое состояние может быть описан просто с помощью
двоеточия enter, вместо того, чтобы говорить пустоту стрелка звезда.
Таким образом, вы увидите, что мы будем использовать стрелку
для описания переходов между состоянием.
Так что это синтаксис, который вы увидите, как я использую, когда я создаю переходы.
Аналогично, поэтому
пустота для любого другого состояния может быть описана простым использованием двоеточия enter.
Таким образом, это означает, что это представление входит в
вид, который выкладывается на экране.
Аналогично, переход из любого состояния в состояние void,
означает, что вы удаляете этот элемент из представления.
Это было бы также, может быть указано как двоеточие,
означает, что этот элемент выходит из этого конкретного представления.
Таким образом, вы увидите меня, используя двоеточие enter и двоеточие уйти также где я описал
переходы во втором упражнении, которое вы увидите в этом уроке.
Итак, с этим быстрым пониманием анимации в угловом.
Давайте посмотрим, как мы на самом деле пишем код.
И для этого мы перейдем к упражнениям, где мы проиллюстрируем вам,
, как мы используем только что полученные знания о том, как анимации
описываются в угловом виде, чтобы написать код пропуска для
конструирования и применения анимации для
различных элементов в нашем виды наших компонентов.
[МУЗЫКА]