如何在 Flutter 中创建像 Ajio 移动应用一样的加载器动画。下面是装载机的视频

Posted 2023-02-23

【中文标题】如何在 Flutter 中创建像 Ajio 移动应用一样的加载器动画。下面是装载机的视频

【英文标题】：How to create loader animation like Ajio mobile app in flutter. Below is video of loader

【发布时间】：2021-05-15 22:47:27

【问题描述】：

加载器链接：https://drive.google.com/file/d/15DvTAfyfdBuYmCZuo63tPwi7oX5XAd3i/view?usp=sharing

我想用颤振创建这个，飞镖。

如果可以在没有任何第三方的情况下完成，那就更好了。

接受任何帮助！ 提前致谢。

【参考方案1】：

只需创建一个加载器的 Gif 并在警报对话框中显示它就会很容易。 或者您可以使用 rive 创建自己的动画，然后在 FLutter 中显示它

创建 Rive 动画 https://rive.app/

使用教程 https://medium.com/flutter-community/taking-flutter-animations-a-step-ahead-with-rive-80adea69c7e

创建一个 Rive 动画并将其显示为加载器。

【讨论】：

我只是在寻找一个颤振的原生代码来以这种方式制作动画。

【参考方案2】：

您需要创建一个 gif 文件或 lottie 文件并使用 Image 小部件加载它，而不是在 Flutter 中创建动画。

【讨论】：

我只想使用flutter进行集成我不知道其他设计工具甚至连基本想法都没有。因此，如果您提出更好的建议会很有帮助...谢谢！

您可以使用切换动画并使用它来转换两个小部件之间的动画，一旦完成，就可以编写动画反向和正向动画以提供循环效果。这将需要 2 个您想要过渡到的图像。

但我不认为它会像衬衫变成牛仔裤一样，它会显示出衬衫正在褪色（可能）和牛仔裤正在出现。请观看视频，让我知道我们是否可以在颤振中创建完全相同的内容！

这是一个 gif 文件，创建一个并加载它以显示加载，这正是 ajio 也在做的事情，不需要特殊代码。

不寻找 gif 集成我已经有了，但现在我也想为我的应用创建这样的加载器和其他动画。