Flutter 三角旋转动画_flutter改变图标的角度

///三角旋转动画、默认三角形，可传其他icon
class AnimationArrow extends StatefulWidget {
  bool isSelected;
  String imageName;
  AnimationArrow(
      {this.isSelected = false,
      this.imageName = 'assets/images/arrow_down.png'});
  @override
  _AnimationArrowState createState() => _AnimationArrowState();
}

class _AnimationArrowState extends State<AnimationArrow> {
  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder<double>(
      tween: Tween(begin: 1, end: widget.isSelected ? 1 : 0),
      duration: Duration(milliseconds: 200),
      builder: (context, value, child) {
        return Transform.rotate(
        //pi为180° 此处为三角顺时针旋转180° 整个圆 如果不需要整个圆旋转 去掉isSelected的参数
          angle: widget.isSelected ? math.pi * value : math.pi * -value,
          child: Image.asset(
            widget.imageName,
            gaplessPlayback: true,
          ),
        );
      },
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

AnimationController 同样可以实现，不过如果类似一个大列表都有筛选的旋转动画的话不方便。