Criando uma  Splash Screen animada no Ionic 2/3 com HTML e CSS3

Criando uma Splash Screen animada no Ionic 2/3 com HTML e CSS3

Salve Coders do amor, kkk, brincadeiras a parte sabemos o quanto um App grande pode acabar com a experiência em termos de performance e download nas stores principalmente se o usuário não tiver espeço no celular, conexões lentas.

Por isso hoje vamos construir uma aplicação básica aonde ensino a substituir o splash nativo por um feito via código HTML + CSS3, ai você vai me perguntar mais porque fazer isso.

Quando geramos o splash sceren via Ionic Recources ele cria varias imagens e dependendo da imagem que você o tamanho final do App pode crescer consideravelmente, aw, here it goes.

Iniciando o projeto.

Para começarmos vamos das nosso famoso start no projeto.

e logo depois vamos navegar para a pasta que o projeto foi criado e executar o server.

Depois do ionic server -l o  projeto será executado e emulado no seu browser de preferencia como na imagem a abaixo e se o seu navegador preferido for o  Internet Explorer repense a sua vida.

O HTML

Navegue até a página padrão que é carregada quando o aplicativo é iniciado. No nosso caso, isso está localizado em: /src/pages/home.html

No topo de home.html  logo acima <ion-header>  colar em:


 

#custom-overlay  div irá cobrir toda a tela. Estamos usando o estilo vinculado  definido para uma  propriedade de exibição CSS . Se a  propriedade splash for verdadeira, ela irá configurá-la para flex , se não, ela será definida como nenhuma  .

A  classe .flb e tudo dentro dela é opcional.

O CSS

Dentro do  arquivo home.scss , cole:


O ingrediente chave aqui é #custom-overlay. O conjunto de regras CSS associado faz com que cubra a página atual. Qualquer outra coisa dentro de você depende de você e das necessidades da sua página inicial.

O resto dos conjuntos de regras CSS simplesmente centram e alinham verticalmente um logotipo SVG.

A animação

Se você quiser aplicar animações CSS, como o desbotamento na nossa  classe .flb , adicione à parte inferior do CSS que acabamos de colar:


Você também pode criar animações mais complexas e não programar nadinha como o site Bounce.js e só depois exportar o css.

Mão na massa.

O código a seguir variará ligeiramente se você estiver usando um layout Ionic 2 baseado em tabulação. Tomarei notas do que você precisa ou não precisa com base em se você está ou não usando um layout de tabulação.

Abra o  arquivo home.ts e cole o seguinte se você não estiver  usando tabs :


Se você estiver usando tabs  como no caso deste tutorial, abra home.ts  e cole o seguinte:


Há um pouco de trabalho extra necessário se você estiver usando tabs, porque a página de abertura não cobrirá a barra de abas inferior. O código acima esconde a barra de tabulação após o carregamento do aplicativo e, em seguida, mostra-o dentro da  função setTimeout () .

O mesmo está acontecendo em ambos os cenários com a sobreposição de splash. A  propriedade splash é definida como verdadeira por padrão e, em 4 segundos ( 4000 ms ), está configurada como falsa.

Removendo a Tela Splash Padrão.

O Ionic-CLI permite uma tela inicial do splash que é carregada quando um aplicativo é iniciado. Nós não precisamos disso mais.

Então, abra /config.xml  e cole as seguintes preferências:

Calma já esta acabando.

Você precisará acessar o tempo de  espera setTimeout adequadamente com base na animação que está ocorrendo em seu CSS. Agora, você não precisa necessariamente  animar sua página de splash. Você poderia fazer qualquer número de coisas, agora que você tem a possibilidade de utilizar HTML e CSS para sua página splash iónica.

Você pode até incorporar um vídeo em tela cheia, se desejar!

Aqui está o código fonte do projeto no meu github.

Espero que tenham curtido este artigo e até o próximo Coders.

Previous [IONIC] – Custom Loader
Next [IONIC] – Animações com Lottie Files (ng-lottie)

About author

Rafael Tejeda
Rafael Tejeda 2 posts

Gamer, Corinthiano, Nerd, Casado, Programador, Grande, Sonhador

You might also like

Mobile 0 Comments

Aplicativos e Desenvolvimento Mobile Híbrido X Nativo

Share this on WhatsAppOlá Pessoal, tudo bem com vocês? Nesse artigo , busco apresentar que são as apps híbridas, quais as vantagens e desvantagens que elas possuem em relação as

Validando dados com a classe ArgumentValidator no C#

Share this on WhatsAppConheça a classe ArgumentsValidator E ai pessoal beleza? Hoje gostaria de compartilhar com vocês uma classe que eu criei que nos auxilia na validação de dados. Há

Mobile 1Comments

Universal Apps – Compartilhando código entre o Windows e Windows Phone

Share this on WhatsAppAprenda compartilhar o código de sua aplicação na Universal Apps Ao iniciarmos o desenvolvimento de um novo aplicativo usando a estrutura do Universal Apps, percebemos que em

3 Comments

  1. Rafael Silva
    janeiro 19, 09:20 Reply
    hahaha tuto animal. realmente só deu pau no plugin code do WP aqui.

Leave a Reply