普通的加载千篇一律，有趣的 loading 万里挑一

前言

在网络速度较慢的场景，一个有趣的加载会提高用户的耐心和对 App 的好感，有些 loading 动效甚至会让用户有想弄清楚整个动效过程到底是怎么样的冲动。然而，大部分的 App的 loading 就是下面这种千篇一律的效果 —— 俗称“转圈”。

本篇我们利用Flutter 的 PathMetric来玩几个有趣的 loading 效果。

效果1：圆环内滚动的球

如上图所示，一个红色的小球在蓝色的圆环内滚动，而且在往上滚动的时候速度慢，往下滚动的时候有个明显的加速过程。这个效果实现的思路如下：

• 绘制一个蓝色的圆环，在蓝色的圆环内构建一个半径更小一号的圆环路径（Path）。
• 让红色小球在动画控制下沿着内部的圆环定义的路径运动。
• 选择一个中间减速（上坡）两边加速的动画曲线。

下面是实现代码：