Easings functions
A seguir esta todas as funções easings que a biblioteca dispõe de forma built-in.
Built-in Robert Penner's easing functions.
Observe as atenuações em ação easings.net.
easings:
| in | out | in-out | out-in |
|---|---|---|---|
'easeInQuad' |
'easeOutQuad' |
'easeInOutQuad' |
'easeOutInQuad' |
'easeInCubic' |
'easeOutCubic' |
'easeInOutCubic' |
'easeOutInCubic' |
'easeInQuart' |
'easeOutQuart' |
'easeInOutQuart' |
'easeOutInQuart' |
'easeInQuint' |
'easeOutQuint' |
'easeInOutQuint' |
'easeOutInQuint' |
'easeInSine' |
'easeOutSine' |
'easeInOutSine' |
'easeOutInSine' |
'easeInExpo' |
'easeOutExpo' |
'easeInOutExpo' |
'easeOutInExpo' |
'easeInCirc' |
'easeOutCirc' |
'easeInOutCirc' |
'easeOutInCirc' |
'easeInBack' |
'easeOutBack' |
'easeInOutBack' |
'easeOutInBack' |
'easeInBounce' |
'easeOutBounce' |
'easeInOutBounce' |
'easeOutInBounce' |
cubicBezier(x1, y1, x2, y2)
const performer = wS(
'span',
3,
'cubicBezier(0.5, 0.05, 0.1, 0.3)' /* = easing */
);
performer('width', 300);Spring physics based easing.
easing: 'spring(mass, stiffness, damping, velocity)'
| Parameter | Default | Min | Max |
|---|---|---|---|
| Mass | 1 |
0 |
100 |
| Stiffness | 100 |
0 |
100 |
| Damping | 10 |
0 |
100 |
| Velocity | 0 |
0 |
100 |
const performer = wS(
'span',
3,
'spring(1, 80, 10, 0)' /* = easing */
);
performer('width', 300);easing: 'easeOutElastic(amplitude, period)'
| in | out | in-out | out-in |
|---|---|---|---|
'easeInElastic' |
'easeOutElastic' |
'easeInOutElastic' |
'easeOutInElastic' |
| Parameter | Default | Min | Max | Info |
|---|---|---|---|---|
| Amplitude | 1 | 1 | 10 | Controla o overshoot da curva. Quanto maior for esse número, maior será o overshoot. |
| Period | .5 | 0.1 | 2 | Controla quantas vezes a curva vai e volta. Quanto menor for este número, mais vezes a curva vai e volta. |
const performer = wS(
'span',
3,
'easeOutElastic(1, 0.6)' /* = easing */
);
performer('width', 300);Define o número de saltos que uma animação leva para chegar ao seu valor final.
easing: 'steps(numberOfSteps)'
| Parameter | Default | Min | Max |
|---|---|---|---|
| Number of steps | 10 | 1 | ∞ |
const performer = wS(
'span',
3,
'steps(5)' /* = easing */
);
performer('width', 300);
Um resumo/introdução dos recursos e novidades mais atraentes da biblioteca. Excelente para quem não perder tempo lendo a API de uma biblioteca que talvez não vá utilizar.
Opções para a animação:
Creators objeto global
Propriedades customizadas / Hooks
Por mais que temos uma quantidade incrível de propriedades que essa biblioteca é capaz de animar, as vezes podemos querer ter uma propriedade só nossa, que resolve um determinado caso. Com isso em mente, a nossa biblioteca expõe métodos poderosos que são capazes de criar propriedades que podem ser usadas como qualquer outra, abstraindo toda complexidade por trás dela:
Escalonamento / Stagger
O escalonamento nos permiti animar uma propriedade ou espaçar um determinado valor entre os alvos da animação, com isso, cada alvo recebe o valor individual para a propriedade.
Os métodos que serão apresentados a seguir podem ser usados de duas formas:
performer.method;Ou
creator.method;Entretanto, há diferenças em seus efeitos colaterais:
Ao usar o método por uma função Performer estamos aplicando este método a todas as animações criadas por esta função.
Ao usar o método por uma função Creator, estamos aplicando este método a todas as funções Performer que esta função Creator criou, e cada função Performer aplicará o método em todas as animações criadas por ela.
Manipuladores de eventos
Métodos de controle de animação
Métodos de controle de interação
Estes métodos são excelentes para aplicar uma determinada mudança de direção ou comportamento em uma animação, sem comprometer as interações seguintes.
Métodos de controle de alvos
Estes métodos aplicam alterações, obtém dados ou removem os alvos das animações.
Métodos para alteração de propriedade
Estes métodos podem ser utilizados para alterar um valor que foi definido para uma determinada propriedade.