颤振图标动画

Question

我是颤振设计的新手。所以我有一个关于图标动画的问题。我在颤动应用程序中用星号创建了 IconButton：

IconButton(color: _isFavourite
           ? Theme.of(context).primaryColor
           : Colors.grey[600],
           onPressed: () => changeFavourites(),
           icon: Icon(Icons.star)),

当用户单击按钮时，星星会改变颜色。只是改变它，仅此而已。问题是：我能以某种方式让这种不断变化的颜色过渡变得更有趣吗？像更平滑或类似的东西也许有一个包可以创建这样的图标动画？
谢谢

Answer 1

虽然这是关于动画Color，但您可以使用ColorTween

class _ColoAnState extends State<ColoAn> with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Animation animation;
  @override
  void initState() {
    super.initState();

    controller = AnimationController(
      duration: const Duration(milliseconds: 200), //controll animation duration
      vsync: this,
    )..addListener(() {
        setState(() {});
      });

    animation = ColorTween(
      begin: Colors.grey,
      end: Colors.red,
    ).animate(controller);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Icon(
          Icons.favorite,
          color: animation.value,
        ),
      ),
      floatingActionButton: FloatingActionButton(onPressed: () {
        if (controller.value == 1)
          controller.reverse();
        else
          controller.forward();
      }),
    );
  }
}

更多关于AnimationController和ColorTween