先简单改造一下 .. 把这个 ActionChip 换成一个 IconButton 小部件 .. 在它里面设置一下 icon 属性 .. 它的值是一个小图标 .. 小图标是 Icons.favorite ..

然后用一个 iconSize 属性设置一下小图标的尺寸 .. 这个尺寸可以用一下 animationController.value .. 点按这个小图标会向前运行动画 ..

状态

动画的运行会有个状态 .. 在 initState 里面 .. 用一下 animationDemoController .. addStatusListener .. 监听一下动画的运行状态 .. 给它设置的监听器里面支持一个 AnimationStatus 参数 .. 名字可以叫 status .. 在方法里面可以把这个动画的状态输出到控制台上 ..

执行一下 hot restart ..

然后按一下界面上显示的这个心形小图标 .. 会开始向前运行动画 ... 它的尺寸会慢慢变大 ..

按下去以后，在控制台上输出的动画的状态是 AnimationStatus.forward .. 表示正在向前运行 .. 动画运行结束 .. 它的状态是 AnimationStatus.completed ..

控制

下面我们可以判断动画的状态，然后根据不同的状态去做不同的事情 .. 在这个 IconButton 的点按回调里面 .. 添加一个 switch 区块 .. 动画的状态是在 animationController 里的 status 属性里面 .. 判断一下这个状态 ..

添加一种情况 .. 如果状态是 AnimationStatus.completed .. 动画播放完成 .. 执行一下 animationDemoController.reverse() .. 它可以倒退播放动画 .

默认的情况是执行一下 animationController 上的 forward 方法 ..

执行一下 hot restart ..

按一下这个心形小图标 .. 开始播放动画 .. 现在动画是播放完成的状态 .. 这时候再按一下这个小图标 .. 这次执行的是 reverse 方法 .. reverse 的时候动画的状态就是 AnimationStatus.reverse .. 到最后，动画的状态是 AnimationStatus.dismissed ..

reverse 到最后动画的值会变成 0.0 .. 所以小图标就不见了 ..

这里可以修改一下 lowerBound 的值 .. 把它设置成 32.0 ... 运行一下 hot restart ...

再到模拟器上试一下 ..