No mundo da programação, tarefas aparentemente simples podem se transformar em desafios complexos. Recentemente, encontramos um desses desafios ao tentar transformar um projeto Figma em código. A tarefa envolvia a criação de um mostrador radial com um gradiente linear – um requisito aparentemente simples que logo se mostrou mais complexo do que o esperado.  Nesta postagem, vamos mergulhar no mundo dos gradientes SVG e explorar a solução que criamos para enfrentar os desafios que surgiram e discutir por que, às vezes, receber desafios complexos de engenharia como esse pode ser altamente recompensador.  Jogar uma bola curva  A princípio, parecia simples. Deve haver uma biblioteca que possamos usar para criar o mostrador e aplicar um gradiente linear a ele. Quão difícil poderia ser?  E depois de uma rápida pesquisa em bibliotecas investigativas, como   e   , encontramos bibliotecas capazes de criar mostradores radiais, bem como gerar gradientes lineares usando SVG. No entanto, a verdadeira complexidade surgiu ao tentar combinar esses dois elementos perfeitamente. O obstáculo estava na natureza dos gradientes lineares definidos no SVG. Por padrão, os gradientes lineares transitam entre as cores ao longo de uma linha reta. Quando aplicado ao traçado de um caminho circular, a direção do gradiente permanece linear, desconsiderando a curva do círculo. High Charts FusionCharts  Conseqüentemente, se aplicássemos um gradiente linear a um mostrador circular completo criado com uma única curva, o gradiente seguiria um caminho reto em vez do caminho radial desejado ao longo do mostrador. Isso não atingiria o gradiente curvo que estávamos procurando - então estávamos de volta à prancheta.   Desfazendo o problema  Em vez disso, para obter o efeito de um gradiente de transição suave envolvendo o mostrador radial, percebemos que precisávamos quebrar o mostrador em várias seções e aplicar gradientes distintos a cada seção.  Em nosso exemplo, dividimos o mostrador em quatro seções; cada um atribuiu seu próprio gradiente linear. Ao selecionar cuidadosamente as cores para as paradas de gradiente, conseguimos criar uma aparência de gradiente contínuo ao redor do mostrador.  Aqui, começamos a ver como podemos construir um mostrador radial em SVG. O atributo “d” define um caminho a ser traçado. Neste caso, especifica o caminho para o primeiro quarto do nosso mostrador radial.   O 'M' significa “Move To” e define o ponto inicial do caminho nas coordenadas (150,10). O comando 'a' cria um arco elíptico. Este comando arc tem vários parâmetros. Os dois primeiros parâmetros, '120 120', definem os raios x e y da elipse usados para desenhar o arco. O '0 0 1' define a rotação do eixo x (que é zero), sinalizador de arco grande e sinalizador de varredura. O final '103.9230 60' define o ponto final do caminho, que completa nosso arco. Em seguida, aplicamos o gradiente com o atributo Stroke no caminho.  Este processo é repetido para cada quarto do mostrador. Cada quarto tem seu próprio caminho e seu próprio gradiente. Isso dá o efeito de um único gradiente de transição suave circulando ao redor do mostrador.   Preenchimento de Gradiente Dinâmico  Para preencher dinamicamente o gradiente ao longo do dial, aproveitamos as propriedades stroke-dashoffset e stroke-dasharray do caminho SVG. Essa técnica é comumente empregada ao criar mostradores radiais. CSS tricks tem um artigo detalhado sobre a abordagem:   . Animação de linha SVG funciona  Ao definir o traço-dasharray igual ao comprimento do caminho, estabelecemos um padrão de traços e intervalos semelhantes a uma linha pontilhada circundando o círculo. A propriedade traço-dashoffset determinou o ponto inicial do padrão de traço, animando efetivamente o movimento do traço. Ao animar o deslocamento do traço do início do caminho até o comprimento do caminho, o traço parecia “viajar” ao redor do círculo.    Abraçando a complexidade (às vezes)  Embora projetos complexos possam se traduzir em desafios técnicos difíceis, eles também servem como oportunidades para os programadores aprimorarem suas habilidades de resolução de problemas. Isso é parte integrante do que mantém a programação interessante, pelo menos para mim.  As complexidades que enfrentamos na programação geralmente refletem a complexidade dos designs com os quais estamos trabalhando. Nosso design Figma, apresentando um mostrador radial com um gradiente linear, serve como um ótimo exemplo de como um elemento de design visualmente atraente pode apresentar desafios técnicos significativos.  É fácil para os programadores tentar instintivamente trabalhar com designers para chegar a um acordo em termos de especificações de design. Na verdade, essa costuma ser a abordagem correta. Mas, às vezes, se você quiser que seus designs se destaquem da multidão, precisará ultrapassar sua zona de conforto e criar maneiras criativas de resolver seus problemas.  Outra maneira de colocar isso é que, embora as complexidades do design possam se traduzir em desafios técnicos, elas também servem como oportunidades para os programadores aprimorarem sua habilidade mais valiosa, sua capacidade de resolver problemas.    Publicado também   . aqui

The writer was physically present in relevant location(s) to this story. The location is also a prevalent aspect of this story be it news or otherwise.

This story contains new, firsthand information uncovered by the writer.

View our award-winning work and job openings

Take a peek at our other articles (and job openings) right here!

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Make resilience your competitive advantage

Resolvendo um desafio de programação curva com gradientes SVG

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Modelo Bitcoin UTXO, alimentando um ecossistema único

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Uma breve introdução à teoria do cérebro de Boltzmann

Telegram: a ponte da Crypto Island para o continente

Modelo Bitcoin UTXO, alimentando um ecossistema único

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Uma breve introdução à teoria do cérebro de Boltzmann

Telegram: a ponte da Crypto Island para o continente

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps