Flutter 补间动画

现在我需要点击文本后将文本旋转方向

现在我有两种方法实现此动画:效果就不看了，喜欢看的可以自己复制代码去查看

第一种，通过使用旋转动画来完成旋转效果:

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

  @override
  State<MyApp1> createState() => _MyApp1State();
}

class _MyApp1State extends State<MyApp1> {
  bool bool1 = true;
  var xz = 0;

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Container(
      width: size.width,
      height: size.height,
      child: Stack(
        children: [
          AnimatedPositioned(
              //此动画必须在Stack中有效
              child: Container(
                height: size.height,
                width: size.width,
                child: Container(
                  color: Colors.blue.withOpacity(.2),
                ),
              ),
              duration: Duration(milliseconds: 300)),
          AnimatedPositioned(
            //也是一个动画组件具体想要了解可以去看之前的文章
            top: 100,
            left: 200,
            duration: Duration(milliseconds: 300),
            child: AnimatedRotation(
              //旋转动画
              turns: xz * pi / 180, //旋转位置
              duration: Duration(milliseconds: 300), //动画时间
              child: GestureDetector(
                onTap: () {
                  //设置点击时间
                  setState(() {
                    bool1 = !bool1; //点击后bool1取反
                    xz = bool1 ? 0 : -14; //当bool1的时候xz=0否则等于-14,这里也可以等于14,
                    // 区别是一个顺时针，一个逆时针旋转
                    print(xz);
                  });
                },
                child: Text(
                  //按钮
                  "旋转动画",
                  style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 22),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

第二种通过补间动画来完成

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

  @override
  State<MyApp1> createState() => _MyApp1State();
}

bool bool1 = true;

class _MyApp1State extends State<MyApp1> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  late Animation<double> animation =
      Tween<double>(begin: 0, end: 90).animate(_controller);

  void abc() {
    setState(() {
      bool1 = !bool1;
    });
    bool1 ? _controller.forward() : _controller.reverse();
  }

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

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

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: animation,
        builder: (context, _) {
          var size = MediaQuery.of(context).size;
          return Stack(
            children: [
              AnimatedPositioned(
                  width: size.width,
                  height: size.height,
                  child: Container(
                    color: Colors.green.withOpacity(.7),
                  ),
                  duration: Duration(milliseconds: 300)),
              AnimatedPositioned(
                  child: Transform.rotate(
                      angle: (animation.value) * pi / 180,
                      child: GestureDetector(
                        onTap: () {
                          abc();
                        },
                        child: Container(
                          width: 200,
                          height: 200,
                          child: Text(
                            "补间动画",
                            style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                                fontSize: 44),
                          ),
                        ),
                      )),
                  duration: Duration(milliseconds: 300))
            ],
          );
        });
  }
}

补间动画不仅可以使用旋转动画，只要涉及到动画基本都可以使用

补间动画，但是会稍微麻烦一些。