customAnimations

Animações personalizadas centralizadas para os componentes do SDK.

Detalhes

Atributo: custom-animations

Tipo: string | CustomAnimations

Valor por padrão: undefined

Morfologia

provider.customAnimations = {
  sdkProvider: { loading: '/assets/anim/loading.json' },
};

Descrição

JSON ou objeto com rotas de animações (Lottie, GIF, MP4) compartilhadas entre facephi-sdk-provider, facephi-selphi-widget, facephi-selphid-widget e outros filhos. A configuração pode ser parcial: os componentes sem valor definido usam suas animações padrão.

Considerações

Se você definir a mesma animação aqui e em uma prop direta (por ex. loadingAnimation), customAnimations tem prioridade. Valores inválidos são reportados no console.

Informações adicionais

Estrutura disponível:

• sdkProvider

  • carregando (string): Animação de carregamento do provider.

• fileUploader

  • loadingFile (string): Animação de carregamento de arquivo.

• qr

  • selphi (string): Pré-visualização desktop durante a captura Selphi no mobile.

  • selphid (string): Pré-visualização desktop durante a captura SelphID no mobile.

  • fileUploader (string): Pré-visualização desktop durante o envio de arquivos no mobile.

• selphi

  • carregando (string): Animação de carregamento de Selphi.

  • tutorial (string[]): Animações do tutorial.

  • initialTip (object): Animação da dica prévia de Selphi.

    • mobile (string): Dica prévia na visualização mobile.

    • desktop (string): Dica prévia na visualização desktop.

• selphid

  • carregando (string): Animação de carregamento de SelphID.

  • tutorial (string[]): Animações do tutorial.

  • initialTip (object): Animação da dica prévia de SelphID.

    • mobile (string): Dica prévia na visualização mobile.

    • desktop (string): Dica prévia na visualização desktop.

---

Exemplo

<facephi-sdk-provider
    apikey={process.env.FACEPHI_SDK_APIKEY}
    customAnimations={{
        sdkProvider: { loading: '/assets/anim/custom-loading.gif' },
        selphi: {
            loading: '/assets/anim/custom-loading.gif',
            initialTip: {
                mobile: '/assets/anim/custom-tip-mobile.gif',
                desktop: '/assets/anim/custom-tip-desktop.gif',
            },
        },
        selphid: {
            loading: '/assets/anim/custom-loading.gif',
            initialTip: {
                mobile: '/assets/anim/custom-tip-mobile.gif',
                desktop: '/assets/anim/custom-tip-desktop.gif',
            },
        },
        qr: {
            selphi: '/assets/anim/desktop-selphi.gif',
            selphid: '/assets/anim/desktop-selphid.gif',
        },
    }}
>
    <facephi-selphi-widget />
</facephi-sdk-provider>