在这个 IconButton 小部件里面用了来自两个动画的当前值 .. 一个作为它的小图标的尺寸 .. 一个作为小图标的颜色 .. 按下屏幕上的这个小图标 .. 会根据动画里的当前值不断的重建小部件 .. 因为在这里我们监听了一下动画 .. 当动画值有变化就执行一下 setState .. 这样就会使用动画当前的值重建小部件 ..

这个小部件我们可以单独拿出来，放在一个 AnimatedWidget 里面 .. 它在值有变化的时候就会重建小部件 .. 所以这里我们先注释掉添加的这个监听器 ..

然后去创建一个 AnimatedWidget ... 小部件的名字叫 AnimatedHeart .. 让它继承一下 AnimatedWidget ..

里面先添加一个 List .. 名字叫 animations .. 因为小部件需要一组动画 .. 再添加一个 AnimationController .. 名字叫 controller ... 再添加一个构造函数 .. AnimatedHeart .. 里面添加一个 this.animations .. 然后再添加一个 this.controller .. 执行一下 super .. 设置一下 listenable，表示可以监听的东西，对应的值这里就是动画的控制器 .. controller ..

在小部件里添加一个 build 方法 .. 它返回的应该就是界面上显示的这个心形小图标 ... 剪切一下这个 IconButton .. 换成一个 AnimatedHeart .. 使用它的时候要提供一个 animations 列表 .. 这里有两个动画 .. 一个叫 animation .. 还有一个是 animationColor ..

小部件还需要一个 controller .. 对应的值就是 animationDemoController ..

把剪切的 IconButton 放到这个 AnimatedHeart 里面 .. 再修改一下 .. 这个 iconSize 的值应该是 animations 里的第一个项目的 value 属性 .. color 的值应该是 animations 列表里的第二个项目的 value ..

动画控制器现在应该是 controller ..

执行一下 hot restart ..

按一下界面上的这个心形小图标 .. 可以运行动画 .. 运行的时候动画值会不停的变化 .. AnimatedWidget 也会不停的重建它自己 ..