Introdução
renature é uma biblioteca de animação baseada em física para React inspirada no mundo natural. Ele se inspira na física do nosso universo e modela as forças do mundo real, como gravidade, fricção, resistência do ar e dinâmica dos fluidos.
O
renature é influenciado por outras bibliotecas populares de animação baseadas na física, como react-spring e elementos de Framer Motion . Neste artigo, aprenderemos como criar animações em renature criando vários exemplos e aplicativos.
Implementação básica
Comecemos pelo princípio: instale o pacote renature executando um dos comandos abaixo:
npm install-salvar renature # ou fio adicionar renature
renature fornece seis ganchos que podemos usar na criação de animações. Os três primeiros são os ganchos useFriction , useGravity e useFluidResistance . Esses ganchos animam as propriedades de um único elemento.
Todos eles funcionam de maneira semelhante, mas como seus nomes indicam, as forças naturais de acordo com o modelo e a física da qual dependem irão variar. Além disso, o objeto de configuração varia de gancho para gancho, dependendo da força que você está usando.
Existem também os ganchos useFrictionGroup , useGravityGroup e useFluidResistanceGroup , que podemos usar para animar as propriedades de um grupo de elementos simultaneamente.
Vamos dar uma olhada em uma implementação básica usando o gancho useFriction .
import {useFriction} de"renature";
import"./styles.css"; função padrão de exportação App () { const [props]=useFriction ({ a partir de: { transform:"translateX (100px)" }, para: { transform:"translateX (300px)" }, config: { mu: 0,2, massa: 20, initialVelocity: 5 }, repetir: infinito }); Retorna ( );
}
Se você estiver familiarizado com o react-spring, notará que o renature tem uma API declarativa semelhante. Cada gancho em renature espera as propriedades from e to nas quais descrevemos os estados CSS que desejamos animar de e para. Se um valor for definido para uma propriedade em from , mas não em to , essa propriedade será ignorada e não será animada.
Às vezes, podemos querer que nossas animações sejam executadas infinitamente, sem parar. Podemos fazer isso aplicando repeat: Infinity à nossa configuração de animação.
Como usamos o gancho useFriction , passamos os parâmetros físicos correspondentes. Como seu nome indica, o gancho useFriction é modelado após a força de atrito. Os parâmetros são:
-
mu, que é o coeficiente de atrito cinético -
massa, que é a massa do corpo em movimento -
initialVelocity, que é a velocidade inicial do movimento
A coisa maravilhosa sobre renature é que você não precisa ser um guru da ciência para fazer animações incríveis.
Animando várias propriedades com renature
Então, vimos como o gancho useFriction funciona e como animar a propriedade transform de um elemento. Onde e quando necessário, também podemos animar várias propriedades simultaneamente:
import {useFriction} de"renature";
import"./styles.css"; função padrão de exportação App () { const [props]=useFriction ({ a partir de: { transform:"translateX (100px), rotate (0deg)", fundo:"vermelho", borderRadius:"0%" }, para: { transform:"translateX (300px), rotate (360deg)", fundo:"steelblue", borderRadius:"50%" }, config: { mu: 0,2, massa: 20, initialVelocity: 5 }, repetir: infinito }); Retorna ( );
}
Para animar várias propriedades de um elemento, adicione mais propriedades do elemento que deseja animar.
Criação de animações em grupos
Podemos desejar animar vários elementos simultaneamente. As animações agrupadas nos permitem especificar o número de elementos a serem animados e definir a configuração de cada um deles independentemente.
importar {useGravityGroup} de"renature";
import"./styles.css";
função padrão de exportação App () { const [nodes]=useGravityGroup (3, (i)=> ({ a partir de: { transform:"translate (0px, 0px) scale (1) skewY (0deg)", opacidade: 0 }, para: { transform:"translate (20px, 20px) scale (1.2) skewY (5deg)", opacidade: 1 }, config: { moverMass: 10000, atratorMass: 10000000000000, r: 10 }, repetir: infinito, atraso: i * 500 })); Retorna ( {nodes.map ((adereços, i)=> { return ; })} );
}
Usamos useGravityGroup para criar a animação agrupada acima. Todos os ganchos de animação agrupados têm um formato semelhante:
const [props]=useGrupo (n: número, fn: (índice: número)=> Config);
Você pode atrasar animações em renature especificando a propriedade delay em sua configuração de animação. atraso espera um número em milissegundos e iniciará a animação assim que o atraso especificado tiver decorrido. Isso é mais comumente usado para animações agrupadas em que você deseja escalonar animações infantis em intervalos regulares.
Controle de estados de animação
Vejamos como controlar os estados da animação no renature . Podemos iniciar, parar, pausar, atrasar e executar animações um número específico de vezes. Já vimos como repetir e atrasar animações.
Para controlar os estados da animação, renature fornece uma API de controlador . O controlador é o segundo objeto retornado por um gancho renature e vem com três métodos- start , pause e stop -para interagir com o estado de reprodução da animação.
import {useFriction} de"renature";
import"./styles.css";
importar botão de"./Button"; função padrão de exportação App () { const [adereços, controlador]=useFriction ({ a partir de: { transform:"translateY (0px)", opacidade: 1, borderRadius:"10%" }, para: { transform:"translateY (50px)", opacidade: 0, borderRadius:"50%" }, repetir: infinito, pause: true//Sinaliza que a animação não deve ser executada na montagem. }); Retorna ( );
}
Usamos o método controller.start disponível na API controller para iniciar animações. Para fazer isso, precisamos incluir pause: true em nossa configuração de animação para evitar que a animação seja executada imediatamente na montagem.
Para pausar uma animação em execução, usamos o método controller.pause . Este método interromperá o loop de quadro, mas preservará o estado da animação. Isso significa que podemos retomar uma animação a qualquer momento usando controller.start .
Para interromper uma animação em execução, usamos o método controller.stop . Ao contrário de controller.pause , isso destruirá o estado da animação, então só devemos usá-lo quando tivermos certeza de que queremos que a animação termine.
renature demos
Agora que sabemos como criar animações com renature , vamos dar uma olhada em alguns aplicativos do mundo real.
Demonstração de flutuação do cartão
Você já passou o mouse sobre um cartão e viu a imagem aumentar ou diminuir ao longo da largura e altura de seu contêiner? Vamos recriar esse efeito usando renature .
Aqui está uma sandbox do que iremos construir:
Embora CSS não seja o foco deste tópico, precisaremos de algum CSS para que o efeito funcione como deveria.
. caixa de cartão { largura: 200px; borda: 1px cinza sólido; estouro: oculto; margem inferior: 2rem;
}
Temos que definir um overflow: hidden para a div card-box para garantir que, quando a imagem for dimensionada, ela permanecerá restrita em seu contêiner. Com isso explicado, vamos voltar para renature .
Usando o que aprendemos sobre o controle de estados de animação, chamamos os métodos controller.start e controller.pause sempre que pairamos dentro e fora do img-box div.
exportar cartão de função padrão ({imgUrl, props, controlador}) { Retorna ( 
//mais coisas abaixo...
Demonstração do sistema de notificação
Brindes de notificação estão entre os componentes comuns usados em aplicativos. Vamos criar um usando renature .
Aqui está uma sandbox do que iremos construir:
Para o CSS, tivemos que definir a opacidade da notificação para 0 para que ela só fosse exibida quando o botão fosse clicado.
return (
);
Chamamos o método controller.start quando o botão é clicado. Isso aciona a animação e a notificação do sistema aparece.
Questões de acessibilidade
Nem todo mundo gosta de animações ou transições decorativas, e alguns usuários enfrentam dificuldades mentais e físicas quando enfrentam rolagem paralaxe, efeitos de zoom e assim por diante. Como tal, devemos garantir que nossas animações não apresentem problemas de acessibilidade para os usuários do aplicativo.
No objeto de configuração do renature , podemos incluir uma propriedade reducedMotion opcional. Se isso não for especificado e o usuário final preferir movimento reduzido, o elemento de animação será definido imediatamente para o estado to para evitar animações potencialmente prejudiciais.
Conclusão
Embora eu tenha feito algumas demonstrações neste artigo mostrando como o renature pode ser usado em aplicativos do mundo real, seria incrível se a equipe incluísse mais demonstrações práticas que possam ser úteis para os desenvolvedores. Independentemente disso, renature é uma incrível biblioteca de animação baseada em física.
A postagem Criando animações baseadas na física no React com renature apareceu primeiro no LogRocket Blog .
Categories: UncategorizedWordpress
