Como criar um cursor personalizado no React — Parte 2 [Explicação matemática]

Se você está procurando o código-fonte, ele está disponível no vídeo.

Por favor, apoie assistindo a este vídeo.

Este artigo está focado principalmente na parte matemática da animação do cursor (contorno do cursor). A parte 1 do artigo foi completamente relacionada à parte do código, se você quiser ver como está funcionando, pode segui-la.

A parte principal gira em torno dessa função —

O requestAnimationFrame também nos fornece uma variável timestamp que podemos usar para ver depois de qual intervalo de tempo nossa função recursiva está sendo chamada.

Também precisamos armazenar os pontos x e y toda vez que essa função é chamada. Então, para isso, podemos criar uma função que pode armazenar todas essas 3 propriedades.

Precisamos ajustar nossa função animateOutline também para obter a saída desejada.

Estamos empurrando o objeto de coordenadas dentro do array de coordenadas .

Novas condições foram adicionadas para impedir que a função requestAnimationFrame a chame novamente. De acordo com a condição, vamos chamá-lo recursivamente apenas até que as coordenadas do contorno do cursor de tempo não sejam iguais às coordenadas do ponto do cursor .

Consolaremos o log quando as coordenadas se tornarem iguais. Estaremos usando a console.tablefunção porque fornece uma boa visão tabular da saída.

Há poucas coisas que podemos concluir a partir desses dados -

• A diferença entre os timestamps é quase constante, ou seja, 16–17ms. Se você ler este artigo, saberá que está simulando 60FPS (1000/60). Esses 1000ms divididos por 60 é igual a 16,67ms.
• Os pontos de dados têm uma grande diferença na fase inicial da animação, mas a diferença diminui à medida que o tempo aumenta.

Se traçarmos x pontos em relação ao timestamp, obteremos um gráfico como este

Um pouco se parece com um gráfico logarítmico e uma função de bezier cúbica fácil. Aumenta rapidamente na fase inicial e então a taxa de incremento diminui.

E é isso, é assim que conseguimos alcançar esse tipo de transição suave e fácil com a ajuda do JavaScript.

Mais conteúdo em plainenglish.io