Flutter 自定义动画图标

Question

我希望制作一个可以从列表中添加和删除的项目。

我正在寻找的是具有 + 图标和 - 图标并在 2 之间设置动画以获得干净流畅的外观。

我有以下代码

Container(
            padding: EdgeInsets.fromLTRB(0, 0, 20, 0),
            child: AnimatedIcon(
              icon: AnimatedIcons.home_menu,
              progress: _animationController,
              color: Colors.white,
            ))

和

void _handleOnPressed() {
setState(() {
  isPlaying = !isPlaying;
  isPlaying
      ? _animationController.forward()
      : _animationController.reverse();
  });
}

这对于颤振中的内置动画图标来说很好。

我希望使用 + 和 - 图标，但外观相同。

有没有办法做到这一点？

Answer 1

我知道它不如AnimatedIcon那么漂亮，但实际上您只需几行代码就可以使用您选择的任何 2 个图标获得非常相似的过渡：

 IconButton(
      icon: AnimatedSwitcher(
          duration: const Duration(milliseconds: 300),
          transitionBuilder: (child, anim) => RotationTransition(
                turns: child.key == ValueKey('icon1')
                    ? Tween<double>(begin: 1, end: 0.75).animate(anim)
                    : Tween<double>(begin: 0.75, end: 1).animate(anim),
                child: FadeTransition(opacity: anim, child: child),
              ),
          child: _currIndex == 0
              ? Icon(Icons.close, key: const ValueKey('icon1'))
              : Icon(
                  Icons.arrow_back,
                  key: const ValueKey('icon2'),
                )),
      onPressed: () {
        setState(() {
          _currIndex = _currIndex == 0 ? 1 : 0;
        });
      },
    );

结果：

或者您可以使用,ScaleTransition代替FadeTransition, 并获得更相似的动画：

IconButton(
      icon: AnimatedSwitcher(
          duration: const Duration(milliseconds: 350),
          transitionBuilder: (child, anim) => RotationTransition(
                turns: child.key == ValueKey('icon1')
                    ? Tween<double>(begin: 1, end: 0.75).animate(anim)
                    : Tween<double>(begin: 0.75, end: 1).animate(anim),
                child: ScaleTransition(scale: anim, child: child),
              ),
          child: _currIndex == 0
              ? Icon(Icons.close, key: const ValueKey('icon1'))
              : Icon(
                  Icons.arrow_back,
                  key: const ValueKey('icon2'),
                )),
      onPressed: () {
        setState(() {
          _currIndex = _currIndex == 0 ? 1 : 0;
        });
      },
    )

结果：

通过这种方法，您可以使用任何您想要的图标，并且不需要创建单独的图标AnimationController来控制过渡，这与AnimatedIcon不同

Answer 2

你很幸运，我的朋友！Flutter 已经为您提供了 AnimatedIcon()

文档中的 AnimatedIcon 类

本周视频的动画图标小工具

现在使用 Flare 为您的图标设置动画。杰夫德莱尼为此做了一个很好的教程。

https://fireship.io/lessons/animated-navigation-flutter-flare/

Answer 3

Flutter 提供了AnimatedIcon可以使用，这是一个如何使用它的示例。

class _CreatePackageViewState extends State<CreatePackageView>
    with SingleTickerProviderStateMixin {  
       bool expanded = true;
       late AnimationController controller;
      @override
       void initState() {
        super.initState();
        controller = AnimationController(
          vsync: this,
          duration: Duration(milliseconds: 400),
          reverseDuration: Duration(milliseconds: 400),
        );
      }



      IconButton(
            icon: AnimatedIcon(
              icon: AnimatedIcons.menu_close,
              progress: controller,
              semanticLabel: 'Show menu',
            ),
            onPressed: () {
              setState(() {
                expanded ? controller.forward() : controller.reverse();
                expanded = !expanded;
              });
            }),

    }