钱包应用

一个极简、动画化的 Flutter 钱包应用 UI，为在斯德哥尔摩举行的 Flutter & Friends 会议上进行的研讨会而构建。

在本研讨会中，您将学习如何为 Flutter 钱包应用 UI 添加复杂度逐渐增加的动画，使其栩栩如生。

? 文章版本即将发布……

第一章 – 引导页

通过在引导页中添加简单的动画，介绍简单隐式和显式动画。

? 预览动画代码

1-on-boarding-page.mp4

第二章 – 可消失卡片堆叠

利用用户输入实现可消失动画卡片的堆叠。用户可以拖动卡片，卡片可以动画回原位，或者根据用户拖动的方向被抛出并淡出。卡片实现为无限循环，被丢弃的卡片会回到卡片堆叠的后面。

? 预览动画代码

2-cards-stack.mp4

第三章 – 卡片 Hero 动画 & 自定义页面过渡

实现自定义页面过渡和高度自定义的 Hero 动画。关键在于使用 Hero widget 的 flightShuttleBuilder 参数来返回动画 widget。因为 Flutter 中 Hero widget 的工作方式是，在后台实际上有三个 widget：源页面 Hero widget 的 child，目标页面 Hero widget 的 child，以及一个用于中间动画的 widget。而 flightShuttleBuilder 是您可以通过提供的 Animation 对象来覆盖该 widget，并对其进行任意复杂的动画。

? 预览动画代码

3-hero.mp4