动画启动画面 - Ionic 4.0

6

你好

我的客户要求我们在应用程序中包含一个动画闪屏,并提供了一个动画GIF供我们使用。

到目前为止,我还没有找到任何关于如何在Ionic 4.0中实现此功能的教程,尽管我确实找到了一些早期版本的Ionic的教程,比如Josh Morony的这篇优秀的文章。然而,在Ionic 4.0中,这个功能似乎有很大的不同。

因此,我有一个问题需要解决,如果有人能够给予帮助,我将非常感激:

从我所了解的和其他教程中所读到的内容来看,移动设备自动仅加载用于此目的的图像,因此实际上不可能拥有真正的动画闪屏。解决方案是通过在应用程序实际启动后播放动画来“伪造”它。

考虑到这一点,我想知道是否只需将我们的第一页包含动画GIF,然后在动画完成后继续进入实际的第一页即可。

据我所知,这在上面的教程中基本上是发生的情况。然而,作者使用了一些Angular代码来隐藏原始闪屏屏幕。这让我想知道,按照这些说明,闪屏屏幕是否会被替换,动画是否会在启动应用程序的过程中更早地播放。本质上,教程中所采用的方法将比我上面提出的简化方法更快地发生。

因此,总之,我想问的是,只需将我们的第一页包含动画是否足够好,如上所述,或者这样做会使应用程序显得缓慢和笨重?

任何建议都将不胜感激。

2个回答

2

您可以制作动画闪屏,看看我制作的这些示例,您可以使用相同的逻辑。

Git存储库:一个 两个

您可以使用Lottie实现所需的解决方案,就像我在这些示例中所做的那样,您可以在Adobe After Effect中制作动画并将其导出为JSON文件,然后在Ionic动画闪屏中加载它。

链接到Lottie

Lottie文件


1
谢谢@kevin Dias,这是非常有用的技术。然而,我仍然想知道何时以及如何在启动画面中显示它?正如我在原始问题中所问的那样,仅将其显示为应用程序的第一页,然后使用空白图像作为实际的启动画面是否足够? - phunder
1
@phunder,你可以简单地创建一个空白页面,使用Lottie显示所需的动画,并设置一个set_timeout来转到主屏幕。在启动画面中,你可以做任何事情,看一下我展示给你的git repos,很简单的。 :) - Kevin Dias

2
如果您想在 Cordova/Ionic 应用程序的 HTML 和 JavaScript 加载并能够显示动画版本之前使用 Lottie 动画,您可能需要查看 cordova-plugin-lottie-splashscreen。该插件使用本地的 lottie-ios 和 lottie-android 库从文件位置或远程 URL 渲染 Lottie 动画。该动画可以循环播放,可以通过您的 JavaScript 调用自动或以编程方式隐藏,一旦确定了 Cordova 应用程序已准备好。
免责声明:我是所描述插件的作者。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接