单击 flutter 后使小部件旋转 90 度

Question

我想用flutter代码让图片在点击后旋转90度

点击第 1 和第 4 个，它与动画效果配合得很好但是

点击2号和3号，旋转无动画效果。 <<<-- 这是问题。我希望它旋转时有动画效果。

我尝试了一些其他的实现方式，但没有用。

谁能帮我解释一下哪里错了？

我使用了如下代码：

import 'dart:math';    
import 'package:flutter/material.dart';    
void main() => runApp(MyApp());    
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}    
class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  AnimationController animationController1;
  AnimationController animationController2;
  AnimationController animationController3;
  AnimationController animationController4;
  Animation<double> animation1;
  Animation<double> animation2;
  Animation<double> animation3;
  Animation<double> animation4;
  int rotateTime = 0;    
  @override
  void initState() {
    animationController1 =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    animationController2 =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    animationController3 =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    animationController4 =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    animation1 =
        Tween<double>(begin: 0, end: pi / 2).animate(animationController1);
    animation2 =
        Tween<double>(begin: pi / 2, end: pi).animate(animationController2);
    animation3 =
        Tween<double>(begin: pi, end: -pi / 2).animate(animationController3);
    animation4 =
        Tween<double>(begin: -pi / 2, end: 0).animate(animationController4);    
    super.initState();
  }    
  @override
  void dispose() {
    super.dispose();
    animationController1?.dispose();
  }    
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        child: GestureDetector(
            onTap: _rotateChildContinuously,
            child:
                RotateTrans(Image.asset('images/smile.png'), buildAnimation())),
      ),
    );
  }    
  _rotateChildContinuously() {
    print(rotateTime);
    setState(() {
    rotateTime++;
    if (rotateTime == 1) {
      animationController1.forward(from: 0);
    } else if (rotateTime == 2) {
      animationController2.forward(from: pi / 2);
    } else if (rotateTime == 3) {
      animationController3.forward(from: pi);
    } else if (rotateTime == 4) {
      animationController4.forward(from: -pi / 2);
    }

    });
  }    
  Animation buildAnimation() {
    if (rotateTime == 1 || rotateTime == 0) {
      return animation1;
    } else if (rotateTime == 2) {
      return animation2;
    } else if (rotateTime == 3) {
      return animation3;
    } else if (rotateTime == 4) {
      rotateTime = 0;
      return animation4;
    }
  }
}    
class RotateTrans extends StatelessWidget {
  final Widget child;
  final Animation<double> animation;    
  RotateTrans(this.child, this.animation);    
  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animation,
      child: child,
      builder: (context, child) {
        return Container(
          child: Transform.rotate(
            angle: animation.value,
            child: Container(
              child: child,
            ),
          ),
        );
      },
    );
  }
}

感谢您的宝贵时间！！！

Answer 1

向前更改(from:0) 或仅 animationControllerX.forward() 不带 from 参数

if (rotateTime == 1) {
        animationController1.forward(from:0);
      } else if (rotateTime == 2) {
        animationController2.forward(from:0);
      } else if (rotateTime == 3) {
        animationController3.forward(from:0);
      } else if (rotateTime == 4) {
        animationController4.forward(from:0);
      }

改变动画公式

    animation1 =
        Tween<double>(begin: 0, end: pi / 2).animate(animationController1);
    animation2 =
        Tween<double>(begin: pi / 2, end: pi).animate(animationController2);
    animation3 =
        Tween<double>(begin: pi, end: pi + pi/2).animate(animationController3);
    animation4 =
        Tween<double>(begin: pi + pi/2, end: pi + pi).animate(animationController4);

完整代码

import 'dart:math';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  AnimationController animationController1;
  AnimationController animationController2;
  AnimationController animationController3;
  AnimationController animationController4;
  Animation<double> animation1;
  Animation<double> animation2;
  Animation<double> animation3;
  Animation<double> animation4;
  int rotateTime = 0;

  @override
  void initState() {
    animationController1 =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    animationController2 =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    animationController3 =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    animationController4 =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    animation1 =
        Tween<double>(begin: 0, end: pi / 2).animate(animationController1);
    animation2 =
        Tween<double>(begin: pi / 2, end: pi).animate(animationController2);
    animation3 =
        Tween<double>(begin: pi, end: pi + pi/2).animate(animationController3);
    animation4 =
        Tween<double>(begin: pi + pi/2, end: pi + pi).animate(animationController4);
    super.initState();
  }
  @override
  void dispose() {
    super.dispose();
    animationController1?.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        child: GestureDetector(
            onTap: _rotateChildContinuously,
            child:
            RotateTrans(Image.asset('assets/images/smile.png'), buildAnimation())),
      ),
    );
  }
  _rotateChildContinuously() {
    print(rotateTime);
    setState(() {
      rotateTime++;
      if (rotateTime == 1) {
        animationController1.forward(from:0);
      } else if (rotateTime == 2) {
        animationController2.forward(from:0);
      } else if (rotateTime == 3) {
        animationController3.forward(from:0);
      } else if (rotateTime == 4) {
        animationController4.forward(from:0);
      }

    });
  }
  Animation buildAnimation() {
    if (rotateTime == 1 || rotateTime == 0) {
      return animation1;
    } else if (rotateTime == 2) {
      return animation2;
    } else if (rotateTime == 3) {
      return animation3;
    } else if (rotateTime == 4) {
      rotateTime = 0;
      return animation4;
    }
  }
}
class RotateTrans extends StatelessWidget {
  final Widget child;
  final Animation<double> animation;
  RotateTrans(this.child, this.animation);
  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animation,
      child: child,
      builder: (context, child) {
        return Container(
          child: Transform.rotate(
            angle: animation.value,
            child: Container(
              child: child,
            ),
          ),
        );
      },
    );
  }
}

单击 flutter 后使小部件旋转 90 度

make widget rotate 90 degree after clicking in flutter

flutter

flutter-animation