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.
