Как использовать анимацию с угловым 6

Автор оригинала: FreeCodeCamp Community Member.

Вступление

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

Угловой позволяет нам создавать анимацию, которые предоставляют нам аналогичные родные характеристики в качестве анимации CSS. В этой статье мы узнаем, как мы можем создавать анимацию, используя угловые 6.

Мы будем использовать код Visual Studio для нашей демонстрации.

Предпосылки

Установите VS код и угловые CLI.

Если вы новичок в угловой, тогда обратитесь к моей предыдущей статье Начало работы с угловой 6.0 Чтобы установить угловую среду разработки на вашей машине.

Исходный код

Загрузите исходный код из Github Отказ

Понимание угловых анимационных состояний

Анимация включает переход из одного состояния элемента в другое состояние. Угловой Определяет три разных состояния для элемента:

1. Недействительное состояние – представляет собой состояние элемента, которое не является частью дома. Это состояние происходит, когда элемент создан, но еще не помещен в DOM или элемент удаляется из DOM. Это состояние полезно, когда мы хотим создать анимацию при добавлении или удалении элемента из нашего DOM. Чтобы определить это состояние в нашем коде, мы используем ключевое слово пустота Отказ
2. Состояние подстановки – это также известно как состояние элемента по умолчанию. Стили, определенные для этого состояния, применимы к элементу независимо от его текущего состояния анимации. Чтобы определить это состояние в нашем коде, мы используем * символ.
3. Пользовательское состояние – это пользовательское состояние элемента, и его необходимо определить явно в коде. Чтобы определить это состояние в нашем коде, мы можем использовать любую пользовательское название нашего выбора.

Сроки перехода анимации

Чтобы показать переход анимации из одного состояния в другой, мы определяем время анимационного перехода в нашем приложении.

Угловой обеспечивает следующие три свойства Timing:

Продолжительность

Это свойство представляет время нашу анимацию, чтобы завершить от начала (начального состояния), чтобы закончить (конечное состояние). Мы можем определить продолжительность анимации следующими тремя способами:

• Использование целочисленного значения для представления времени в миллисекундах. E.G.- 500.
• Использование строкового значения для представления времени в миллисекундах. Например. – ‘500 мс
• Используя строковое значение для представления времени в секундах. Например. – «0,5с»

Задерживать

Это свойство представляет продолжительность между анимационным триггером и началом фактического перехода. Это свойство также следует за тем же синтаксисом, что и продолжительность. Чтобы определить задержку, нам нужно добавить значение задержки после значения длительности в формате строки – «Продолжительность задержки». Задержка – это дополнительное свойство.

Например:

• 0.3S 500 мс. Это означает, что переход будет ждать 500 мс, а затем запускается на 0,3 с.

Ослабление

Это свойство представляет, как анимация ускоряется или замедляется во время его выполнения. Мы можем определить ощущение, добавив его как третью переменную в строке после продолжительности и задержки. Если значение задержки нет, то ослабление будет второе значение. Это также необязательное свойство.

Например:

• «0.3S 500 мс одобряет» – это означает, что переход будет дождаться 500 мс, а затем запускается на 0,3с (300 мс) с ослаблением.
• «300 мс ослабление». – Это означает, что переход будет работать на 300 мс (0,3с) с эффектом ослабления.

Создание угловых 6 приложений

Откройте командную строку в вашей машине и выполните следующий набор команд:

• Mkdir NganimationDemo.
• CD NganimationDemo.
• NG New Nganimation

Эти команды создадут каталог с именем NganimationDemo а затем создать угловое приложение с именем нманимация внутри этого каталога.

Откройте приложение Nganimation с использованием VS-кода. Теперь мы создадим наш компонент.

Перейдите к Просмотр >> Интегрированный терминал. Это откроет окно терминала в VS-коде.

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

ng g c animationdemo

Это создаст наш компонент AnimationDemo внутри /src/app папка.

Чтобы использовать угловую анимацию, нам нужно импортировать БраузеранимацииModule который является анимационным модулем в нашем приложении. Откройте файл 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])
    ]
  ]
})

Здесь мы будем использовать недвижимость под названием анимации Отказ Это свойство примет массив в качестве ввода. Массив содержит один или несколько «триггера». Каждый триггер имеет уникальное имя и реализацию. Состояние и переходы для нашей анимации необходимо определить в реализации триггера.

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

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

Эти функции триггер, и состояние и переход определены в @ Угловая/анимация модуль. Следовательно, нам нужно импортировать этот модуль в нашем компоненте.

Чтобы применить анимацию на элементе, нам нужно включить имя триггера в определении элемента. Включите имя триггера, а затем @ Символ в теге элемента. Обратитесь к коду пример ниже:

Это применит триггер Изменяются к IV> элемент.

Давайте создадим несколько анимаций, чтобы лучше понять угловые концепции анимации.

Изменить размер анимации

Мы создадим анимацию, чтобы изменить размер A IV> Элемент на кнопке нажмите.

Открыть 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'))
  ]),
]

Здесь мы определили триггер EnverseivSize и два состояния функции внутри триггера. Элемент будет зеленым в «начальном» состоянии и будет красным с повышенной шириной и высотой в «окончательном» состоянии.

Мы определили переходы для изменения состояния. Переход от «Первоначального» состояния на «Финал» займет 1500 мс, а от «окончательного» государства на «первоначальный» займет 1000 мс.

Чтобы изменить состояние нашего элемента, мы определим функцию в определении класса нашего компонента. Включите следующий код в АнимацияdemoComponent класс:

currentState = 'initial';

changeState() {
  this.currentState = this.currentState === 'initial' ? 'final' : 'initial';
}

Здесь мы определили заграничить Способ, который переключает состояние элемента.

Открыть animationdemo.component.html Файл и добавьте следующий код:

Change the div size
Change Size

Мы определили кнопку, которая вызовет заграничить функция при щелчке. Мы определили IV> Элемент и применил анимацию TR IGer изменился Ivsize к нему. Когда мы нажимаем на кнопку, она будет переворачивать состояние O F

Перед выполнением приложения нам нужно включить ссылку на нашу AnimationDemo Компонент внутри app.component.html файл.

Открыть app.component.html файл. Вы можете видеть, что у нас есть какой-то HTML-код по умолчанию в этом файле. Удалите весь код и поместите селектор нашего компонента, как показано ниже:

Для выполнения кода запускается NG служить Команда в окне клемм VS кода. После запуска этой команды он попросит открыть http://localhost: 4200 в браузере. Итак, откройте любой браузер на своей машине и перейдите к этому 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'))
 ]),

Здесь вместо определения свойства ширины и высоты мы используем свойство преобразования для изменения размера от всех направлений. Переход произойдет, когда состояние элемента изменяется.

Добавьте следующий HTML-код в app.component.html файл:

Balloon Effect

Здесь мы определили DIV и применили стиль CSS, чтобы сделать его круг. Нажав на div, вызовет заграничить Способ переключения состояния элемента.

Откройте браузер, чтобы увидеть анимацию в действии, как показано ниже:

Исчезнуть и исчезнуть анимацию

Иногда мы хотим показать анимацию при добавлении или удалении элемента на DOM. Мы увидим, как оживить добавление и удаление элемента в список с эффектом исчезновения и исчезновения.

Добавьте следующий код внутри АнимацияdemoComponent Определение класса для добавления и удаления элемента в списке:

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 => ; *. Когда элемент удален из DOM, это переход от подстановочного знака (*) до состояния пустота. Это обозначено USI NG * => ; пустота.

Когда мы используем то же время анимации для обоих направлений анимации, мы используем синтаксис сокращения < ; =>. Как определено в этом триггере, анимация из Вой d = & g t; * и * => void займет 1000 мс для завершения.

Добавьте следующий HTML-код в файле app.component.html.

Fade-In and Fade-Out animation

Add List
Remove List


  

    

      {{list}}
    
  

Здесь мы определяем две кнопки, чтобы добавить элементы и удалить их из списка. Мы связываем триггер Fadeinout к < LI> Элемент, который покажет эффект исчезновения и исчезновения при добавлении и удалении из DOM.

Откройте браузер, чтобы увидеть анимацию в действии, как показано ниже:

Введите и оставить анимацию

При добавлении в DOM элемент войдет на экран слева. При удалении элемент оставит экран справа.

Переход от void => * и * => пустота очень распространен. Следовательно, угловые обеспечивает псевдонимы для этих анимаций:

• для void => * мы можем использовать ‘: Enter’
• Для * => пустота мы можем использовать «: оставить»

Псевдонимы делают эти переходы более читаемыми и легче понять.

Добавьте следующее определение триггера в свойстве анимации:

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 Отказ Переход «: Enter» будет ждать 300 мс, а затем запускается на 0,5-е годы с эффектом простота. Принимая во внимание, что «Переход« Оставьте переход »будет работать в течение 0,3 с эффектом ослабления.

Добавьте следующий HTML-код в app.component.html файл:

Enter and Leave animation

Add List
Remove List


  

    

      {{list}}
    
  

Здесь мы определяем две кнопки, чтобы добавить элементы и удалить их из списка. Мы обязательно Enterleave триггер к < Li> Элемент, который покажет эффект ввода и оставшегося во время добавления и удаления из DOM.

Откройте браузер, чтобы увидеть анимацию в действии, как показано ниже:

Заключение

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

Пожалуйста, получите исходный код из Github и играть вокруг, чтобы получить лучшее понимание.

Если вы готовитесь к интервью, прочитайте мою статью на C # Кодирование вопросов для технических интервью Отказ

Смотрите также

• CORE ASP.NET – с использованием HighCharts с угловым 5
• ASP.NET CORE – CRUD, использующий угловую 5 и основной сердечник сущности
• Операции CRUD с ядром ASP.NET с использованием угловых 5 и ADO.Net
• ASP.NET CORE – Начало работы с Blazor
• Crud использует Blazor с MongoDB
• Создание SPA с помощью страниц бритвы с Blazor

Первоначально опубликовано в https://ankitsharmablogs.com/