ionic6

Ionic 2 – Animierter Splashscreen

Hey! Ich habe einen animierten Splashscreen für Ionic 2 gebastelt. Das Logo bewegt sich, der Hintergrund ändert die Farbe und die Tab-Bar fährt am Ende ins Bild! Ich erkläre heute kurz wie das geht und wo einige Tücken liegen.

pfeildings

Das Ergebnis

ionic2_splash_animation

github-logo

pfeildings

Tutorial

Es gibt ja dieses tolle Cordova Splashscreen Plugin. Doch das einzige was man damit animieren kann ist ein Fade. Somit müssen wir dieses Plugin zuerst einmal abschalten.

Füge diese zwei Zeilen in die config.xml ein:

Jetzt bauen wir einen eigenen Splashscreen mit Hilfe von HTML und CSS. Dazu kommt dieser Schnipsel auf die erste Seite, hier die home.html.

Jetzt zeigen wir den Splashscreen an, sobald die Home Seite geladen ist. Die Tab-Bar überlappt leider diesen Splashscreen, weshalb du, wenn du keine Tab-Bar benutzt, im nächsten Teil alle Zeilen hierfür ignorieren kannst. Hier ist die Home Klasse in der home.ts:

Nun wird nach 5 Sekunden, nach dem Laden der Home Seite der Splashscreen auf display:none; gesetzt. Übrigens sind 5 Sekunden extrem lang für einen Splashscreen, wenn es nicht wirklich nötig ist. Doch hier zu Vorführungszwecken ist das in Ordnung.

Jetzt fehlt nur noch etwas CSS mit Animationen. Der erste Teil dient zur Anzeige und Zentrierung des Splashscreens. Hier sind auch schon die Verweise auf die Animationen drin

Direkt drunter folgen eine Reihe von Animationen. Die bg-Animation ist von mir, die anderen habe ich von magic.css

Fertig!

pfeildings

Das Coole an dieser Methode ist, dass der Splashscreen jetzt auch im Browser zu sehen ist. Drückt man F5 taucht dieser nicht noch einmal auf, dazu muss man Strg+F5 drücken. Allerdings fühlt es sich irgendwie falsch an, nicht das dafür zuständige Plugin zu benutzen. Sobald dieses also Animationen unterstützt, sollte man auf dieses wechseln. Also gut, dann bau mal los und lass mich wissen, wie dein Splashscreen geworden ist. Bis zum nächsten Mal!

*erforscht Mond*