Skip to content
This repository has been archived by the owner on Jan 31, 2023. It is now read-only.

Performers

Jump to bottom
Diogo Neves edited this page Dec 23, 2021 · 1 revision

Performers

São funções que contêm propriedades e métodos e tem como principal objetivo realizar as animações e controla-las.

Parâmetros formais

Parâmetros 1

properties

Um objeto com as propriedades a serem animadas.

Type
object
Uso
Obrigatório.
options

Um objeto de opções para a animação.

Type
object
Uso
Opcional.
const performer = wS('span');
performer(
  {
    width: 150,
    height: 150,
    borderRadius: '100%',
  },
  { dur: 2, loop: 4, dir: 'alternate' }
);

Parâmetros 2

property

A propriedade a ser animada.

Type
string
Uso
Obrigatório.
propertyValue

O valor a ser alcançado pela animação.

Type
string | Array | function
Uso
Obrigatório.
options

Um objeto de opções para a animação.

Type
object
Uso
Opcional.
const performer = wS('span');
      performer(
        'width',
         200
        { dur: 2, loop: 4, dir: 'alternate' }
      );

Parâmetros atalhos

Podemos passar múltiplos argumentos em que cada um será aplicado as determinadas propriedades conforme as regras abaixo:

  • O argumento do tipo string são aplicados da seguinte forma: O valor seja compatível para a propriedade dir então ele será aplicado a ela, se não, será aplicado a propriedade easing.

  • O argumento do tipo function é aplicado a propriedade easing.

  • O argumento do tipo number será aplicado a propriedade dur.

  • O argumento do tipo boolean será aplicado a propriedade autoDestroy.

Exemplo 1

const performer = wS('span');
      performer(
        'width',
         200
         3 /* = dur */
      );

Exemplo 2

const performer = wS('span');
performer(
  {
    width: 150,
    height: 150,
    borderRadius: '100%',
  },
  true /* = autoDestroy */
);
WideSmile - logo

Guia de navegação

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.

Clone this wiki locally