Converta fotos em SVGs animados com react, gancho de react e TypeScript

1. Apresentação: Aprender a usar SVGs otimizados é uma habilidade importante em qualquer conjunto de habilidades de designer ou desenvolvedor. Neste minicurso, que tem apenas uma aula, vamos partir de uma foto tirada com apenas um telefone normal. Vamos otimizar essa imagem. Vamos convertê-lo em um SVG. Em seguida, otimizaremos esse SVG para prepará-lo para a web e, em seguida, criaremos um componente React SVG. E então, como bônus, adicionaremos um gancho React personalizado para animar o plano de fundo desse SVG. E o tempo todo e o react usará o TypeScript. Esse minicurso foi muito divertido para mim gravar. Espero que você tenha aprendido muito. Agora vamos começar. 2. Como converter fotos em SVGs e porta otimizados e prontos para a web para reagir o TypeScript: Achei que seria legal colocar esse logotipo muito legal na parte de trás aqui e na frente perto com o sexto aniversário de seis anos. Mas seria legal transformá-lo em um SVG. E ainda como bônus, adicionarei um gancho React personalizado para mudar, em última análise, essa cor de fundo rosa. Então, à medida que movermos o mouse, mudaremos a cor do plano de fundo. Então, eu vou te mostrar o fluxo completo. Eu tirei uma foto da parte de trás da camisa. Então, sim, vamos entrar no código e começar a examiná-lo. Como eu disse, eu já tirei uma foto da frente e de trás da camisa apenas com uma câmera normal do iPhone e nada de especial. A primeira coisa que faremos para criar nosso SVG baseado em reação é abrir essas duas imagens no GIMP. Então, vou selecionar os dois. E nós os abriremos no GIMP aqui. Agora que temos as duas imagens aqui, a primeira coisa que faremos é girá-las. Então, descemos para Transform, giramos 90 graus. E também na parte de trás da camisa, gire 90 graus. Então, o que vou fazer é ir até o índice do modo de imagem. E eu vou converter isso em uma imagem de três cores. Então, temos preto, azul claro e essa cor rosa brilhante. Então, espero que o Gimp faça um bom trabalho para nós. Vamos ver como isso acontece. Ótimo. Então, basicamente, mais ou menos fez um bom trabalho. Eu também vou fazer o mesmo aqui. E nesse caso, não temos três cores, mas temos 12345, eu acho. Acredito que sejam da mesma cor. Então, vamos tentar indexar com cinco cores e ver o que acontece. Tudo bem, então isso parece muito bom. A próxima coisa que faremos é exportar essas imagens. Vou chamar essa camisa de volta limpa. Certifique-se de que a qualidade 100 esteja definida. E o mesmo vale para a frente aqui. E vou chamar isso da mesma forma. Camisa limpa. Temos nossa qualidade 100% e as exportaremos. Em seguida, o que vamos fazer é abrir o Inkscape. E agora que abrimos o Inkscape, vamos importar essas duas fotos limpas. Eu tenho os dois aqui, posso selecionar os dois com Command e clicar. E vamos abri-los. Agora, o Inkscape perguntará aqui algumas configurações que queremos suavizar para otimizar a qualidade. A incorporação é boa e a partir de um arquivo. Portanto, certifique-se de que a única coisa importante aqui é suave, porque queremos que a imagem da mais alta qualidade seja importante. Portanto, o Inkscape abrirá, por padrão, essas duas imagens separadas. Podemos pegar a frente aqui, e eu vou copiar isso para trás. Temos a frente na parte de trás lado a lado aqui. Ambas ainda são imagens de bitmap, e é aí que entra a mágica. Então, como dissemos, essa é uma imagem de três cores e essa é uma imagem de cinco cores. Então, vamos fazer as três cores primeiro. Depois de selecionar seu bitmap. Eu vou até aqui, Trace Bitmap. E queremos fazer vários escaneamentos. E, em vez de etapas de brilho, não usaremos cores. E então queremos três digitalizações, uma por cor. Normalmente, eu removo todas essas otimizações, mas sua quilometragem pode variar. O bom é que você pode atualizar e decidir continuamente se quer mexer com esses valores. Às vezes, suavizar fornece bordas bem mais suaves, mas parece que o padrão aqui, sem nenhuma otimização ou seleção de suavidade, parece muito bom. Então eu vou dizer OK. E você verá agora aqui, exatamente sobreposto ao bitmap. Ainda não é um bitmap como esse, diz a imagem aqui embaixo. Em vez disso, vemos que é um grupo de três objetos. Isso significa que o rastreamento funcionou perfeitamente. Vou mover isso para cá e vou me livrar da imagem antiga. Agora vou fazer o mesmo com a parte de trás da camisa. Rastreie o bitmap. Várias digitalizações. Nesse caso, temos cinco cores. Vamos atualizá-lo, ver se ele pega todas as cores. Perfeito. Isso parece ótimo. Digamos que está bem. E agora vemos que temos um grupo de cinco objetos. Então, vou mover isso novamente e me livrar da imagem antiga. Então, agora o que vamos fazer é limpar essas imagens. Então, para a frente da camisa, eu realmente não preciso desse plano de fundo. Eu só quero as letras. Então, o azul e o rosa. Então, a primeira coisa que vou fazer é desagrupar. Este grupo de três cores. Normalmente, o rastreamento se agrupa automaticamente. E, no total, podemos simplesmente desagrupar isso. E vemos que selecionamos esse caminho sombrio aqui. Só vamos nos livrar disso. Parece que havia algum artefato quando convertemos no GIMP, mas isso também não é problema. Apenas tenha cuidado ao selecionar aqui. Não queremos excluir a camada inteira. Só queremos excluir esse canto. E como isso agora é um SVG, só queremos os nós desse SVG e vamos excluir esse canto. Então, só nos resta a camada rosa. Apenas essas letras bonitas. Assim, podemos fazer o mesmo com a parte de trás da camisa. Vou desagrupar isso. E aqui temos que ter um pouco de cuidado, porque se olharmos de perto a forma como a camisa foi estampada, esse preto não é uma cor separada. Isso é literalmente o plano de fundo dessa imagem. Então, precisaremos manter um pouco desse plano de fundo, mas o que vou fazer é moldá-lo de volta para criar um contorno em torno de toda a imagem. Ficará um pouco mais bonito. Eu acho. A primeira coisa que vou fazer é me livrar desse vermelho. Não sei exatamente como apareceu, mas vou me livrar completamente dessa camada vermelha. Então, podemos simplesmente excluir isso. E como eu disse, vou começar a remodelar esse fundo preto. Portanto, podemos fazer muitas otimizações aqui. Vou excluir a maioria desses nós e podemos começar a limpar. Agora, você pode descobrir que em algum momento você precisa de outro nó. Isso é fácil de resolver. Você apenas se certifica de que pelo menos dois nós estejam selecionados com o botão Shift pressionado. E simplesmente pressionamos o botão de adição aqui para inserir um novo nó, vou precisar de mais alguns. Então, mesmo que esses três estejam selecionados, vou pressionar novamente o botão de adição e você verá que ele realmente coloca um novo entre cada selecionado. Então, isso deve me dar uma boa quilometragem aqui. Agora o que faremos é puxar isso para cima e para baixo. Basta colocá-lo em cima. Isso parece muito bom. E notei que essa cor realmente não se transferiu perfeitamente. Eu só vou tomar Aqua. Isso parece muito bom. E também vou garantir que a legenda aqui neste plano de fundo seja da mesma cor. Só para um pouco de união. Pode copiar esse código hexadecimal. E quando eu escolho isso aqui, posso colar isso de volta. E isso parece muito bom. Quero dizer, o fundo aqui não é muito limpo, mas é claro que esse não é o objetivo deste vídeo. É por isso que eu passei por muitas dessas coisas. E, claro, como sabemos, você pode encontrar SVGs infinitos na Internet. Então, às vezes você começa de qualquer maneira com um SVG. Foi apenas um pequeno bônus para mostrar a vocês meu fluxo de trabalho de como converto imagens de bitmap em SVGs. Estamos quase terminando. Vou selecionar isso e acessar as propriedades do documento. Vou redimensionar a página para o conteúdo. Vou adicionar algumas margens. Provavelmente 50 é muito bom. Apenas certifique-se de que, ao fazer isso, suas unidades estejam em pixels. Se você tem uma polegada ou algo assim, você terá margens enormes. Mas 50 parece bastante decente. E acho que isso é bom para economizarmos. Então, vou salvar como e vou colocar o design da camisa. E, claro, com a extensão SVG. Agora, aqui, o Inkscape nos oferece duas opções de SVG, o Inkscape SVG ou o SVG plano. E como estamos indo para a web, queremos usar o SVG simples. O Inkscape eliminará um pouco de sua marcação. Portanto, não é tão prolixo. Mas, como veremos em breve, vamos otimizar ainda mais o SVG. Então, vou guardar isso. Agora, só para ilustrar o que estamos prestes a fazer aqui, estou nos meus downloads. Este é o SVG que acabamos de exportar. E vou abrir isso com o Visual Studio Code. Podemos ver aqui que há um pouco de lixo por aqui. Este é um grande SVG. Não seria ótimo se houvesse uma ferramenta que pudesse reduzir o tamanho do SVG que acabamos de exportar. Assim, podemos usá-lo com facilidade ou mais facilidade no React. Felizmente, existe essa ferramenta para nós e essa é a ferramenta SVG OMG de Jake Archibald. Está hospedado em uma de suas páginas do GitHub. Então, vou abrir o SVG que acabamos de exportar. E agora, o mais legal dessa ferramenta é que podemos brincar com algumas configurações e, em última análise, reduzir o tamanho do nosso SVG. Normalmente, os que economizaram mais espaço são esses dois, mas você precisa ter cuidado. Se eu começar a reduzir a precisão para muito baixo, você pode começar a ver algumas bordas estranhas e assim por diante. Mas você pode ver que, ao fazer isso, já estamos reduzidos a 16 kb. Mas só para não ser tão difícil, acho que vou deixar a precisão numérica em uma. E podemos jogar um pouco com a precisão da transformação. Parece que não percebo nada lá. Você pode embelezar a marcação. Pode fazer uma passagem múltipla. Não sei se entendo quais são as diferenças, mas economizamos um pouco. Então, vamos aceitar isso. E imediatamente podemos simplesmente pressionar Copiar aqui, e esse SVG é copiado para nossa área de transferência. Agora estou na sandbox de código e vamos criar uma sandbox. E, claro, reaja com o TypeScript. E a primeira coisa que vamos fazer aqui é criar uma nova pasta chamada componentes. E vou criar um novo componente chamado SVG em um arquivo TSX. E é apenas um componente funcional. Agora, poderíamos tentar colar o SVG que acabamos de copiar. E se eu limpar isso, teremos alguns problemas. E, essencialmente, o problema é que como o SVG é um XML original, ele não está exatamente pronto para o JSX. Felizmente, há outra ferramenta que podemos usar para isso. E essa ferramenta é Magic Dot React js.net. Então, podemos simplesmente colar nosso SVG e o gerador gerará para nós uma sintaxe JSX válida. Agora, por algum motivo, ele sempre decide criar um componente de classe. Mas é claro que só precisamos da marcação na declaração de retorno. Então, se eu rolar até aqui, teremos tudo o que precisamos e poderemos voltar para nossa sandbox e tentar isso novamente. Agora, não devemos ter nenhum aviso de sintaxe ao formatar o documento. Perfeito, então vou salvar esse componente SVG da camisa e vou limpar o componente do aplicativo aqui. Vamos colocar React mais SVG mais TypeScript é igual a coração. E vou adicionar meu componente SVG. Vou importar isso dos oponentes, SVG. Então, isso já parece muito bom. E, como mencionei, usaríamos um gancho personalizado para que, à medida que movêssemos o mouse pela tela, mudássemos essa cor de fundo apenas para torná-la um pouco divertida. E também acho que o que seria muito legal é mudarmos essas duas cores. Então, primeiro, temos que voltar ao nosso SVG, identificar qual caminho ou quais caminhos estão contribuindo para isso. E então usaremos o gancho para mudar a cor de acordo com a posição do mouse. Então, primeiro vamos entrar aqui. E se olharmos para o primeiro caminho listado, temos essa cor. Ok, essa é a cor bege clara. Então temos essa cor FC. Bingo, encontramos nossa cor. Agora, se eu procurar isso, sim, exatamente. Eu deveria ver isso duas vezes. E essa é a cor que queremos mudar à medida que o mouse se move. A primeira coisa que vou fazer é em vez de manter isso codificado como uma string, vou mudar isso para uma variável chamada simplesmente cor. E, claro, o código sandbox vai gritar conosco porque ainda não definimos isso. Então, aqui em cima, eu vou dizer cor. E vamos chamar esse gancho, que ainda precisa ser definido e implementado. Vamos chamá-lo de algo como usar cores no mouse. Mova-se. Agora, para realmente implementar esse gancho. Gosto de manter meu código organizado. Normalmente coloco meus ganchos em uma pasta de ganchos separada. Podemos chamá-lo com o mesmo nome, usar cor ao mover o mouse e exportar const, usar cor ao mover o mouse. E, por enquanto, vamos voltar para o vermelho. Já podemos verificar se conectamos todos os pontos corretamente. Então, vou importar, usar cores ao mover o mouse a partir dos ganchos. Está de volta, uma pasta. Use cores ao mover o mouse. Bom. Então, estamos na metade do caminho. Selecionamos a cor correta que queremos modificar. E agora é apenas a animação real quando movemos o mouse para mudar essa cor. Assim, podemos adicionar a definição do tipo de retorno e que sempre queremos que a string seja retornada a partir desse gancho. E, claro, como a cor em si mudará com o movimento do mouse, usaremos o estado de uso para definir nossa cor. Então, temos cor constante, cor definida e esse é o estado usado. E vou continuar usando vermelho aqui como valor inicial. E precisamos importar isso do React. Tudo bem, tudo ainda está bem. Agora, para realmente começar a ouvir o movimento do mouse, isso é uma janela. Adicione o ouvinte do evento. E o evento é o movimento do mouse. E eu vou definir uma função de movimentação do mouse. Agora, no React, não é uma prática recomendada simplesmente definir isso abertamente. Devemos fazer uma limpeza de desmontagem e também de desmontagem. Então, vou colocar isso em um gancho de efeito de usuário que está no Mount. Com uma matriz de dependências vazia. Eu adicionaria esse ouvinte de eventos. E a função de limpeza, como sabemos, é quando retornamos uma função do efeito US. E isso seria window dot, remova o ouvinte de eventos. Agora, com suavidade e com o mouse, mova. Então, agora vamos definir essa função de movimentação do mouse. E se observarmos esse ouvinte de adição de eventos para mover o mouse, veremos que obtemos um evento de mouse. Então, isso seria passado nesta função. E como nossa imagem ocupa grande parte da tela, não acho que seja muito ingênuo, como implementação inicial, pegar todas as dimensões da tela e baseá-las em algum tipo de porcentagem. de onde estamos atualmente com nosso mouse. Então, por exemplo, a porcentagem x da localização do nosso mouse será o cliente x dividido pela largura interna da tela. E o mesmo para o porquê da janela. E então, talvez como uma porcentagem média, possamos somar 2% x mais y, dividido por dois. Agora temos algum tipo de porcentagem. E o que vem à mente imediatamente é que podemos ter algum tipo de mistura de cores. Então, a coisa mais fácil agora seria talvez duas cores. E com esse presente, você tem algum tipo de mistura entre eles. Você pode tentar escrever sua própria função para fazer isso com duas cores. Mas quanto a mim, vou usar uma dependência muito popular para fazer esse tipo de coisa. E é chamado de cromossomos AS. E com o chroma js, podemos importar o Kromer de um JS e definir uma escala usando a função de escala do Chrome. Então essa é a escala cromática. E podemos passar uma ou mais cores. Por enquanto, acho que vou fazer alguma coisa. Vamos experimentar rosa e roxo. E também vou mudar essa cor inicial para rosa, para fique mais próxima do que tínhamos originalmente e do design. Agora, com essa escala misturando entre eles, dado um decimal, que é exatamente o que isso será termine com esse objeto de escala. Diz tão simples quanto ligar. Escale na média. E depois pegar um feitiço. Então eu vou chamar isso de cor. Em seguida, é claro, defina a cor para o estado, que fará com que esse gancho seja executado e, é claro, retornará a nova cor. E a última coisa a esclarecer aqui é que parece que o código sandbox está reclamando, que parece que o código sandbox está ou melhor, o TypeScript está reclamando. Não consigo encontrar os tipos de chroma JS. Então, vamos também adicionar os tipos para chroma js. Agora podemos limpar isso e atualizar o aplicativo. Veja nosso trabalho manual aqui. Muito legal. Então, à medida que movemos o mouse, passa do rosa para o roxo. E por causa desse algoritmo, definimos aqui, é claro, o total de 0% é quando x e y são zero, isso o deixará o mais próximo possível do rosa. E quando x e y estão próximos da altura interna ou da largura interna, isso lhe dará o mais próximo do roxo. Então, como o último tipo de cereja no topo, vamos voltar ao nosso SVG e corrigir. Parece que há alguns pequenos problemas de fronteira que poderíamos resolver. E podemos limpar isso simplesmente adicionando uma pequena largura de traçado ao nosso SVG preto aqui. Então eu vou fazer isso. Esse caminho preto do SVG é na verdade esse com essa cor escura. Então, vemos que a primeira coisa que está faltando na verdade, é a cor do traçado em si, que na linguagem SVG é indicada simplesmente por traçado. E eu vou fazer o traço, é claro da mesma cor. O preenchimento. Salve isso e atualize aqui. Isso pode ter feito alguma coisa, mas vamos aumentar o traço para um e ver como fica. Recarregue aqui. Está quase resolvido. Talvez se subirmos até dois, isso finalmente faça isso por nós. Muito bom. Ainda veja aqui, vamos ver como fica. Se saltarmos até quatro. Tudo bem, isso é muito bom. Poderíamos voltar ao Inkscape e corrigir essas duas pequenas dicas aqui, mas estou muito satisfeito com o resultado. Fizemos um pequeno projeto agradável e divertido. Espero que você tenha aprendido algo sobre como transformar bitmaps em SVG em SVGs mais limpos. Isso foi muito divertido para mim. E sim, deixe-me saber se quiser mais detalhes sobre dicas e estratégias para criar esses ganchos personalizados. Fora isso, estou muito feliz por estar de volta e nos vemos na próxima vez. Cuide-se.