Flutter 动画

一系列动画,旨在改善您下一个 flutter 项目的用户体验。由 Ezaldeen SAHB 构建,我希望这些示例能够帮助您完成实际项目,或者仅仅用于学习和启发。

我是一名来自伊拉克的移动开发人员,这个仓库只是为了分享我的 Instagram 页面 @ezaldeen_sahb 视频的源代码。

动画


动画引导页

使用滑块和 lottie 文件构建动画引导页,可以在您的应用首次启动时吸引用户。

查看代码
















家具应用程序(深色/浅色)主题支持

绘制曲线矢量动画以在浅色/深色主题之间切换。它还利用自定义闪光指示器来选择类别。

查看代码
















无 Wi-Fi 互联网连接

使用 Custom painter 在您的应用程序屏幕上绘制 Wi-Fi 动画。在此案例中,我还使用了一些文本动画小部件来制作打字动画。

查看代码
















Flutter 圆形小部件动画器

演示如何在 Flutter 应用中使用自定义 painters 以及如何关联多个自定义动画控制器。

查看代码
















个人资料天气动画

个人资料视图示例,其中包含动画天气指示器,这些指示器可以改变大小、形状和颜色。

查看代码
















旋转波浪进度指示器

再次使用自定义 painters,在屏幕上绘制一些路径并使用动画控制器来延迟每个路径,以实现这种精美的移动效果。

查看代码
















Flutter 自定义 Hero 动画

Flutter Hero 动画非常棒,但是默认的 Hero 动画并没有提供最佳的用户体验。我们将实现一个白色页面路由动画来改善这个问题。

查看代码
















安装

如果您是 Flutter 新手,首先需要遵循 安装说明。一旦您设置好并能够编译示例 Flutter 应用,就可以运行一些示例了!

每个项目都存储在存储库的各自文件夹中。使用您选择的 IDE,打开您想运行的项目根目录。然后,在 IDE 中使用终端运行 flutter pub get 来获取任何依赖项,并运行 flutter run 来部署到您的连接设备或模拟器。

如果您想尝试这些 Flutter 网页版,可以使用 flutter run -d chrome。有关启用 Flutter 网页版的更多信息,请遵循 安装说明

GitHub

https://github.com/Ezaldeen99/Flutter-animations