Monday, 25 January 2021

Unable to set the Animated splash screen using Ionic 4+

What i need : Animated splash screen to be displayed when app is opening.

What i did : i took the below video as ref https://www.youtube.com/watch?v=-c0htV-kfm8 and added in below code and instead of animated splash screen i am getting normal default splash screen only .

code:

   <ion-app>
  <div #customOverlay><img src="http://cdn.osxdaily.com/wp-content/uploads/2013/07/dancing-banana.gif" [hidden]="!splash">
  </div> 
  <ion-router-outlet [hidden]="splash"></ion-router-outlet>
</ion-app>

.ts code

          splash = true;
  @ViewChild('customOverlay',{static:false})customOverlay:ElementRef;
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      setTimeout(function(){
       this.splash = false;
       this.customOverlay.nativeElement.style.display = 'none';     
      }, 3000);

    });
  }

**Config.xml**



   <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="0" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="none" />
    <preference name="SplashScreenDelay" value="0" />

any suggestions ?



from Unable to set the Animated splash screen using Ionic 4+

No comments:

Post a Comment