Notícias

May 12, 2023

Como adicionar animações aos seus aplicativos React com o Framer Motion

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

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.

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:

Enquanto o equivalente do Framer Motion é assim:

Os componentes de movimento suportam umanimar prop que aciona animações quando seus valores mudam. Para animações complexas, use ouseAnimategancho com uma referência com escopo.

Antes de usar o Framer Motion em seu projeto, você precisa ter o runtime Node.js e o gerenciador de pacotes Yarn instalados em seu computador e entender o que é React e como usá-lo.

Você pode visualizar e baixar o código-fonte deste projeto em seu repositório GitHub. Use oarquivos iniciaisbranch como um modelo inicial para acompanhar este tutorial, ou oarquivos finais branch para a demonstração completa. Você também pode ver o projeto em ação por meio desta demonstração ao vivo.

Abra seu terminal e execute:

Quando você abrelocalhost:5173no 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 osrc/App.jsx arquivo em um editor de código. Este arquivo contém um componente funcional que retorna um fragmento React. Importar oBotãocomponente e, em seguida, renderizá-lo, passando em umtextosuporte:

Em seguida, edite oButton.jsxarquivo e importar omovimentoutilitário deframer-motion:

Agora, substitua o normalbotãoelemento com omovimento.[elemento] componente. Neste caso, utilize obotão de movimentocomponente.

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

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. 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. EmBackdrop.jsx, importe o utilitário de movimento e crie um componente funcional comao clicarecrianças adereços. Devolver ummovimento.divcomponente com a classe "pano de fundo" eao clicarouvinte no JSX.

Em seguida, adicione três adereços, a saber:inicial,animar,esaí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.

Adicionarao clicarecriançasadereços para omovimento.dive defina a duração da transição para 0,34 segundos:

OPano de fundocomponente é um wrapper para oModal componente. Clicar no pano de fundo descarta o modal. EmModal.jsx, importarmovimento e o componente Pano de fundo. O componente funcional padrão aceita props:closeModaletexto . Crie uma variável variante como um objeto.

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.

Em seguida, você precisa adicionar a funcionalidade para exibir o modal quando um usuário clicar no botão. Abra o