{"id":644,"date":"2024-05-20T14:44:34","date_gmt":"2024-05-20T17:44:34","guid":{"rendered":"https:\/\/adrianosantostreina.com.br\/blog\/?p=644"},"modified":"2024-05-27T09:06:36","modified_gmt":"2024-05-27T12:06:36","slug":"enriquecendo-aplicativos-com-svgs-e-animacoes-json-usando-skia4d","status":"publish","type":"post","link":"https:\/\/adrianosantostreina.com.br\/blog\/enriquecendo-aplicativos-com-svgs-e-animacoes-json-usando-skia4d\/","title":{"rendered":"Enriquecendo aplicativos com SVGs e anima\u00e7\u00f5es JSON usando Skia4D"},"content":{"rendered":"\n<p>Na era digital, a capacidade de apresentar informa\u00e7\u00f5es visualmente atraentes e din\u00e2micas \u00e9 mais crucial do que nunca. Para os desenvolvedores que utilizam Delphi, integrar gr\u00e1ficos vetoriais escal\u00e1veis e anima\u00e7\u00f5es interativas pode transformar aplica\u00e7\u00f5es simples em experi\u00eancias ricas e imersivas. Utilizando os formatos SVG e JSON, que oferecem flexibilidade e alta qualidade visual, o Skia4Delphi emerge como uma ferramenta indispens\u00e1vel nesse contexto.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>O Skia4Delphi, uma biblioteca gr\u00e1fica poderosa, disponibiliza componentes como o SkSvg e o SkAnimatedImage, que simplificam a inclus\u00e3o e manipula\u00e7\u00e3o desses formatos em projetos Delphi. Com o SkSvg, desenvolvedores podem incorporar e manipular gr\u00e1ficos vetoriais com precis\u00e3o, enquanto o SkAnimatedImage permite animar de forma eficaz conte\u00fados complexos definidos em JSON. Este artigo explora como esses componentes podem ser utilizados para enriquecer suas aplica\u00e7\u00f5es, garantindo que elas n\u00e3o s\u00f3 funcionem bem, mas tamb\u00e9m se destaquem visualmente no mercado competitivo de hoje.<\/p>\n\n\n\n<p class=\"has-large-font-size\"><strong>Por que usar arquivos SVG em aplicativos?<\/strong><\/p>\n\n\n\n<p>Os arquivos SVG (Scalable Vector Graphics) s\u00e3o cada vez mais populares no desenvolvimento de aplicativos devido \u00e0 sua flexibilidade e efici\u00eancia em termos de performance e est\u00e9tica. Vamos explorar algumas raz\u00f5es pelas quais os arquivos SVG s\u00e3o uma escolha excelente para integrar gr\u00e1ficos em aplicativos:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. <strong>Escalabilidade sem perda de qualidade<\/strong><\/h4>\n\n\n\n<p>Uma das maiores vantagens dos SVGs \u00e9 que eles s\u00e3o baseados em vetores, o que significa que podem ser dimensionados para qualquer tamanho sem perder qualidade. Isso \u00e9 crucial para aplicativos que precisam funcionar em uma variedade de dispositivos com diferentes resolu\u00e7\u00f5es de tela. Usar SVG garante que os gr\u00e1ficos permane\u00e7am n\u00edtidos e claros, independentemente das dimens\u00f5es da tela.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. <strong>Desempenho Otimizado<\/strong><\/h4>\n\n\n\n<p>SVGs s\u00e3o frequentemente menores em tamanho de arquivo comparados a imagens bitmap equivalentes, como PNGs ou JPEGs. Isso resulta em carregamento mais r\u00e1pido dos aplicativos e menor consumo de dados, o que \u00e9 especialmente importante para usu\u00e1rios em conex\u00f5es de internet limitadas ou lentas.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3. <strong>Facilidade de Manipula\u00e7\u00e3o<\/strong><\/h4>\n\n\n\n<p>Como os SVGs s\u00e3o essencialmente c\u00f3digo XML, eles podem ser facilmente manipulados com CSS ou JavaScript. Isso permite aos desenvolvedores ajustar cores, tamanhos, efeitos ou at\u00e9 animar elementos gr\u00e1ficos sem a necessidade de m\u00faltiplas imagens. A manipula\u00e7\u00e3o direta de SVGs pode reduzir drasticamente o tempo de desenvolvimento e o esfor\u00e7o necess\u00e1rio para criar e manter gr\u00e1ficos interativos.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">4. <strong>Acessibilidade e SEO<\/strong><\/h4>\n\n\n\n<p>Os elementos de um SVG s\u00e3o acess\u00edveis atrav\u00e9s do DOM (Document Object Model), o que significa que eles podem ser indexados por motores de busca e acess\u00edveis por tecnologias assistivas. Isso melhora a SEO e a acessibilidade do aplicativo, tornando o conte\u00fado gr\u00e1fico leg\u00edvel e interpret\u00e1vel por leitores de tela.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">5. <strong>Compatibilidade e Flexibilidade<\/strong><\/h4>\n\n\n\n<p>SVG suporta transpar\u00eancias e gradientes complexos, o que pode ser dif\u00edcil de reproduzir com precis\u00e3o em formatos de imagem bitmap. Al\u00e9m disso, a compatibilidade do SVG com todos os navegadores modernos e muitas ferramentas de desenvolvimento m\u00f3vel garante que ele pode ser usado em quase qualquer plataforma ou dispositivo sem preocupa\u00e7\u00f5es com incompatibilidade.<\/p>\n\n\n\n<p class=\"has-large-font-size\"><strong>Carregamento de arquivos SVG em SkSVG<\/strong><\/p>\n\n\n\n<p>O componente SkSvg \u00e9 uma ferramenta poderosa no Skia4Delphi que permite aos desenvolvedores incorporar facilmente gr\u00e1ficos vetoriais em suas aplica\u00e7\u00f5es. O SVG, sendo um formato baseado em XML para descrever gr\u00e1ficos bidimensionais, \u00e9 ideal para \u00edcones, ilustra\u00e7\u00f5es e layouts complexos que precisam escalar sem perda de qualidade.<\/p>\n\n\n\n<p>Podemos usar os SVGs em bot\u00f5es, splash e qualquer outro lugar que sua imagina\u00e7\u00e3o alcan\u00e7ar. Existem algumas maneiras de fazer a carga do arquivo SVG. <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Podemos incorporar o arquivo usando o menu Project &gt; Deployment e adicionar os arquivos colocando como <strong>&#8220;Remote Path&#8221;<\/strong> <code>.\\assets\\internal\\<\/code>.<\/li>\n\n\n\n<li>E tamb\u00e9m incluindo o arquivo dentro do recursos do <strong>Delphi em Project &gt; Resources and Images<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p>Veja abaixo como podemos fazer a carga dos arquivos usando o mecanismo do Deployment.<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:delphi decode:true \">[...]\nuses\n  System.IOUtils;\n[...]\n\/\/ Exemplo de c\u00f3digo para carregar um arquivo SVG\nbegin  \n  MeuComponenteSvg.LoadFromFile(TPath.Combine(TPath.GetDocumentsPath, 'arquivo.svg'));\nend;\n<\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/adrianosantos.link\/treinamentos\" target=\"_blank\" rel=\"noreferrer noopener\"><img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"150\" src=\"https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/02\/Banner-Hotmart-1.png\" alt=\"\" class=\"wp-image-222\" srcset=\"https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/02\/Banner-Hotmart-1.png 800w, https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/02\/Banner-Hotmart-1-300x56.png 300w, https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/02\/Banner-Hotmart-1-768x144.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/figure>\n\n\n\n<p>Aqui estou considerando que voc\u00ea j\u00e1 possui um componente SkSvg em tela. Basta ent\u00e3o chamar <strong>LoadFromFile <\/strong>indicando o local correto do arquivo.<\/p>\n\n\n\n<p>Entretanto, gosto de fazer de uma forma diferente. Prefiro usar os Resources do Delphi. Desse modo os arquivos tamb\u00e9m s\u00e3o incorporados ao .APK final, mas ficam mais organizados. O que muda \u00e9 a forma de codificarmos para carregar os arquivos. Vamos ver como isso funciona.<\/p>\n\n\n\n<p>A primeira provid\u00eancia \u00e9 importar as imagens para o arquivo de recursos do Delphi, proceda da seguinte forma. Acesse o menu <strong>Project &gt; Resources and Images<\/strong> e clique em Add, escolha os arquivos .svg e confirme. Cada arquivo precisa ter um apelido, um identificador.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"643\" height=\"359\" src=\"https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/05\/image-18.png\" alt=\"\" class=\"wp-image-646\" srcset=\"https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/05\/image-18.png 643w, https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/05\/image-18-300x167.png 300w\" sizes=\"(max-width: 643px) 100vw, 643px\" \/><\/figure><\/div>\n\n\n<p>Nesse exemplo usei o prefixo <strong>svg_<\/strong> para cada arquivo svg importado. O tipo de recurso \u00e9 o RCDATA mesmo.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Existem milhares de sites que possuem arquivos .svg para download, um dos que mais gosto de utilizar \u00e9 o Material Design Icons que recentemente foi migrado para <strong><a href=\"https:\/\/pictogrammers.com\/library\/mdi\/\" target=\"_blank\" rel=\"noreferrer noopener\">pictogramas.com<\/a><\/strong>. Basta acessar o site, procurar uma imagem e ent\u00e3o clicar sobre o \u00edcone. Em seguida clique no bot\u00e3o roxo \u00e0 direita superior, na seta para baixo mais precisamente. No menu escolha <strong>Download SVG<\/strong>. Siga a imagem abaixo.<\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"614\" src=\"https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/05\/image-19-1024x614.png\" alt=\"\" class=\"wp-image-647\" srcset=\"https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/05\/image-19-1024x614.png 1024w, https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/05\/image-19-300x180.png 300w, https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/05\/image-19-768x460.png 768w, https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/05\/image-19-240x145.png 240w, https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/05\/image-19.png 1226w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Uma vez que importou arquivos para o Delphi, agora basta criar uma fun\u00e7\u00e3o que consiga carregar a imagem no componente SkSVG. Criei uma pequena classe singleton que faz isso, veja o c\u00f3digo abaixo:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:delphi decode:true \">unit Imagens.Infra.Geral.Functions;\n\ninterface\n\nuses\n  System.Classes,\n  System.StrUtils,\n  System.Skia,\n  System.SysUtils,\n  System.IOUtils,\n\n  FMX.Types,\n  FMX.Skia,\n  FMX.Objects\n  {$IFDEF ANDROID}\n  ,Androidapi.Helpers\n  ,Androidapi.JNI.GraphicsContentViewText\n  ,Androidapi.JNI.Os\n  ,Androidapi.JNI.JavaTypes\n  {$ENDIF}\n  ;\n\ntype\n  TLib = class\n  private\n\n  public\n    class function LoadIconFromResource(const ResName: string; var AObject: TSkSvg): Boolean; overload;\n    class function LoadIconFromResource(const ResName: string; var AObject: TSkAnimatedImage): Boolean; overload;\n  end;\n\nimplementation\n\nuses\n  System.Types;\n\n{ TLib }\n\nclass function TLib.LoadIconFromResource(const ResName: string; var AObject: TSkSvg): Boolean;\nvar\n  ResStream: TResourceStream;\n  SvgContent: TStringStream;\nbegin\n  Result := False;\n  try\n    ResStream := TResourceStream.Create(HInstance, { 'SeuProjeto.' + } ResName, RT_RCDATA);\n    try\n      SvgContent := TStringStream.Create;\n      SvgContent.CopyFrom(ResStream, 0);\n\n      AObject.Svg.Source := SvgContent.DataString;\n\n      Result := True;\n    finally\n      ResStream.Free;\n      SvgContent.Free;\n    end;\n  except\n    on E: Exception do\n      \/\/ incluir valida\u00e7\u00f5es\n  end;\nend;\n\nclass function TLib.LoadIconFromResource(const ResName: string; var AObject: TSkAnimatedImage): Boolean;\nvar\n  ResStream: TResourceStream;\n  MemStream: TMemoryStream;\nbegin\n  Result := False;\n  try\n    ResStream := TResourceStream.Create(HInstance, ResName, RT_RCDATA);\n    try\n      MemStream := TMemoryStream.Create;\n      try\n        MemStream.CopyFrom(ResStream, 0);\n        MemStream.Position := 0;  \/\/ Certifique-se de redefinir a posi\u00e7\u00e3o do stream antes de ler\n\n        AObject.LoadFromStream(MemStream);\n\n        Result := True;\n      finally\n        MemStream.Free;\n      end;\n    finally\n      ResStream.Free;\n    end;\n  except\n    on E: Exception do\n    begin\n      raise;  \/\/ Re-lan\u00e7ar exce\u00e7\u00e3o ap\u00f3s logar para manter o comportamento de erro vis\u00edvel.\n    end;\n  end;\nend;\n\n\nend.<\/pre><\/div>\n\n\n\n<p>Note que temos dois m\u00e9todos com sobrecarga. Um deles carrega um arquivo SVG para um controle SkSvg e o outro para um SkAnimatedImage, esse segundo vamos ver mais adiante. Vamos entender o primeiro m\u00e9todo:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:delphi decode:true \">class function TLib.LoadIconFromResource(const ResName: string; var AObject: TSkSvg): Boolean;\nvar\n  ResStream: TResourceStream;\n  SvgContent: TStringStream;\nbegin\n  Result := False;\n  try\n    ResStream := TResourceStream.Create(HInstance, { 'SeuProjeto.' + } ResName, RT_RCDATA);\n    try\n      SvgContent := TStringStream.Create;\n      SvgContent.CopyFrom(ResStream, 0);\n\n      AObject.Svg.Source := SvgContent.DataString;\n\n      Result := True;\n    finally\n      ResStream.Free;\n      SvgContent.Free;\n    end;\n  except\n    on E: Exception do\n      \/\/ incluir valida\u00e7\u00f5es\n  end;\nend;\n<\/pre><\/div>\n\n\n\n<p>Os par\u00e2metros dele s\u00e3 o nome do recurso, aquele apelido que colocamos anteriormente, o o segundo \u00e9 o componente que receber\u00e1 a imagem SVG. Come\u00e7amos carregando o SVG em mem\u00f3ria usando a vari\u00e1vel <code>ResStream<\/code> e em seguida carregamos a imagem no componente usando o m\u00e9todo <code>Source <\/code>da propriedade <code>Svg<\/code>, passando pra ele os bytes da imagem selecionada. Pronto, isso \u00e9 suficiente para a imagem ser mostrada no componente.<\/p>\n\n\n\n<p>Voc\u00ea pode inclusive colocar um componente TSkSvg dentro de um TButton para adicionar um \u00edcone a bot\u00f5es no Android e iOS. Bem legal essa parte. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"430\" height=\"116\" src=\"https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/05\/image-21.png\" alt=\"\" class=\"wp-image-652\" srcset=\"https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/05\/image-21.png 430w, https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/05\/image-21-300x81.png 300w\" sizes=\"(max-width: 430px) 100vw, 430px\" \/><\/figure><\/div>\n\n\n<p>Para carregar os svgs que est\u00e3o nos recursos, basta usar:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:delphi decode:true \">TLib.LoadIconFromResource('svg_back', SkBack);<\/pre><\/div>\n\n\n\n<p>Onde, <code>svg_back<\/code> \u00e9 o apelido do recurso e <code>SkBack <\/code>\u00e9 o nome do componente. O resultado ficar\u00e1 muito semelhante ao mostrando anteriormente.<\/p>\n\n\n\n<p>No exemplo acima, os dois bot\u00f5es que voc\u00ea pode visualizar s\u00e3o TButtons (com Style modificado) que possuem sobre eles um componente TSkSvg. Eles ficam leves e podemos instalar o app em qualquer resolu\u00e7\u00e3o de aparelho que n\u00e3o perder\u00e3o a nitidez.<\/p>\n\n\n\n<p class=\"has-large-font-size\"><strong>Anima\u00e7\u00f5es (ou imagens est\u00e1ticas) usando arquivos Looties<\/strong><\/p>\n\n\n\n<p>Lottie \u00e9 uma biblioteca de anima\u00e7\u00e3o de c\u00f3digo aberto desenvolvida pela Airbnb que permite aos desenvolvedores adicionar anima\u00e7\u00f5es complexas e de alta qualidade em suas aplica\u00e7\u00f5es de forma eficiente. Lottie trabalha com arquivos .JSON que representam anima\u00e7\u00f5es vetoriais criadas em ferramentas de design como <strong>Adobe After Effects.<\/strong><\/p>\n\n\n\n<p>Existem milhares de sites que possuem lotties pra download.<\/p>\n\n\n\n<p><strong>Vantagens do Uso de Lottie para Anima\u00e7\u00f5es .JSON:<\/strong><\/p>\n\n\n\n<p><strong>Qualidade e Flexibilidade<\/strong>: As anima\u00e7\u00f5es s\u00e3o renderizadas em tempo real, permitindo que sejam escaladas sem perda de qualidade para qualquer tamanho de tela. Isso \u00e9 ideal para uma variedade de resolu\u00e7\u00f5es de dispositivos m\u00f3veis e web.<\/p>\n\n\n\n<p><strong>Desempenho Leve: <\/strong>Lottie anima\u00e7\u00f5es s\u00e3o extremamente leves em compara\u00e7\u00e3o com v\u00eddeos ou GIFs tradicionais, o que ajuda a manter o desempenho do aplicativo otimizado e a experi\u00eancia do usu\u00e1rio fluida.<\/p>\n\n\n\n<p><strong>Facilidade de Uso: <\/strong>Designers podem criar anima\u00e7\u00f5es complexas usando Adobe After Effects e export\u00e1-las como arquivos .JSON usando o plugin Bodymovin. Desenvolvedores podem ent\u00e3o implementar essas anima\u00e7\u00f5es facilmente em suas aplica\u00e7\u00f5es sem a necessidade de recri\u00e1-las manualmente.<\/p>\n\n\n\n<p><strong>Interatividade: <\/strong>Lottie tamb\u00e9m suporta intera\u00e7\u00f5es do usu\u00e1rio com as anima\u00e7\u00f5es, como pausar, reproduzir, ou alterar a velocidade da anima\u00e7\u00e3o dinamicamente com o c\u00f3digo, tornando as anima\u00e7\u00f5es mais interativas e envolventes.<\/p>\n\n\n\n<p><strong>Ampla Compatibilidade: <\/strong>Com suporte para Android, iOS, React Native, e web, Lottie \u00e9 incrivelmente vers\u00e1til e pode ser usado em uma vasta gama de plataformas, facilitando o desenvolvimento cross-platform.<\/p>\n\n\n\n<p><strong>Integrando Lottie com Skia4Delphi:<\/strong><\/p>\n\n\n\n<p>Ao usar Skia4Delphi, especialmente com componentes como <strong>SkAnimatedImage<\/strong>, os desenvolvedores podem tirar proveito das anima\u00e7\u00f5es Lottie para melhorar visualmente suas aplica\u00e7\u00f5es Delphi. A integra\u00e7\u00e3o geralmente envolve carregar o arquivo .JSON da anima\u00e7\u00e3o e manipul\u00e1-lo conforme necess\u00e1rio para se adequar ao fluxo de trabalho e \u00e0s exig\u00eancias espec\u00edficas do aplicativo. <\/p>\n\n\n\n<p>Use o site <a href=\"https:\/\/lottiefiles.com\/animations\">https:\/\/lottiefiles.com\/animations<\/a> que possuie v\u00e1rias anima\u00e7\u00f5es se preferir. Para esse exemplo usei a anima\u00e7\u00e3o abaixo:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"240\" height=\"236\" src=\"https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/05\/image-22.png\" alt=\"\" class=\"wp-image-653\"\/><\/figure><\/div>\n\n\n<p>Basta clicar sobre a anima\u00e7\u00e3o, em seguida no bot\u00e3o Download e baixar o arquivo JSON. Como abaixo. Nem todas as imagens est\u00e3o dispon\u00edveis o arquivo JSON no plano Free, portanto precisar\u00e1 escolher outra anima\u00e7\u00e3o caso n\u00e3o consiga baixar o JSON.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"383\" height=\"188\" src=\"https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/05\/image-23.png\" alt=\"\" class=\"wp-image-654\" srcset=\"https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/05\/image-23.png 383w, https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/05\/image-23-300x147.png 300w\" sizes=\"(max-width: 383px) 100vw, 383px\" \/><\/figure><\/div>\n\n\n<p class=\"has-large-font-size\"><strong>Carregando o .JSON da anima\u00e7\u00e3o<\/strong><\/p>\n\n\n\n<p>Carregar o JSON da anima\u00e7\u00e3o \u00e9 muito simples. Tamb\u00e9m podemos carregar atrav\u00e9s do arquios, caso prefira colocar ele dentro do Deployment ou podemos carregar o arquivo para dentro dos recursos do Delphi e em seguida chamar aquele segundo m\u00e9todo na nossa classe. Por isso, entre movamente em Project &gt; Resources and Images, carregue o arquivo lotties .JSON que baixou e d\u00ea o nome de load para ele.<\/p>\n\n\n\n<p>Em seguida basta chamar:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:delphi decode:true \">TLib.LoadIconFromResource('load', SkAnimatedImage1);<\/pre><\/div>\n\n\n\n<p>Onde <code>load<\/code> \u00e9 o nome do recurso e <code>SkAnimatedImage1 <\/code>\u00e9 o nome do componente do Skia. O v\u00eddeo abaixo demonstra como o arquivo \u00e9 exibido no aplicativo. <\/p>\n\n\n\n<p><em>Obs. Reduzimos a resolu\u00e7\u00e3o do v\u00eddeo para n\u00e3o causar lentid\u00e3o no carregamento do arquivo.  Fa\u00e7a o teste em seu celular\/tablet e ver\u00e1 que a resolu\u00e7\u00e3o e nitidez \u00e9 alta.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/adrianosantostreina.com.br\/blog\/wp-content\/uploads\/2024\/05\/Animacao.webm\"><\/video><\/figure>\n\n\n\n<p>Uma outra forma de fazer isso seria usando a pr\u00f3pria interface do Skia e criando o arquivo em runtime:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:delphi decode:true \" >\/\/ Exemplo de c\u00f3digo para carregar uma anima\u00e7\u00e3o JSON\nvar\n  Animation: ISkAnimatedImage;\nbegin\n  Animation := TSkAnimatedImage.Create;\n  Animation.LoadFromFile('caminho_para_seu_arquivo.json');\n  Animation.Start;\n  Canvas.DrawImage(Animation, 0, 0);\nend;\n<\/pre><\/div>\n\n\n\n<p class=\"has-large-font-size\"><strong>Conclus\u00e3o<\/strong><\/p>\n\n\n\n<p>A integra\u00e7\u00e3o de gr\u00e1ficos SVG e anima\u00e7\u00f5es Lottie em aplica\u00e7\u00f5es Delphi usando Skia4Delphi representa uma evolu\u00e7\u00e3o significativa na maneira como os desenvolvedores podem enriquecer suas interfaces de usu\u00e1rio. Com os arquivos SVG, os desenvolvedores ganham a flexibilidade de criar gr\u00e1ficos que s\u00e3o escal\u00e1veis e de alta qualidade, mantendo o desempenho otimizado em diferentes dispositivos e resolu\u00e7\u00f5es. Simultaneamente, as anima\u00e7\u00f5es Lottie oferecem uma solu\u00e7\u00e3o leve e altamente interativa, permitindo a incorpora\u00e7\u00e3o de anima\u00e7\u00f5es vetoriais complexas que podem ser facilmente manipuladas e controladas programaticamente.<\/p>\n\n\n\n<p>Essas tecnologias n\u00e3o apenas aumentam a est\u00e9tica e a din\u00e2mica das aplica\u00e7\u00f5es, mas tamb\u00e9m melhoram a experi\u00eancia do usu\u00e1rio, tornando as intera\u00e7\u00f5es mais fluidas e envolventes. Ao adotar SVGs e Lottie com o Skia4Delphi, os desenvolvedores t\u00eam em m\u00e3os ferramentas poderosas que abrem novas possibilidades criativas e t\u00e9cnicas, permitindo-lhes construir aplica\u00e7\u00f5es que n\u00e3o s\u00f3 funcionam eficientemente, mas tamb\u00e9m se destacam visualmente.<\/p>\n\n\n\n<p>Encorajamos os desenvolvedores a explorar esses recursos e considerar como eles podem ser integrados em seus projetos futuros para aproveitar ao m\u00e1ximo as capacidades do Skia4Delphi, elevando o padr\u00e3o de desenvolvimento de software e criando aplica\u00e7\u00f5es verdadeiramente modernas e atraentes.<\/p>\n\n\n\n<p>Comunidade no <a href=\"https:\/\/t.me\/AdrianoSantosCommunity\">Telegram<\/a><\/p>\n\n\n\n<p>\ud83d\ude80Comente no campo abaixo \ud83d\udc47\ud83d\udc47\ud83d\udc47 o que achou e qual sua d\u00favida.<\/p>\n\n\n\n<p>Te vejo na pr\u00f3xima<\/p>\n\n\n\n<p>Adriano Santos<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Na era digital, a capacidade de apresentar informa\u00e7\u00f5es visualmente atraentes e din\u00e2micas \u00e9 mais crucial do que nunca. Para os desenvolvedores que utilizam Delphi, integrar gr\u00e1ficos vetoriais escal\u00e1veis e anima\u00e7\u00f5es interativas pode transformar aplica\u00e7\u00f5es simples em experi\u00eancias ricas e imersivas. Utilizando os formatos SVG e JSON, que oferecem flexibilidade e alta qualidade visual, o Skia4Delphi [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":658,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-644","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/adrianosantostreina.com.br\/blog\/wp-json\/wp\/v2\/posts\/644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adrianosantostreina.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/adrianosantostreina.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/adrianosantostreina.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adrianosantostreina.com.br\/blog\/wp-json\/wp\/v2\/comments?post=644"}],"version-history":[{"count":7,"href":"https:\/\/adrianosantostreina.com.br\/blog\/wp-json\/wp\/v2\/posts\/644\/revisions"}],"predecessor-version":[{"id":660,"href":"https:\/\/adrianosantostreina.com.br\/blog\/wp-json\/wp\/v2\/posts\/644\/revisions\/660"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/adrianosantostreina.com.br\/blog\/wp-json\/wp\/v2\/media\/658"}],"wp:attachment":[{"href":"https:\/\/adrianosantostreina.com.br\/blog\/wp-json\/wp\/v2\/media?parent=644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/adrianosantostreina.com.br\/blog\/wp-json\/wp\/v2\/categories?post=644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/adrianosantostreina.com.br\/blog\/wp-json\/wp\/v2\/tags?post=644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}