Contente
- 01. Instale dependências
- 02. Gerar imagens no estado
- 03. Exibir cada cartão de imagem
- 04. Adicionar estrutura de cartão
- 05. Aplicar estilos de flutuação
- 06. Definir sombra por padrão
- 07. Manter o estado selecionado
- 08. Defina a animação flip
- 09. Converter para contêiner animado
- 10. Anime o cartão frontal
- 11. Anime o cartão traseiro
- 12. Interpolar os valores
- 13. Alternar estado ao clicar
- 14. Ajuste a física da virada do cartão
- 15. Crie mola para efeito de inclinação
- 16. Aplique estilos de inclinação
- 17. Definir valores ao mover o mouse
- 18. Calcule os valores da animação
- 19. Mostrar classificação por estrelas
- 20. Crie uma animação de estrela
- 21. Aplique estrelas ao componente
O React Spring pode ajudá-lo com animações, que são notoriamente difíceis de implementar na web. As animações CSS são a melhor escolha, mas a criação de um resultado suave requer um malabarismo cuidadoso de classes, durações e eventos. Incluir uma estrutura JavaScript como React na mistura só complica ainda mais as coisas.
Para animações que dependem da interação do usuário, os valores podem ser calculados por meio de JavaScript e aplicados diretamente a um elemento. Ao usar essa abordagem manual, precisaríamos calcular e aplicar nosso próprio easing para tornar a animação mais natural.
React Spring é uma biblioteca construída para lidar com muitas das dificuldades comuns quando se trata de animação na web. É uma abordagem um pouco diferente, focando na física em durações diretas e funções de atenuação definidas. Isso ajuda a manter a sensação de suavidade e naturalidade.
Embora na maioria das vezes isso seja usado para efeitos visuais, a biblioteca fará a transição entre dois valores, independentemente de esse valor ser usado para um estilo ou não. Por exemplo, pode ser usado para contar várias inscrições para enfatizar o tamanho de uma comunidade.
Neste tutorial, faremos um componente de cartão que permite aos usuários avaliar as imagens. O cartão vira para revelar uma classificação com estrelas e os usuários podem clicar para adicionar a sua própria. Estaremos usando a implementação de ganchos mais recente do React Spring, que requer o React versão 16.8 ou superior. Antes de começar, baixe os arquivos do tutorial aqui (e faça backup deles no armazenamento em nuvem).
Se você deseja construir um site sem processos de código complexos, use um construtor de sites decente. E certifique-se de explorar também as opções de hospedagem na web.
01. Instale dependências
Com os arquivos baixados, as dependências do pacote precisam ser instaladas antes de começarmos. Este projeto baseado em Create React App inclui o react-spring pacote e toda a configuração do servidor local necessária para começar.
Na linha de comando, localize os arquivos do projeto, instale-os e execute-os.
02. Gerar imagens no estado
Primeiro, precisamos de algumas imagens para avaliar. Para este tutorial, vamos codificar algumas imagens no estado do aplicativo, mas esses dados podem vir de qualquer fonte. Abra o App.js e crie algumas imagens com o useState gancho do React. Isso dará a cada imagem uma classificação inicial que podemos exibir e atualizar mais tarde.
const [cards] = useState ([createImage (image1), createImage (image2), createImage (image3)]);
03. Exibir cada cartão de imagem
Como as imagens são armazenadas em um array, podemos repetir esse estado e criar componentes separados para cada um. A lógica de animação para React Spring viverá dentro de um RatingsCard /> componente que podemos usar em qualquer lugar que precisarmos.
Dentro do método de renderização do App.js, crie uma cópia desse componente para cada cartão na matriz de estado. Receberá todos os valores do estado, incluindo a imagem e a avaliação inicial.
{cards.map ((card, index) => (chave RatingsCard = {index} {... card} />))}
04. Adicionar estrutura de cartão
Antes de adicionarmos a animação, o cartão precisa de algum conteúdo. Cada cartão tem uma frente e um verso, que são implementados separadamente div> elementos dispostos em camadas uns sobre os outros.
Abrir RatingsCard / index.jse adicione a estrutura do cartão. Precisamos aplicar a imagem como plano de fundo ao cartão frontal, com o verso eventualmente contendo a classificação.
div className = "RatingsCard"> div className = "RatingsCard__front" style = {{backgroundImage: `url ($ {image})`}} /> div className = "RatingsCard__back" /> / div>
05. Aplicar estilos de flutuação
Todos os estilos que não são atualizados diretamente por meio de nossas animações podem ser aplicados por meio de CSS. Isso inclui o efeito de sombra 3D básico para cada carta quando pairada sobre ela. Lado de dentro RatingsCard / style.css, adicione alguns estilos extras para fazer o cartão saltar para fora da página ao passar o mouse aplicando um filtro.
.RatingsCard: hover {filter: drop-shadow (0 14px 28px rgba (0, 0, 0, 0.25)) drop-shadow (0 10px 10px rgba (0, 0, 0, 0.1)); }
06. Definir sombra por padrão
Uma sombra repentina pairando sobre ele é uma experiência chocante. Devemos, portanto, fazer uma transição lenta entre os estados para manter as coisas suaves. Adicione uma sombra mais sutil para o cartão quando não estiver sendo passado o mouse sobre ele. Use o transição propriedade para animar entre esses dois estados.
.RatingsCard {[...] filtro: sombra (0 3px 6px rgba (0, 0, 0, 0,16)) sombra (0 3px 6px rgba (0, 0, 0, 0,1)); transição: filtro 0,5s; }
07. Manter o estado selecionado
Precisamos armazenar e atualizar as informações sobre o lado do cartão voltado para cima. Podemos usar o integrado do React useState gancho para definir um valor inicial e fazê-lo retornar o valor atual e um método para atualizá-lo.
No início do RatingsCard função do componente, criar definir este selecionado Estado.
const [selecionado, setSelected] = useState (false);
08. Defina a animação flip
O React Spring é responsável por fazer a transição dos números entre um valor e outro. Isso pode ser feito com uma mola e o useSpring gancho. Fornecemos algumas informações de configuração e ele retorna um conjunto de valores que são atualizados de acordo com seus cálculos físicos.
Crie uma mola para a animação flip. Este irá desaparecer e girar um cartão, dependendo se o cartão está em seu selecionado Estado.
const {opacity, transform} = useSpring ({opacity: selected? 1: 0, transform: `rotateY ($ {selected? 180: 0} deg)`});
09. Converter para contêiner animado
Os objetos devolvidos por useSpring defina sua animação, mas não forneça os valores numéricos de que precisamos. O animado a função de fábrica digere essas informações e, em seguida, fornece os valores como números aos componentes.
Converta o RatingsCard elemento para usar o animado função. O animated.div a sintaxe diz à função para retornar um div>.
animated.div className = "RatingsCard"> animated.div className = "RatingsCard__front" style = {{backgroundImage: `url ($ {image})`}} /> animated.div className = "RatingsCard__back" /> /animated.div >
10. Anime o cartão frontal
React Spring está apenas animando os valores e não faz nenhuma animação dos elementos por si só. Podemos vincular esses valores a um adereço de estilo e criar essa animação em tempo real. Atualize o cartão frontal para fazer uso do novo opacidade e transformar valores. Nesse caso, precisaremos interpolar o valor de opacidade, que abordaremos em breve.
animated.div className = "RatingsCard__front" style = {{backgroundImage: `url ($ {image})`, opacity: opacity.interpolate (inverseOpacity), transform}} />
11. Anime o cartão traseiro
Ao virar o cartão, qualquer animação que aplicarmos a uma face precisará ser aplicada ao contrário na outra. Quando tocados juntos, eles vão parecer que estão se movendo como uma única peça.
Neste caso, precisamos aplicar os mesmos estilos ao cartão traseiro, mas desta vez interpolar o transformar valor em vez disso.
animated.div className = "RatingsCard__back" style = {{opacity, transform: transform .interpolate (inverseTransform)}} />
12. Interpolar os valores
Em vez de aplicar valores diretamente às propriedades CSS, podemos aplicar algum tipo de função a elas, a fim de mapear seu valor para um diferente. Este processo é denominado interpolação.
Defina algumas funções de interpolação no topo do RatingsCard / index.js. Eles aplicam o reverso das animações de opacidade e transformação ao selecionar ou desmarcar.
const inverseOpacity = o => 1 - o; const inverseTransform = t => `$ {t} rotateY (180deg)`;
13. Alternar estado ao clicar
A virada do cartão deve estar ligada a um clique. Enquanto o selecionado o valor do estado determina qual face está visível, devemos alternar esse estado ao clicar no cartão.
Adicione um ouvinte de clique ao externo RatingsCard elemento. Quando isso acontecer, ele alternará o valor booleano mantido no estado.
animated.div className = "RatingsCard" onClick = {() => setSelected (! selected)}>
14. Ajuste a física da virada do cartão
No momento, nossa animação funciona, mas parece mais uma flutuação do que uma virada. Podemos alterar alguns valores em cada primavera para alterar como ela se comporta. Dentro do objeto de configuração para a mola, crie um config objeto para diminuir o atrito e aumentar a tensão. Isso dará à animação uma sensação mais rápida.
useSpring ({config: {atrito: 22, tensão: 500}, [...]});
15. Crie mola para efeito de inclinação
Embora o efeito de foco com CSS anterior forneça algum feedback, podemos aprimorá-lo ainda mais com uma animação de inclinação que reage à posição do cursor. Ao atualizar uma mola em alta frequência, como um movimento do mouse, podemos obter um melhor desempenho usando o definir função que é retornada a cada primavera. Crie uma nova mola para esta animação e mantenha a função retornada.
const [adereços, definir] = useSpring (() => ({estado: [0, 0, 1]}));
16. Aplique estilos de inclinação
React Spring pode animar muitos tipos diferentes de valores, o que inclui arrays. Armazenar nossos valores em uma matriz nos permite interpolar todos eles no transformar propriedade em uma passagem.
Criar uma transformCard função de interpolação e aplicar os estilos ao principal RatingsCard elemento.
const transformCard = (x, y, escala) => `perspectiva (1000px) rotateX ($ {x} deg) rotateY ($ {y} deg) escala ($ {escala})`; [...] animated.div className = "RatingsCard" onClick = {() => setSelected (! selected)} style = {{transform:! selected && props.state.interpolate (transformCard)}}>
17. Definir valores ao mover o mouse
Os eventos do mouse fornecem as coordenadas do cursor naquele momento. Estamos interessados nas coordenadas do cliente para obter a posição do cursor na janela de visualização. Adicione o movimento do mouse e deixe os eventos para o exterior div>. Passamos as coordenadas para uma função em movimento e redefinimos os valores padrão quando o cursor sai do div>.
onMouseLeave = {() => set ({state: [0, 0, 1]})} onMouseMove = {({clientX: x, clientY: y}) => set ({state: calculValues (x, y)} )}
18. Calcule os valores da animação
Queremos apenas uma pequena inclinação para evitar que o cartão se mova muito quando o usuário interage com ele. O calcularValores A função funcionará no lado da tela em que o cursor está e o inclinará nessa direção.
Crie a função para preencher esses valores. A divisão por 40 diminui o efeito de inclinação para torná-lo mais utilizável. O valor final levantará visualmente o cartão da tela.
const calcularValores = (x, y) => [- (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 exibir em estrelas no verso do cartão. Essa lógica é mantida dentro de seu próprio componente, mas isso precisa ser aplicado primeiro à face posterior.
Primeiro, crie um novo estado para manter a classificação e, em seguida, crie um StarRating> componente dentro da parte traseira div>.
const [currentRating, setRating] = useState (classificação); [...] {selected && (StarRating rating = {currentRating} setRating = {setRating} />)}
20. Crie uma animação de estrela
A classificação por estrelas diminuirá assim que o cartão for virado. Usando o useTrail No gancho do React Spring, podemos aplicar molas a vários componentes, um após o outro.
Abra StarRating / index.js e adicione o gancho. O primeiro argumento definirá o número de molas a serem feitas.
const animatedStars = useTrail (5, {config: {friction: 22, tension: 500}, from: {opacity: 0, transform: "scale (0.8)"}, opacity: 1, transform: "scale (1)"} );
21. Aplique estrelas ao componente
A última coisa que precisamos fazer é realmente exibir essas estrelas. O animatedStars variável agora contém uma matriz de molas, que podemos iterar e aplicar ao cartão.
Para cada estrela, mostre um AnimatedStar> componente dentro do principal Classificação por estrelas div. Espalhe os adereços de estilo para aplicar todos os efeitos a cada componente. Quando clicado, envia a nova classificação para o pai RatingCard> componente.
{animatedStars.map ((props, index) => (AnimatedStar ativo = {index + 1 = rating} onClick = {e => {e.stopPropagation (); setRating (index + 1);}} key = {index} estilo = {{... props}} />))}
Este artigo foi publicado originalmente na revista de web design criativoWeb designer.Compre a edição 288 ou se inscrever.
