Создание многократно используемой анимации с помощью Angular Animations

От автора: в этой статье мы заново создадим кнопку хлопка Medium, используя Angular Animations. Эта статья предполагает базовые знания основных методов Angular Animations, таких как trigger(), transition() и т. д.

Мы изучим различные функции анимации, такие как:

Средняя кнопка хлопка с помощью Angular Animations

Многократно используемая анимация

// create the animation
const myAnimation = animation('{{ timings }}', []); // consume the animation
trigger('myTrigger', transition('* => *', useAnimation(myAnimation, { params: { timings: 200 } }) )
);

Создайте анимацию, вызвав функцию animation(). Она может содержать несколько интерполированных входных параметров, таких как {{timings}}.

Примените анимацию, вызвав функцию useAnimation(). Она принимает в качестве первого аргумента ссылку на анимацию, а в качестве второго — объект параметров. Мы передаем входные параметры через ключ params. В этом примере нам нужно указать значение таймингов: { timings: 200 }.

Теперь, когда мы понимаем, как создавать многократно используемую анимацию, давайте создадим анимацию пульсации.

Создание импульсной анимации

Анимация пульсации

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.

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 с анимацией пульсации

@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 в качестве выражения перехода состояния. Это идеально нам подходит, поскольку мы хотим выполнить анимацию, когда пользователь нажимает на кнопку, увеличивая счетчик хлопков.

Описание выражений изменения состояния

Создание всплывающей анимации

Всплывающая анимация

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 со всплывающей анимацией

@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. Ниже приведены примеры кода.

stackblitz.com / github.com

Автор: Tomasz Kula

Источник: https://netbasal.com/

Редакция: Команда webformyself.