Aprenda a adicionar animações simples ao seu aplicativo React com um mínimo de esforço de codificação.

A animação é uma parte crucial de quase todos os aplicativos da web modernos. É também uma das partes mais difíceis de acertar.

Framer Motion é uma biblioteca criada para o React que facilita a animação de componentes.

Como funciona o movimento do framer

O Framer Motion usa o componente de movimento para animações. Cada elemento HTML/SVG possui um componente de movimento equivalente que possui suportes para gestos e animações. Por exemplo, um div HTML regular se parece com isto:

<div>div>

Enquanto o equivalente do Framer Motion é assim:

<movimento.div>movimento.div>

Os componentes de movimento suportam um animar prop que aciona animações quando seus valores mudam. Para animações complexas, use o useAnimate gancho com uma referência com escopo.

Animação em Framer Motion

Antes de usar o Framer Motion em seu projeto, você precisa ter o Tempo de execução do Node.js e o gerenciador de pacotes Yarn instalado em seu computador e Entenda o que é React e como usá-lo.

Você pode visualizar e baixar o código-fonte deste projeto em seu Repositório GitHub. Use o arquivos iniciais branch como um modelo inicial para acompanhar este tutorial, ou o arquivos finais branch para a demonstração completa. Você também pode ver o projeto em ação através deste demonstração ao vivo.

Abra seu terminal e execute:

git clone [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
fio
desenvolvedor de fios

Quando você abre host local: 5173 no seu navegador, você verá isto:

Agora você pode criar sua primeira animação simples, um botão que cresce ao passar o mouse e diminui quando o cursor sai.

Abra o src/App.jsx arquivo em um editor de código. Este arquivo contém um componente funcional que retorna um fragmento React. Importar o Botão componente e, em seguida, renderizá-lo, passando em um texto suporte:


Botão Animado</h4>
Mova o mouse sobre o botão para ver o efeito</div>

Em seguida, edite o Button.jsx arquivo e importar o movimento utilitário de framer-motion:

importar {movimento} de"framer-motion"

Agora, substitua o normal botão elemento com o movimento.[elemento] componente. Neste caso, utilize o botão de movimento componente.

Em seguida, adicione um enquanto passa o mouse gesto prop e passar um objeto de valores que o Framer Motion deve animar quando um usuário passar o mouse sobre o botão.

escala: 1.1 }}>
{texto}
</motion.button>

O botão agora será animado quando você mover o ponteiro do mouse sobre ele ou fora dele:

Você pode estar se perguntando por que esta demonstração não usa Animações CSS em vez de. O Framer Motion tem vantagens sobre o CSS porque se integra ao estado React e geralmente resulta em um código mais limpo.

Em seguida, tente algo mais complexo: animar um modal. Em Backdrop.jsx, importe o utilitário de movimento e crie um componente funcional com ao clicar e crianças adereços. Devolver um movimento.div componente com a classe "pano de fundo" e ao clicar ouvinte no JSX.

exportarpadrãofunçãoPano de fundo() {
retornar (<>

 </motion.div>
 </>)
}

Em seguida, adicione três adereços, a saber: inicial, animar, e saída. Esses props representam o estado original do componente, o estado para o qual o componente deve ser animado e o estado em que o componente deve estar após a animação, respectivamente.

Adicionar ao clicar e crianças adereços para o movimento.div e defina a duração da transição para 0,34 segundos:

exportarpadrãofunçãoPano de fundo ({onClick, crianças}){
retornar (<>
 onClick={onClick}
 className ="pano de fundo"
 inicial={{ opacidade: 0, filtro de pano de fundo:"desfoque (0px)" }}
 animar={{ opacidade: 1, filtro de pano de fundo:"desfoque (3.4px)" }}
 saída={{ opacidade: 0, filtro de pano de fundo:"desfoque (0px)"}}
 transição={{
 duração: 0.34,
 }}
 >
 {crianças}
 </motion.div>
 </>)
}

O Pano de fundo componente é um wrapper para o Modal componente. Clicar no pano de fundo descarta o modal. Em Modal.jsx, importar movimento e o componente Pano de fundo. O componente funcional padrão aceita props: closeModal e texto. Crie uma variável variante como um objeto.

const variantes = {
 inicial: {
 você: "-200%",
 opacidade: 1,
 },
 visível: {
 você: "50%",
 transição: {
 duração: 0.1,
 tipo: "primavera",
 amortecimento: 32,
 rigidez: 500
 }
 },
 saída: {
 você: "200%",
 }
 }

Retorne um componente motion.div agrupado por um componente Backdrop com uma propriedade "variantes" apontando para o objeto variantes. As variantes são um conjunto de estados de animação predefinidos em que o componente pode estar.


 onClick={(e) => e.stopPropagation()}
 className ="modal"
 variantes={variantes}
 inicial='inicial'
 animar='visível'
 saída ='saída'
 >
 {texto}
 </motion.div>
</Backdrop>

Em seguida, você precisa adicionar a funcionalidade para exibir o modal quando um usuário clicar no botão. Abra o App.jsx arquivo e importar o useState Gancho de reação e o Modal componente.

importar { useState } de"reagir";
importar Modal de"./componentes/Modal";

Em seguida, crie um modalOpen estado com o valor padrão definido como falso.

const [modalOpen, setModalOpen] = useState(falso);

Em seguida, defina uma função closeModal que define o modalOpen para falso.

funçãocloseModal() {
 setModalOpen(falso)
}

No topo do fragmento React, renderize condicionalmente um Modal componente e passar o apropriado texto prop com o prop closeModal.

{modalOpen && <Modaltexto="Este é um modal animado com Framer Motion"}

Então, no segundo seção elemento, renderize um botão elemento com um manipulador de eventos onClick que define modalOpen como false.

Você pode notar que o React desmonta o componente Modal do DOM sem uma animação de saída. Para corrigir isso, você precisa de um AnimarPresença componente. Importar AnimatePresence de framer-motion.

importar {AnimatePresence} de'framer-motion';

Agora, envolva o componente Modal no componente AnimatePresence e defina o inicial prop para falso e o modo esperar".

falso} modo="espere">
 {modalOpen && <Modaltexto="Este é um modal animado com Framer Motion"closeModal={fecharModal} />}
</AnimatePresence>

O componente AnimatePresence permite que as animações de saída sejam concluídas antes que o React o desmonte do DOM.

O Framer Motion pode animar componentes na rolagem usando o whileInView suporte. Abra o ScrollElement.jsx, e importar o movimento Utilitário. Mudar div para movimento.div com a classe "elemento de rolagem".

 inicial={{ opacidade: 0, escala: 0, girar: 14 }}
 whileInView={{ opacidade: 1, escala: 1, girar: 0 }}
 transição={{ duração: .8 }}
 janela de visualização={{ uma vez: verdadeiro }}
 className ='elemento de rolagem'
>
 elemento de rolagem
</motion.div>

O janela de exibição prop aponta para um objeto que define uma vez para verdadeiro. A seguir, no App.jsx arquivo, importe o ScrollElement componente e defina uma variável scrollElementCount que contém um valor inteiro.

deixar scrollElementCount =14;

No ultimo seção elemento, crie uma matriz com um comprimento específico definido por scrollElementCount que mapeia cada elemento do array e gera um componente com uma chave única baseada no índice eu.

{[...Array (scrollElementCount)].map((XI) =><ScrollElementchave={eu} />)}

Agora, voltando ao navegador, os elementos devem ser animados quando você os rola para exibição.

Alternativas ao movimento do framer

O Framer Motion não é a única biblioteca de animação do mercado. Se você não gosta da maneira como o Framer Motion faz as coisas, pode experimentar outras bibliotecas como Reagir à Primavera.

Você também pode usar animações CSS, que todos os navegadores modernos suportam nativamente, mas as técnicas envolvidas podem ser difíceis de aprender e configurar.

Melhorando a experiência do usuário com animações

Todo usuário espera uma experiência suave ao usar um aplicativo da web. Um site ou aplicativo sem animações parece estático e sem resposta. As animações melhoram a experiência do usuário porque você pode usá-las para comunicar feedback ao usuário quando ele executa uma determinada ação.