javascript - 无法使用 Ionic 4+ 设置动画启动画面

Question

我需要什么 :应用程序打开时显示的动画启动画面。
我做了什么 : 我把下面的视频作为引用 https://www.youtube.com/watch?v=-c0htV-kfm8并在下面的代码中添加，而不是动画闪屏，我只得到正常的默认闪屏。
鳕鱼 电子:

   <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 代码

          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" />

有什么建议 ？

Answer 1

安装软件包

ionic cordova plugin add cordova-plugin-lottie-splashscreen
npm install @ionic-native/lottie-splash-screen --save
ionic cordova plugin add cordova-plugin-androidx-adapter

现在添加到/src/app/app.module.ts

import { LottieSplashScreen } from '@ionic-native/lottie-splash-screen/ngx';

和提供者也是如此。

现在你需要从 lottiefiles.com 下载一个 json，在你的 src/assets 文件夹中。

例如: https://lottiefiles.com/43846-butterfly-loader
在 config.xml 中添加:

<preference name="LottieAnimationLocation" value="www/assets/loading.json" />
<preference name="LottieFullScreen" value="true" />
<preference name="LottieLoopAnimation" value="true" />

现在您需要隐藏启动画面。将 this.lottieSplashScreen.hide() 添加到 app.component.ts

在您的设备上运行该应用程序

ionic cordova run android --device

ionic serve不适用于这种情况