使用颤动动画将图标旋转 180 度

如何解决使用颤动动画将图标旋转 180 度

我有一个IconButton，通常它的图标是Icons.expand_more，但是当我按下它的图标应该是Icons.expand_less。我想对此进行动画处理，以便如果我按下该按钮，它会旋转并从 upwords 指向 downwords。同样，当我按下 expand_less 时，它应该变成带有旋转动画的 expand_more。我怎样才能做到这一点？下面是我的代码：

    IconButton(
      icon:  _expanded ? Icon(Icons.expand_less) : Icon(Icons.expand_more),onpressed: () {
        setState(() {
           _expanded = !_expanded;
        });
      },)

我尝试使用animatedContainer，但它不起作用，因为我使用了两个不同的图标，而且我无法用这个来实现旋转效果。我也尝试使用以下方法旋转图标，但是当它从 0 度旋转到 180 度时无法显示动画。

IconButton(
              icon: AnimatedContainer(
                  duration: Duration(seconds: 3),child: Transform.rotate(
                      angle: _expanded ? 0 : 180 * math.pi / 180,child: Icon(Icons.expand_less))),// icon:
              //     _expanded ? Icon(Icons.expand_less) : Icon(Icons.expand_more),onpressed: () {
                setState(() {
                  _expanded = !_expanded;
                });
              },)

这是扩展前：

这是扩展后的：

我想要按钮点击时的旋转动画。

解决方法

试试这个：添加动画控制器：AnimationController _animationController:

initState() {
    _animationController = new AnimationController(
        vsync: this,duration: Duration(milliseconds: 300));
    }

用这个包裹你的图标：

RotationTransition(
         turns: Tween(begin: 0.0,end: 1.0)
                .animate(_animationController),child: IconButton(icon: //YOUR ICON),onPressed: () {
             setState(() {
        _animationController1.forward(from: 0.0);
      });
     },),)

最后：

  @override
  void dispose() {
    super.dispose();
    _animationController?.dispose();
  }

感谢@krumpli。

定义 AnimationController _controller。
将 init 方法定义为：

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,duration: Duration(milliseconds: 300),upperBound: 0.5,);
  }

将 dispose 方法定义为：

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

使用小部件 RotationTransition ：

RotationTransition(
              turns: Tween(begin: 0.0,end: 1.0).animate(_controller),child: IconButton(
                icon: Icon(Icons.expand_less),onPressed: () {
                  setState(() {
                    if (_expanded) {
                      _controller..reverse(from: 0.5);
                    } else {
                      _controller..forward(from: 0.0);
                    }
                    _expanded = !_expanded;
                  });
                },)

不要忘记在类定义中添加 with SingleTickerProviderStateMixin

看看这个 test sample 我为你所需要的东西。

这也应用了一条曲线，这是一个很好的 Flutter 建议。

import 'package:flutter/material.dart';

class RotateIcon extends StatefulWidget {
  const RotateIcon({Key? key}) : super(key: key);

  @override
  _RotateIconState createState() => _RotateIconState();
}

class _RotateIconState extends State<RotateIcon>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;
  late final Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
        duration: const Duration(milliseconds: 500),vsync: this);
    _animation =
        Tween(begin: 0.0,end: .5).animate(CurvedAnimation(
        parent: _controller,curve: Curves.easeOut));
    }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Column(
            children: [
              RotationTransition(
                turns: _animation,child: const Icon(Icons.expand_more),ElevatedButton(
                  onPressed: () {
                    if (_controller.isDismissed) {
                      _controller.forward();
                    } else {
                      _controller.reverse();
                    }
                  },child: const Text("Animate"))
            ],)),);
  }
}