Como usar reagir primavera para animar componentes

Reagir Primavera pode ajudá-lo com animações, que são notoriamente difíceis de implementar na web. animações CSS são a melhor escolha, mas a criação de um bom resultado, exige malabarismo cuidadosa de classes, durações e eventos. jogando um framework JavaScript como Reagir na mistura só complica ainda mais as coisas.

Para animações que se baseiam na interacção do utilizador, os valores podem ser calculados através de JavaScript e aplicado a um elemento directamente. Ao tomar esta abordagem manual, seria necessário para calcular e aplicar nossa própria flexibilização para fazer o olhar de animação mais natural.

reagir Primavera é uma biblioteca que é construído para lidar com lotes do Hang-ups comuns quando se trata de animação na web. É preciso uma abordagem um pouco diferente, concentrando-se em física mais durações retas e funções de atenuação definidos. Isso ajuda a manter as coisas se sentindo suave e natural.

Enquanto a maioria das vezes isso é usado para efeitos visuais, a biblioteca fará a transição entre dois valores, independentemente de que o valor é sempre usado para um estilo ou não. Por exemplo, poderia ser usado para contar-se um número de inscrições para enfatizar o quão grande é uma comunidade.

Neste tutorial, vamos estar fazendo um componente cartão que permite aos usuários imagens da taxa. O cartão vira para revelar uma classificação por estrelas e os usuários podem clicar para adicionar a sua própria. Nós estaremos usando Reagir mais recente implementação ganchos de Primavera, que requer Reagir versão 16.8 ou superior. Antes que você comece, baixar os arquivos do tutorial aqui (E apoiá-los em armazenamento na núvem ).

Se você quer construir um site sem processos de código complexo, usar um decente Construtor de sites . E não deixe de explorar hospedagem na web. opções também.

01. Instalar dependências.

Com os arquivos baixados, as dependências de pacotes precisam ser instalados antes que possamos começar. Este Criar Reagir projeto baseado em App inclui o reagem com mola pacote e todo o necessário conjunto servidor local se necessário para começar.

Na linha de comando, localizar os arquivos de projeto e instalar, em seguida, executá-los.

 & gt; fio
& gt; início de fios 

02. Gerar imagens no estado

Em primeiro lugar, precisamos de algumas imagens para taxa. Para este tutorial, vamos codificar algumas imagens para o estado de aplicação, mas esses dados poderiam vir de qualquer fonte. Abra app.js e criar algumas imagens com o useState gancho de Reagir. Isto dará a cada imagem uma classificação inicial que pode exibir e atualizar mais tarde.

 [const cartões] = useState ([
createImage (image1),
createImage (imagem2),
createImage (image3)
]); 

03. Exibição cada cartão imagem

À medida que as imagens são armazenadas em uma matriz, que pode loop sobre esse estado e criar componentes separados para cada. A lógica de animação para Reagir Primavera vai viver dentro de um & Lt; RatingsCard / & gt; componente que podemos usar em qualquer lugar que precisa.

Dentro do método render de app.js, criar uma cópia desse componente para cada cartão na matriz estado. Ele vai receber todos os valores no estado, incluindo a imagem ea classificação inicial.

 {cards.map ((cartão, índice) = & gt; (
& Lt; chave RatingsCard = {index} {...} cartão / & gt;
))} 

estrutura de cartão 04. Add

Antes de podermos adicionar a animação, o cartão precisa de algum conteúdo. Cada cartão tem uma frente e para trás, que são implementados como separado & lt; div & gt; elementos em camadas em cima uma da outra.

Abrir RatingsCard / index.js E adicionar a estrutura do cartão. Precisamos aplicar a imagem como um fundo para o cartão de frente, com as costas, eventualmente, contendo a classificação.

 & lt; div className = "RatingsCard" & gt;
& lt; div
className = "RatingsCard__front"
style = {{
backgroundImage: `url ($ {image})`
}}
/ & gt;
& Lt; div className = "RatingsCard__back" / & gt;
& Lt; / div & gt; 

05. Aplicar estilos pairar

Quaisquer estilos que não estão diretamente atualizados através de nossas animações podem ser aplicadas através de CSS. Isso inclui o efeito básico sombra 3D para cada cartão quando pairava sobre. Lado de dentro RatingsCard / style.css , Adicionar alguns estilos extra para tornar o cartão saltar para fora da página em foco, aplicando um filtro.

 .RatingsCard: hover {
Filtro: drop-shadow (0 14px 28px
rgba (0, 0, 0, 0,25))
drop-shadow (0 10px 10px
 rgba (0, 0, 0, 0,1));
} 

06. Set sombra por padrão

Uma sombra súbita em foco é uma experiência chocante. Devemos, portanto, lentamente transição entre estados para manter as coisas suaves. Adicionar um sutil gota-sombra para o cartão quando não está sendo pairado sobre. Use o transição propriedade para animar entre esses dois estados.

 .RatingsCard {
[...]
Filtro: drop-shadow (0 3px 6px
rgba (0, 0, 0, 0,16))
drop-shadow (0 3px 6px
rgba (0, 0, 0, 0,1));
0.5s filtro;: transição
} 

07. Mantenha selecionada estado

Precisamos armazenar e atualizar informações sobre qual lado do cartão está voltada para cima. Usamos pode reagir de built-in useState gancho para definir um valor inicial e tê-lo retornar o valor atual e um método para atualizá-lo.

No início do RatingsCard função componente, criar definir esta selecionado Estado.

 const [seleccionado, setSelected]
 = UseState (falso); 

08. Definir a animação flip

Reagir mola é responsável para fazer a transição entre os números de um valor e outra. Isso pode ser feito com uma mola ea useSpring gancho. Nós fornecemos-lhe algum informações de configuração, e ele retorna um conjunto de valores que atualização de acordo com seus cálculos físicos.

Criar uma mola para a animação flip. Este irá desaparecer e girar um cartão dependendo se o cartão está em sua selecionado Estado.

 const {opacidade, transformar}
 = UseSpring ({
opacidade: selecionado? 1: 0,
transformar: `rotateY (
$ {Selecionado? 180: 0} °) `
}); 

09. Converter para recipiente animado

Os objetos retornados por useSpring definir a sua animação, mas não fornecem os valores numéricos que precisamos. O animado função fábrica digere esta informação e, em seguida, fornece os valores como números para os componentes.

converter o RatingsCard elemento de usar o animado função. O animated.div sintaxe diz a função para retornar a & lt; div & gt; .

 & lt; animated.div className = "RatingsCard" & gt;
& Lt; animated.div
className = "RatingsCard__front"
style = {{
backgroundImage: `url ($ {image})`
}}
/ & gt;
& Lt; animated.div className =
"RatingsCard__back" / & gt;
& Lt; /animated.div> 

10. Animar a placa frontal

Reagir Primavera só é animar os valores e não faz qualquer animação de si elementos. Podemos ligar esses valores para um prop estilo e criar essa animação em tempo real. Atualizar o cartão de frente para fazer uso do novo opacidade e transformar valores. Neste caso, teremos de interpolar o valor de opacidade, que iremos abordar em breve.

 & lt; animated.div
className = "RatingsCard__front"
style = {{
backgroundImage: `url ($ {image})`,
opacidade: opacity.interpolate (
inverseOpacity),
transformar
}}
/ & Gt; 

11. Animar o cartão de volta

Ao lançar o cartão, qualquer que seja a animação que se aplicam a uma face terá de ser aplicado em sentido inverso para o outro. Quando jogado juntos, eles vão olhar como eles estão se movendo como uma peça.

Neste caso, é preciso aplicar os mesmos estilos para o cartão de volta, mas desta vez interpolate o transformar valor, em vez.

 & lt; animated.div
className = "RatingsCard__back"
style = {{
opacidade,
transform: Transform
.interpolate (inverseTransform)
}}
/ & Gt; 

12. interpolar os valores

Em vez de aplicar diretamente os valores para propriedades CSS, podemos aplicar algum tipo de função a eles, a fim de mapear o seu valor para um diferente. Este processo é chamado de interpolação.

Definir um par de funções de interpolação para a parte superior RatingsCard / index.js . Estas aplicam o inverso de tanto a opacidade e transformar animações ao seleccionar ou anulando.

const inverseOpacity = o = & gt; 1 - O;
const inverseTransform = t = & gt;
 `$ {T} rotateY (180 °)`; 

Estado 13. Alternar no clique

A inversão do cartão deve ser amarrado a um clique. Enquanto o selecionado valor de estado determina qual face é visível, devemos alternar esse estado ao clicar no cartão.

Adicionar um ouvinte clique para o exterior RatingsCard elemento. Quando isso acontece, ele irá alternar o valor booleano realizada no estado.

 & lt; animated.div
className = "RatingsCard"
onClick = {() = & gt;
setSelected (! selecionados)}
& Gt; 

14. Ajuste física aleta cartão

Agora, nossa animação funciona, mas parece mais de um flutuador do que um flip. Nós podemos mudar alguns valores em cada primavera para mudar a forma como ele se comporta. Dentro do objeto de configuração para a primavera, criar um configuração opor-se a diminuir o atrito e aumentar a tensão. Isto lhe dará a animação uma sensação snappier.

 useSpring ({
Config: {
atrito: 22,
tensão: 500
},
[...]
}); 

15. Criar primavera para o efeito tilt

Enquanto o efeito hover CSS-alimentado a partir anterior fornece um feedback, nós podemos melhorar isso ainda mais por ter uma animação de inclinação que reage à posição do cursor. Ao atualizar uma mola em uma alta freqüência, como um movimento do mouse, podemos obter melhor desempenho usando a definir função que é retornada por cada primavera. Criar uma nova primavera para esta animação e manter um porão de sua função retornado.

 [const suportes, conjunto] = useSpring (() = & gt; ({
estado: [0, 0, 1]
}
)); 

16. Aplicar inclinação estilos

Reagir mola pode animar muitos tipos diferentes de valores, que inclui matrizes. Armazenando os nossos valores em uma variedade nos permite interpolar-los todos para o transformar propriedade em uma passagem.

Criar uma transformCard função de interpolação e aplicar os estilos para o principal RatingsCard elemento.

 const transformCard = (x, y, escala) = & gt;
 `Perspectiva (1000 px) rotateX ($ {x} °)
rotateY ($ {y} deg) escala (escala $ {}) `;
[...]
& Lt; animated.div
 className = "RatingsCard"
 onClick = {() = & gt; setSelected (! selecionados)}
 style = {{transform:! selecionados & amp; & amp;
props.state.interpolate (
transformCard)}} & gt; 

17. Conjunto de valores de movimento do rato

eventos do mouse fornecer as coordenadas do cursor na época. Estamos interessados ​​nas coordenadas do cliente para obter a posição do cursor dentro da janela. Adicionar movimento do mouse e deixar eventos para o exterior & lt; div & gt; . Nós passar as coordenadas para uma função em movimento e redefinido para os valores padrão quando as folhas do cursor do & lt; div & gt; .

 OnMouseLeave = {() = & gt; definir({
 estado: [0, 0, 1]})}
onMouseMove = {({clientX: x,
 clientY: y}) = & gt; definir({
 Estado: calculateValues ​​(x, y)})
} 

18. Calcular valores de animação

Nós só queremos uma pequena inclinação para evitar o cartão movendo muito quando o usuário interage com ele. O calculateValues função irá trabalhar fora do lado da tela está o cursor e incline-o para essa direção.

Criar a função de preencher esses valores. Dividindo por 40 diminui o efeito inclinação para torná-lo mais utilizável. O valor final será visualmente levantar o cartão da tela.

 const calculateValues ​​= (x, y) = & gt; [
- (y - window.innerHeight / 2) / 40,
(X - window.innerWidth / 2) / 40,
1.1]; 

19. Mostrar classificação por estrelas

Cada imagem tem uma classificação que precisamos de exibição em estrelas na parte de trás do cartão. Esta lógica é realizada dentro de seu próprio componente, mas que precisa ser aplicada no rosto de volta em primeiro lugar.

Primeiro, crie uma nova peça de estado para manter o rating, em seguida, criar uma & Lt; Três Estrelas & gt; componente no interior do revestimento de volta & lt; div & gt; .

 const [currentRating, setRating]
 = UseState (Média);
[...]
{Selecionada & amp; & amp; (
 & Lt; classificação Três Estrelas = {} currentRating
setRating = {} setRating / & gt;
)} 

20. Criar animação estrela

As classificações de estrelas vão desaparecer em uma vez que o cartão tenha virado. Ao utilizar o useTrail Gancho de React mola, podemos aplicar molas de múltiplos componentes, um após o outro.

Abra Quatro Estrelas / index.js e adicionar o gancho. O primeiro argumento definirá o número de molas para fazer.

 const animatedStars = useTrail (5, {
Config: {
atrito: 22,
tensão: 500
},
de: {opacidade: 0,
transformar: "escala (0,8)"},
opacidade: 1,
transform: "escala (1)"
}); 

21. Aplicar estrelas ao componente

A última coisa que precisamos fazer é realmente mostrar essas estrelas. O animatedStars variável agora contém uma série de molas, o qual podemos iterar e aplicar ao cartão.

Para cada estrela, mostram um & Lt; AnimatedStar & gt; componente principal no interior da Classificação por estrelas div. Espalhe os adereços estilo para aplicar todos os efeitos para cada componente. Quando clicado, enviar a nova classificação para o pai & Lt; RatingCard & gt; componente.

 {animatedstars.map ((adereços, índice) = & gt; (
& Lt; AnimatedStar
= Activas {índice de + 1 & lt; = classificação}
onClick = {e = & gt; {
e.stopPropagation ();
setRating (índice de + 1);
}}
= Índice de chave {}
style = {{... adereços}}
/ & gt;
))} 

Este artigo foi originalmente publicado na revista Creative Web Design Web designer . Comprar edição 288 ou se inscrever .

Consulte Mais informação:

• Desenvolver reutilizável Reagir componentes
• Os melhores laptops para a programação em 2019
• 35 ferramentas de web design para ajudá-lo a trabalhar mais esperto