Animate

Применение #

Метод animate предназначен для анимации элементов или положения камеры.

Для правильной анимации элемента рекомендуется сохранять измененные vec3 координаты этого элемента и применять сохраненные координаты в параметр from в функции animate для избежания проблем с выбором углов Эйлера. После каждого изменения положения элемента необходимо сохранить координаты заново!

Использование #

import { animate } from ‘animate’

animate({

from: AnimateProps,

to: AnimateProps,

duration: number,

onUpdate(val: AnimateProps ): void,

onComplete?(): void,

easing?: Easing

})

Типы

type Easing = (v: number) => number;

type EasingModifier = (easing: Easing) => Easing;

type AnimateProps = number | string | vec2 | vec3 | mat4 | quat

stopAnimation #

Полная остановка анимации

Использование

import { stopAnimation } from ‘animate’

stopAnimation(id: number)

pauseAnimation #

Поставить анимация на паузу

Использование

import { pauseAnimation } from ‘animate’

pauseAnimation(id: number)

resumeAnimation #

Продолжить анимацию после паузы

Использование

import { resumeAnimation} from ‘animate’

resumeAnimation(id: number)

Функции сглаживания анимации #

Функция сглаживания анимации указывается в свойстве easing при вызове функции animate.

Каждая из функция содержит в себе свой стиль сглаживания анимации

Список функций сглаживания

linear: Easing,

bounceOut: (p: number) => number;

bounceInOut: (p: number) => number;

reverseEasing: EasingModifier;

mirrorEasing: EasingModifier;

createExpoIn: (power: number) => Easing;

createBackIn: (power: number) => Easing;

createAnticipate: (power: number) => Easing;

bounceIn: Easing;

easeIn: Easing;

easeOut: Easing;

easeInOut: Easing;

circIn: Easing;

circOut: Easing;

circInOut: Easing;

backIn: Easing;

backOut: Easing;

backInOut: Easing;

anticipate: Easing;

cubicBezier(mX1: number, mY1: number, mX2: number, mY2: number): Easing

Метод cubicBezier() позволяет создать свою уникальную функцию сглаживания, если стандартные вам не подошли

Применение

import { animate, easeOut } from ‘animate’

animate({

from: …,

to: …,

duration: …,

easing: easeOut,

…

})