Question

我无法在ionic 4中制作启动画面。它什么也没做，寻找答案，尤其是在app.component.ts中。在ionic 4中，如何制作启动画面没有任何内容。我尝试使用this.hide，但是this.show仍然无法正常工作，如果有人可以帮助您弄清楚如何在ionic 4中制作启动画面。

Splash.ts

import { ModalController } from '@ionic/angular';
import { Component, OnInit } from '@angular/core';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';



@Component({
selector: 'app-splash',
templateUrl: './splash.page.html',
styleUrls: ['./splash.page.scss'],
})
export class SplashPage implements OnInit {


  constructor( public splashScreen: SplashScreen, public modalCtrl: ModalController) {

  }

  ionViewDidEnter() {

    this.splashScreen.hide();

    setTimeout(() => {
      this.modalCtrl.dismiss();
    }, 4000);

  }

  ngOnInit() {

  }

}

app.component.ts

import { Tab1Page } from './tab1/tab1.page';
import { SplashPage } from './splash/splash.page';
import { Component } from '@angular/core';

import { Platform, ModalController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';


@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {

    rootPage:any = SplashPage;

    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, 
public modalCtrl: ModalController) {

        platform.ready().then(async () => {

            statusBar.styleDefault();

              const splash = this.modalCtrl.create({component:SplashPage,
              componentProps:{splash: SplashPage}});
               (await splash).present();

        });

    }

}

Splash.html

<ion-header>

</ion-header>


<ion-content>
 <div class="sk-folding-cube">
  <div class="sk-cube1 sk-cube"></div>
  <div class="sk-cube2 sk-cube"></div>
  <div class="sk-cube4 sk-cube"></div>
  <div class="sk-cube3 sk-cube"></div>
</div>
</ion-content>

Splash.css

.sk-folding-cube {
 margin: 20px auto;
 margin-top: 80%;
 width: 40px;
 height: 40px;
 position: relative;
 -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
} 
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
 .sk-folding-cube .sk-cube3:before {
   -webkit-animation-delay: 0.6s;
           animation-delay: 0.6s; 
 }
 .sk-folding-cube .sk-cube4:before {
   -webkit-animation-delay: 0.9s;
           animation-delay: 0.9s;
 }
 @-webkit-keyframes sk-foldCubeAngle {
   0%, 10% {
     -webkit-transform: perspective(140px) rotateX(-180deg);
             transform: perspective(140px) rotateX(-180deg);
     opacity: 0; 
   } 25%, 75% {
     -webkit-transform: perspective(140px) rotateX(0deg);
             transform: perspective(140px) rotateX(0deg);
     opacity: 1; 
   } 90%, 100% {
     -webkit-transform: perspective(140px) rotateY(180deg);
             transform: perspective(140px) rotateY(180deg);
     opacity: 0; 
   } 
 }

 @keyframes sk-foldCubeAngle {
   0%, 10% {
     -webkit-transform: perspective(140px) rotateX(-180deg);
             transform: perspective(140px) rotateX(-180deg);
     opacity: 0; 
   } 25%, 75% {
     -webkit-transform: perspective(140px) rotateX(0deg);
             transform: perspective(140px) rotateX(0deg);
     opacity: 1; 
   } 90%, 100% {
     -webkit-transform: perspective(140px) rotateY(180deg);
             transform: perspective(140px) rotateY(180deg);
     opacity: 0; 
   }
 }

 ion-content {
   --background: rgb(57, 201, 194);
  }

Answer 1

首先，用以下几行更新config.xml文件。

<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="ShowSplashScreen" value="true" />

在app.html中，我们只需要一个div，即可在平台准备就绪后几秒钟内充当叠加层。

<div *ngIf="showSplash" class="splash">
  <div class="spinner"></div>
</div>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

在app.component.ts中，我们导入一个RxJS计时器，该计时器将在3000毫秒后切换叠加层的可见性。

import { timer } from 'rxjs/observable/timer';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  // ...omitted

  showSplash = true; // <-- show animation

  initializeApp() {
    this.platform.ready().then(() => {

      this.statusBar.styleDefault();
      this.splashScreen.hide();  // <-- hide static image

      timer(3000).subscribe(() => this.showSplash = false) // <-- hide animation after 3s
    });
  }
}

参考：https://angularfirebase.com/lessons/generate-a-custom-spash-screen-and-icons-in-ionic/

建立Ionic 4开机画面，没有执行任何操作（无效）

1 个答案: