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.
Das Ergebnis
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:
<preference name="SplashScreenDelay" value="0"/> <preference name="ShowSplashScreen" value="false"/>
Jetzt bauen wir einen eigenen Splashscreen mit Hilfe von HTML und CSS. Dazu kommt dieser Schnipsel auf die erste Seite, hier die home.html.
<!--solange splash true ist, wird der splashscreen angezeigt-->
<div id="splash-overlay" [style.display]="splash ? 'flex': 'none'">
<div class="splash">
<div class="logo">
<img src="assets/logo.png">
</div>
</div>
</div>
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:
export class HomePage {
//Die zwei nötigen Variablen
tabBarElement: any;
splash = true;
constructor(public navCtrl: NavController) {
//Referenz auf die Tab-Bar machen
this.tabBarElement = document.querySelector('.tabbar');
}
ionViewDidLoad() {
//Wenn die Home Seite geladen ist, die Tab-Bar reinfahren, mit 4 Sekunden Verzögerung
this.tabBarElement.style.transition = 'bottom 0.4s 4s';
this.tabBarElement.style.bottom = '-65px';
//Nach 5 Sekunden den Splashscreen ausschalten (5 Sekunden ist seeehr lang)
setTimeout(() => {
this.splash = false;
}, 5000);
}
}
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
#splash-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100000;
width: 100%;
background-color: white;
animation: fadeOutAtEnd 5s;
}
.splash {
height: 100%;
width: 100%;
animation: bg 4s;
display: flex;
align-items: center;
justify-content: center;
}
.logo {
animation: swashIn 1s, holeOut 2s 3s;
padding: 5px;
width: 25%;
height: auto;
margin: 10px;
line-height: 20px;
text-align: center;
}
Direkt drunter folgen eine Reihe von Animationen. Die bg-Animation ist von mir, die anderen habe ich von magic.css.
.bg {
animation-name: bg;
}
@keyframes bg {
0% {
opacity: 0;
background: white;
}
50%,80% {
opacity: 1;
background: #4F8EF7;
}
100% {
opacity: 1;
background: white;
}
}
.fadeOutAtEnd {
animation-name: bg;
}
@keyframes fadeOutAtEnd {
0% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.swashIn {
animation-name: swashIn;
}
@keyframes swashIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0);
}
90% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(0.9, 0.9);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
}
}
.holeOut {
animation-name: holeOut;
}
@keyframes holeOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1) rotateY(0deg);
}
50%,100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0) rotateY(180deg);
}
}
Fertig!
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*