无法使用 Ionic 4+ 设置动画启动画面答案

【问题标题】：Unable to set the Animated splash screen using Ionic 4+无法使用 Ionic 4+ 设置动画启动画面
【发布时间】：2021-04-23 00:17:38
【问题描述】：

我需要什么：应用打开时显示的动画闪屏。

我做了什么：我将下面的视频作为参考 https://www.youtube.com/watch?v=-c0htV-kfm8 并添加到下面的代码中，而不是动画启动屏幕，我只得到正常的默认启动屏幕。

鳕鱼e:

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

有什么建议吗？

【问题讨论】：

是特定于操作系统还是根本不工作？
@TaylorRahul 根本不适合我，我正在安卓上测试它
你好@dexter请试一试......i.diawi.com/874xgH
我尝试关注视频 .. 它对我有用...如果您认为这是有效的。我们会修复它
您有机会安装我与您共享链接的演示应用吗

标签： javascript angular ionic-framework ionic4

【解决方案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 不适用于这种情况

【讨论】：

【解决方案2】：

查看关于此的 Josh Morony 教程。我过去用过，效果很好。

这里是参考链接：https://www.joshmorony.com/creating-an-animated-splash-screen-in-ionic/

【讨论】：

我只听了他的演讲，使用离子路由器它不起作用。我也尝试过并发布了它。
@Dexter 我不确定我是否完全理解您的评论。但是，这里有几个问题：您是否正在使用最新版本的 ionic 开始一个新项目？使用电容器还是cordova？
我正在使用 ionic 5+ 版本并使用cordova，如果我们使用 gif 启动屏幕，使用没有离子路由器，它可以工作，如果我们使用离子路由器，它就不能工作。并且我在现有的 ionic 项目中使用，即版本 5
在首页顶部显示的模态中使用它，然后当时间完成时，隐藏模态...为什么要将它放在主组件上？您不应该真正修改该页面。还要确保在 config.xml 上设置此首选项