Flutter 动画
一系列旨在为您的下一个 Flutter 项目改善用户体验的动画。
由 Ezaldeen SAHB 制作
希望这些示例能帮助您完成实际项目,或者仅用于学习和灵感。
此外,您还可以叉取并审查此处提供的 MIT 许可代码。
关于我
我是一名来自伊拉克的移动开发者,这个仓库只是为了分享我 Instagram 页面 @ezaldeen_sahb 视频的源代码。
动画示例
动画引导页
使用滑块和 Lottie 文件构建动画引导页,可在应用首次启动时吸引用户。
家具应用(支持深色/浅色主题)
绘制弯曲的矢量动画,以在浅色/深色主题之间切换。它还使用了自定义的闪光指示器来指示选定的类别。
无 Wi-Fi 网络连接
使用自定义绘制器在应用屏幕上绘制 Wi-Fi 动画。在此案例中,我还使用了一些文本动画小部件来实现打字动画。
Flutter 圆形小部件动画器
演示如何在 Flutter 应用中使用自定义绘制器以及如何关联多个自定义动画控制器。
个人资料天气动画
带有动画天气指示器的个人资料视图示例,这些指示器会改变大小、形状和颜色。
旋转波浪进度指示器
这里再次使用了自定义绘制器,在屏幕上绘制一些路径并使用动画控制器延迟每个路径,以实现这种漂亮的移动效果。
Flutter 自定义 Hero 动画
Flutter Hero 动画非常棒,但是默认的 Hero 动画未能提供最佳的用户体验。
我们将实现一个白色页面路由动画来改善这个问题。
安装
如果您是 Flutter 新手,您首先需要遵循 设置说明。一旦您设置完成并能够编译示例 Flutter 应用,您就可以运行一些示例了!
每个项目都存储在存储库的各自文件夹中。使用您选择的 IDE,打开您想要运行的项目根目录。然后,在 IDE 中的终端中,运行 flutter pub get 来获取任何依赖项,并运行 flutter run 来部署到您的连接设备或模拟器。
如果您想尝试 Flutter 网页版,可以使用 flutter run -d chrome。有关启用 Flutter 网页版的更多信息,请遵循 设置说明。
许可证
这些示例是在 MIT 许可下发布的。您可以将代码用于任何目的,包括商业项目。






