动画启动画面 - Ionic 4.0

Posted 2023-03-22

【中文标题】动画启动画面 - Ionic 4.0

【英文标题】：Animated Splash Screen - Ionic 4.0

【发布时间】：2019-01-14 07:45:33

【问题描述】：

美好的一天

我的客户要求我们在我们的应用程序中包含一个动画启动屏幕，并为我们提供了一个动画 GIF 以供在这里使用。

到目前为止，我还没有找到任何关于如何在 Ionic 4.0 中执行此操作的教程，尽管我确实设法找到了 Ionic 早期版本的一些教程，例如 this great one by Josh Morony。然而，这在 Ionic 4.0 中的工作方式似乎存在很大差异。

因此，我对此有一个问题，如果有人能解释一下，我将非常感激：

根据我从上述和我阅读的其他教程中了解到的情况，实际上不可能有一个实际的动画启动屏幕，因为移动设备只会为此目的自动加载图像。因此，解决方案是通过在应用实际启动后播放动画来“伪造”它。

考虑到这一点，我想知道是否会像让我们的第一页包含动画 GIF 一样简单，然后在动画完成后继续到实际的第一页。

据我了解，这在很大程度上是上述教程中发生的事情。然而，作者确实使用了一些 Angular 代码来隐藏原始启动画面。这让我想知道，按照这些说明，启动屏幕是否会被替换，并且动画会在启动应用程序的过程中比等待加载更早播放。本质上，本教程中采用的方法会比我上面建议的简化方法更快。

所以简而言之，我想我是在问天气，让我们的第一页包含动画就足够了，如上所述，还是这会使应用程序显得缓慢而笨重？

任何建议将不胜感激。

【参考方案1】：

是的，你可以制作动画闪屏，看看我制作的那些你可以使用逻辑。

git repo one two.

你可以使用 lottie 来实现你想要的解决方案，就像我在这些示例中所做的那样，你可以在 adobe 中制作动画效果并导出到 json 文件并将其加载到你的离子动画启动屏幕中。

链接到lottie

洛蒂files

【讨论】：

谢谢@kevin Dias，这是非常有用的技术。但是，我仍然想知道您何时以及如何在初始屏幕上显示它？正如我在最初的问题中所问的那样，只需将其显示为应用程序的第一页，然后使用空白图像作为实际的初始屏幕就足够了吗？

@phunder 你可以简单地使用 lottie 制作一个空白页面来显示所需的动画，并设置一个 set_timeout 来进入主屏幕，就这么简单。在启动画面中，你可以做任何事情，看看我给你看的 git repos。这很简单。 :)

【参考方案2】：

如果您想在您的 Cordova/Ionic 应用程序的 html 和 javascript 加载并能够显示动画版本之前使用抽签动画，您可能需要查看cordova-plugin-lottie-splashscreen。该插件使用本机 lottie-ios 和 lottie-android 库从文件位置或远程 URL 呈现 lottie 动画。一旦您确定 Cordova 应用程序准备就绪，动画就可以通过 JavaScript 调用循环、自动或以编程方式隐藏。

免责声明：我是所描述插件的作者。