От автора: в этой статье мы заново создадим кнопку хлопка Medium, используя Angular Animations. Эта статья предполагает базовые знания основных методов Angular Animations, таких как trigger(), transition() и т. д.
Мы изучим различные функции анимации, такие как:
Создание многократно используемой анимации (animation, useAnimation)
Выражения изменения состояния (:enter, :leave, :increment, :decrement).
Средняя кнопка хлопка с помощью Angular Animations
Многократно используемая анимация
|
1 2 3 4 5 6 7 8 9 |
// create the animation const myAnimation = animation('{{ timings }}', []); // consume the animation trigger('myTrigger', transition('* => *', useAnimation(myAnimation, { params: { timings: 200 } }) ) ); |
Создайте анимацию, вызвав функцию animation(). Она может содержать несколько интерполированных входных параметров, таких как {{timings}}.
Примените анимацию, вызвав функцию useAnimation(). Она принимает в качестве первого аргумента ссылку на анимацию, а в качестве второго — объект параметров. Мы передаем входные параметры через ключ params. В этом примере нам нужно указать значение таймингов: { timings: 200 }.
Теперь, когда мы понимаем, как создавать многократно используемую анимацию, давайте создадим анимацию пульсации.
Создание импульсной анимации
Анимация пульсации
|
1 2 3 4 5 6 7 8 9 10 11 |
export const pulseAnimation = animation([ style({ transform: 'scale(1)' }), animate( '{{ timings }}', keyframes([ style({ transform: 'scale(1)', offset: 0 }), style({ transform: 'scale({{ scale }})', offset: 0.5 }), style({ transform: 'scale(1)', offset: 1 }) ]) ) ]); |
Мы создаем многократно используемую анимацию пульсации, вызывая функцию animation(). Она принимает входные параметры {{timings}} и {{scale}}. Анимация пульсации создается путем изменения размеров элемента через вызов функции keyframes.
|
1 2 3 4 5 6 7 8 |
useAnimation( pulseAnimation, { params: { timings: 200, scale: 1.1, } } ) at 0ms scale equals 1 at 100ms scale equals 1.1 at 200ms scale equals 1 |
Затем мы будем применяем анимацию внутри первого компонента.
Создание компонента FAB
FAB с анимацией пульсации
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@Component({ selector: 'app-clap-fab', template: `<i class="material-icons">pan_tool</i>`, animations: [ trigger('counterChange', [ transition( ':increment', useAnimation(pulseAnimation, { params: { timings: '400ms cubic-bezier(.11,.99,.83,.43)', scale: 1.05 } }) ) ]) ] }) export class ClapFabComponent { @HostBinding('@counterChange') @Input() counter: number; } |
Внутри массива анимациий компонента мы вызываем функцию trigger() с описательным именем counterChange.
Затем мы определяем переход и используем :increment в качестве выражения перехода состояния. Это идеально нам подходит, поскольку мы хотим выполнить анимацию, когда пользователь нажимает на кнопку, увеличивая счетчик хлопков.
Описание выражений изменения состояния
:increment — привязка увеличивается
:decrement — привязка уменьшается
:leave — элемент удаляется из DOM.
:enter — элемент входит в DOM.
Создание всплывающей анимации
Всплывающая анимация
|
1 2 3 4 5 6 7 8 9 10 11 |
export const slideInAnimation = animation([ style({ transform: 'translateY({{ from }})', opacity: 0 }), animate('{{ timings }}', style({ transform: 'translateY(0)', opacity: 1 })) ]); export const slideOutAnimation = animation([ animate( '{{ timings }}', style({ transform: 'translateY({{ to }})', opacity: 0 }) ) ]); |
Как и в анимации пульсации, мы используем функцию animation() для создания многократно используемой анимации. Мы также используем интерполяцию для определения входных параметров анимации.
Создание компонента Bubble
Bubble со всплывающей анимацией
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@Component({ selector: 'app-counter-bubble', template: `+{{counter}}`, animations: [ trigger('visibilityChange', [ transition(':enter', [ useAnimation(slideInAnimation, { params: { from: '20%', timings: '200ms ease-in' } }) ]), transition(':leave', [ useAnimation(slideOutAnimation, { params: { to: '-200%', timings: '200ms ease-in' } }) ]) ]) ] }) export class CounterBubbleComponent { @HostBinding('@visibilityChange') animation = true; } |
Поскольку родительский компонент отображает и скрывает компонент Bubble, мы вызываем анимацию вставки и удаления слайдов. Для этого идеально подходят выражения изменения состояния :enter и :leave.
Мы применяем всплывающую анимацию, созданную на предыдущем шаге, вызывая функцию useAnimation() с соответствующими входными параметрами.
Заключение
Вот и все. Надеюсь, вам понравилась эта статья. Мы использовали множество впечатляющих функций Angular Animations, чтобы воссоздать кнопку хлопка Medium. Ниже приведены примеры кода.
Автор: Tomasz Kula
Источник: //netbasal.com/
Редакция: Команда webformyself.
