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

You might also like

Mobile 3 Comments

Curso gratuito de Android em português

Share this on WhatsAppeXcript disponibiliza curso gratuito de Android em português Hoje temos uma ótima notícia para vocês, através de uma grande parceria com eXcript, iremos poder disponibilizar vídeo aulas

Mobile 0 Comments

Criando estiloso SearchBar com ViewChild

Share this on WhatsAppOlá pessoal, tudo tranquilo? Bom, hoje mostrarei como adicionar um Search Bar em sua aplicação, mas não é qualquer Search Bar, vamos fazer ela aparecer e desaparecer ao

Mobile 0 Comments

Curso Ionic em português – Aula 12 – Animando nosso aplicativo

Share this on WhatsAppDeixe seu aplicativo mais interativo através de animações Pessoal, continuando com nossa série de vídeo aulas, hoje iremos utilizar uma técnica que irá deixar nosso aplicativo mais

9 Comments

  1. Rafael Silva
    janeiro 19, 09:20 Reply
    hahaha tuto animal. realmente só deu pau no plugin code do WP aqui.
  2. Lourenço
    abril 17, 14:10 Reply
    Tem como adicionar o splash com o projeto criando como blank ?
  3. raphael schettino
    maio 04, 00:15 Reply
    Pessoal, fiz tudo certinho só que antes da tela de splash aparece uma tela branca. o meu config.xml está assim preference name="SplashMaintainAspectRatio" value="true" />
  4. Joe
    maio 11, 12:42 Reply
    Utilizo o Ionic3 posso seguir que funciona ou tenho que fazer ajustes.
  5. Deyvson
    junho 27, 02:39 Reply
    Preciso validar pra rodar apenas 1 vez, e sumir... como poderia ser feito? Deu certo minha animação...
    • Junior Abranches
      julho 03, 09:22 Reply
      Olá.. Pode criar uma validação utilizando o Storage para isso. Se estiver vazio, faz a animação e seta o Storage. Com a verificação, o storage não estará mais vazio e então não mostrará a animação.

Leave a Reply