Хороший интерактивный дизайн создает положительный пользовательский опыт. Многие компании, создающие библиотеки компонентов, помимо всего прочего пишут документацию с разделами по анимации и даже поставляют готовые пакеты, помогающие строить переходы и движения по их спецификациям.
В этой статье мы рассмотрим виды анимации в веб-приложениях.
Паттерны UX/UI-анимации в дизайн-системах и их реализация в Angular. Также будет показан способ организации анимации в библиотеках с учетом повторного использования и кастомизации.
В предыдущих статьях я писал, что мы документируем в наших библиотеках:
- типография
- палитра
- значки
- сетка
- Angular компоненты (компоненты, директивы, пайпы, сервисы)
Давайте посмотрим на это.
Цели и принципы проектирования взаимодействия
На этот раз добавлен новый пункт — анимация.Если предыдущие пункты очевидны, то последнему даже крупные поставщики библиотек не уделяют времени и внимания.
Поэтому сначала мы рассмотрим цели и принципы проектирования взаимодействия в приложениях:
- Целенаправленный дизайн — это метод, который помогает пользователю достичь цели в приложении.
- Простота использования – функционал должен быть интуитивно понятным и надежным, тогда пользователь сможет получать удовольствие от работы.
Да, это справедливо и для анимации.
- Отображение функциональности — элемент интерфейса должен демонстрировать свое назначение.
- Обучаемость — интерфейсы, похожие по поведению на другие, более предсказуемы и проще для понимания благодаря предыдущему опыту пользователя.
Следовательно, анимации также должны быть документированы и пригодны для повторного использования.
- Обратная связь и время отклика — интерфейсы и компоненты должны мгновенно реагировать на действия пользователя.
Сюда входит «кажущаяся производительность».
Длинные операции всегда можно скрыть с помощью анимации.
Виды анимации в браузере
Рассмотрев цели, перейдем к способам создания анимации.Мы не будем подробно останавливаться на каждом, а наметим пути их оптимизации.
Существует две технологии анимации: css анимация — позволяет анимировать переходы от одной конфигурации стилей CSS к другой.
Чтобы оптимизировать CSS-анимацию, вам нужно знать, что существует свойство изменится , который сообщит браузеру, что элемент изменился.javascript анимация — создавайте более сложные анимации в отличие от CSS.Это улучшит отзывчивость интерфейса.
Подробнее об этом объекте вы можете прочитать в статье связь .
Чтобы оптимизировать анимацию JavaScript, вам нужно использовать запросАнимацияFrame — сообщает браузеру, что вы хотите анимировать, и просит его запланировать перерисовку следующего кадра анимации.Чтение подробности по ссылке .
Угловая анимация
Мы не будем останавливаться на подробном описании создания анимаций в этом разделе, потому что.В Интернете полно статей на эту тему, но давайте зафиксируем ключевые моменты, связанные с Angular, в виде тезисов:
- Работайте над анимацией JavaScript.
- Поставляется из коробки с Angular
- Удобный API для работы с состоянием компонента.
Вы можете вызвать анимацию для элемента dom, для переменной в шаблоне.
Создайте цепочку анимаций.
- Есть инструменты для повторного использования анимации.
Давайте создадим несколько шаблонов анимации UI/UX.
Паттерн: объяснение происходящего (What Just Happened), добавление элемента .Допустим, у нас есть какое-то действие, в результате которого в список или таблицу добавляется новый элемент. Визуально элемент может быть очень похож по своим данным и пользователь может не заметить, что на форме появился новый элемент. Это нарушает принципы проектирования взаимодействия.
Давайте реализуем этот тип шаблона, добавив элемент. Сразу посмотрим на результат: 
Добавление элемента анимации Angular Исходный код шаблона:
Исходный код анимации в компоненте:<div class="table"> <div *ngFor='let item of items; index as i; trackBy:id' @fadeExplainMotion [@.disabled]="isIniting" > .
</div> </div>
animations: [trigger('fadeExplainMotion', [
transition(
':enter',
animation([
style({
transform: 'translate(25%,0)',
backgroundColor: '#fafafa',
height: '30px'
}),
animate(
'300ms cubic-bezier(0.59, 0.32, 0.38, 1.13)',
style({
transform: 'translate(0)',
height: '82px'
})
),
])
)])]Опишем, что здесь происходит: @.
неполноценный
- отключить анимацию элементов при первой загрузке списка.@fadeExplainMotion — анимировать элемент при добавлении его в dom. анимация: [.
] — блок, описывающий поведение анимации.
Здесь к dom-элементу применяются преобразования, меняющие заливку и ее высоту.
Также устанавливаются функции времени и движения.
Паттерн: объяснение происходящего (What Just Happened), удаление элемента.
Этот тип анимации похож на предыдущий и выглядит следующим образом: 
Удаление элемента анимации Angular Код анимации: transition(
'* => void',
animation([
style({
backgroundColor: '#fafafa',
height: '82px'
}),
animate(
300ms cubic-bezier(0.59, 0.32, 0.38, 1.13),
style({
transform: 'translate(-25%,0)',
height: '82px'
})
),
])
Код очень похож, за исключением: * => недействительно - реагировать на удаление элемента из dom Transform: 'перевести(-25%,0) - сдвигает элемент справа налево Отлично, мы написали пару анимаций для компонента.
Представим, что нам нужно использовать их в других приложениях.
Читайте дальше, чтобы узнать, как это сделать.
Давайте сделаем анимацию многоразовой и настраиваемой для пользователей библиотеки с помощью внедрения зависимостей.
Изучив множество библиотек компонентов, можно сделать вывод, что анимацию удобно хранить в каталоге «animation».
Например, так делают ребята из TaigaUI и NgZorro. Нам этот способ тоже показался удобным.
Давайте добавим файл «fade-explain.ts», который экспортирует анимацию выше:
const TRANSITION = '{{duration}}ms cubic-bezier(0.59, 0.32, 0.38, 1.13)';
const DURATION = {params: {duration: 300}};
export const fadeExplainMotion: AnimationTriggerMetadata = trigger('fadeExplainMotion', [
transition(
':enter',
animation([
style({
transform: 'translate(25%,0)',
backgroundColor: '#fafafa',
height: '30px'
}),
animate(
TRANSITION,
style({
transform: 'translate(0)',
height: '82px'
})
),
]),
DURATION
),
transition(
'* => void',
animation([
style({
backgroundColor: '#fafafa',
height: '82px'
}),
animate(
TRANSITION,
style({
transform: 'translate(-25%,0)',
height: '82px'
})
),
])
)
]);
Теперь метаданные компонента будут выглядеть так: анимацию можно подключить к любым компонентам:
@Component({
selector: 'app-list',
templateUrl: '.
/list.component.html', styleUrls: ['.
/list.component.scss'], animations: [fadeExplainMotion, fadeExplainEditMotion, .
],
})
Этот пример демонстрирует повторное использование.
Давайте добавим возможность пользователям библиотеки компонентов изменять параметры анимации, например скорость.
Для этого воспользуемся механизмом внедрение зависимости .
- создайте файл "animation-tokens.ts"
- Давайте напишем реализацию ANIMATIONS_DURATION.
export const ANIMATIONS_DURATION = new InjectionToken<number>(
'Duration of animations in ms',
{
factory: () => 300,
},
);Давайте получим токен в конструкторе компонента:
constructor(@Inject(ANIMATIONS_DURATION) private readonly duration: number,) {Создадим переменную в компоненте:
animation = {
value: '', params: {
duration: this.duration
}
};Привяжем переменную к анимации в шаблоне:
<div
*ngFor='let item of items; index as i; trackBy:id'
[@fadeExplainMotion]='animation'
>Чтобы изменить параметр скорости анимации, необходимо добавить в модуль новое значение токена (в разделе провайдеры):
providers: [
{ provide: ANIMATIONS_DURATION, useValue: 350 }
],Теперь вся команда может использовать согласованные анимации и при необходимости переопределять их настройки.
Пример из статьи можно найти связь .
Подборка книг и интересных статей по интерфейсной анимации: Недавно провел онлайн мастер-класс» Роман Седов и Александр Инкин | Мастерская | ДИ: две буквы, безграничные возможности.
", в котором было несколько слайдов об анимации и DI. Интерактивный дизайн и сложная анимация - в этой книге вы сможете найти фундаментальные принципы интерактивного дизайна и анимации.
Электронная книга «Анимация в системе дизайна» - в книге рассказывается об анимации в дизайн-системах.
Подробное руководство по анимации в Angular — в статье подробно описана анимация в Angular. Angular UX с использованием 4 методов анимации — статья с большим набором видеороликов о UX/UI и анимации в Angular.
Заключение
В этой статье мы определили роль анимации в системах дизайна и библиотеках компонентов.Мы выделили моменты, связанные с их оптимизацией.
Мы рассмотрели шаблоны анимации.
Мы реализовали пару примеров в Angular. И мы использовали механизм внедрения зависимостей для повторного использования и настройки.
Теги: #Разработка сайтов #CSS #JavaScript #ui/ux #angular #анимация #библиотека компонентов
-
D-Bust Ваш Компьютер – Часть 5
19 Oct, 24 -
От Wpf К Авалонии
19 Oct, 24 -
О Болезненных Вещах.
19 Oct, 24 -
Знаете Ли Вы, Что Такое Фидо?
19 Oct, 24
