重新启动应用程序时动画开始

如何解决重新启动应用程序时动画开始

我创建了一个翻转动画。功能是当我点击容器时它翻转。但是我想拥有的是，我只想在调用onTap时翻转容器。但是动画在打开应用程序时开始。我误导了她什么错误，请帮助我解决此问题。我犯了什么错误，请她帮我解决。

class _ChangeContainerState extends State<ChangeContainer>
    with TickerProviderStateMixin {
  Animation animation;
  AnimationController animationController;
  Naming selectedContainer = Naming.three;
  @override
  void initState() {
    animationController =
        AnimationController(duration: Duration(milliseconds: 500),vsync: this);
    animation = Tween(begin: 0.0,end: 1.0).animate(animationController);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    animationController.forward();
    return AnimatedBuilder(
        animation: animationController,builder: (BuildContext context,Widget child) {
          return Scaffold(
            body: Center(
              child: selectedContainer == Naming.one
                  ? GestureDetector(
                      onTap: () {
                        setState(() {
                          selectedContainer = Naming.two;
                          animationController.repeat();
                        });
                      },child: Transform(
                        transform: Matrix4.identity()
                          ..setEntry(3,2,0.002)
                          ..rotateX(pi + (pi * animation.value)),alignment: FractionalOffset.center,child: Container(
                          height: 200,width: 200,color: Colors.green,child: Center(
                            child: Text(
                              'Container 2',style: TextStyle(
                                  fontSize: 30.0,color: Colors.white),),)
                  : selectedContainer == Naming.two
                      ? GestureDetector(
                          onTap: () {
                            setState(() {
                              selectedContainer = Naming.three;
                              animationController.repeat();
                            });
                          },child: Transform(
                            transform: Matrix4.identity()
                              ..setEntry(3,0.002)
                              ..rotateX(pi + (pi * animation.value)),child: Container(
                              height: 200,color: Colors.purpleAccent,child: Center(
                                child: Text(
                                  'Container 3',style: TextStyle(
                                      fontSize: 30.0,)
                      : GestureDetector(
                          onTap: () {
                            setState(() {
                              selectedContainer = Naming.one;
                              animationController.repeat();
                            });
                          },0.002)
                              ..rotateX(
                                pi + (pi * animation.value),color: Colors.yellow,child: Center(
                                child: Text(
                                  'Container 1',style: TextStyle(fontSize: 30.0),);
        });

解决方法

您在init状态下添加的内容将在页面打开后立即运行。因此，您希望animation变量位于onTap方法中。

您将animationController和animation移动到initState方法之外。

完整代码：

class _ChangeContainerState extends State<ChangeContainer>
    with TickerProviderStateMixin {
  Animation animation;
  AnimationController animationController;
  Naming selectedContainer = Naming.three;
  @override
  void initState() {
    
    super.initState();
  }
    animationController =
        AnimationController(duration: Duration(milliseconds: 500),vsync: this);
    animation = Tween(begin: 0.0,end: 1.0).animate(animationController);
  @override
  Widget build(BuildContext context) {
    animationController.forward();
    return AnimatedBuilder(
        animation: animationController,builder: (BuildContext context,Widget child) {
          return Scaffold(
            body: Center(
              child: selectedContainer == Naming.one
                  ? GestureDetector(
                      onTap: () {
                        setState(() {

                          selectedContainer = Naming.two;
                          animationController.repeat();
                        });
                      },child: Transform(
                        transform: Matrix4.identity()
                          ..setEntry(3,2,0.002)
                          ..rotateX(pi + (pi * animation.value)),alignment: FractionalOffset.center,child: Container(
                          height: 200,width: 200,color: Colors.green,child: Center(
                            child: Text(
                              'Container 2',style: TextStyle(
                                  fontSize: 30.0,color: Colors.white),),)
                  : selectedContainer == Naming.two
                      ? GestureDetector(
                          onTap: () {
                            setState(() {
                              selectedContainer = Naming.three;
                              animationController.repeat();
                            });
                          },child: Transform(
                            transform: Matrix4.identity()
                              ..setEntry(3,0.002)
                              ..rotateX(pi + (pi * animation.value)),child: Container(
                              height: 200,color: Colors.purpleAccent,child: Center(
                                child: Text(
                                  'Container 3',style: TextStyle(
                                      fontSize: 30.0,)
                      : GestureDetector(
                          onTap: () {
                            setState(() {
                              selectedContainer = Naming.one;
                              animationController.repeat();
                            });
                          },0.002)
                              ..rotateX(
                                pi + (pi * animation.value),color: Colors.yellow,child: Center(
                                child: Text(
                                  'Container 1',style: TextStyle(fontSize: 30.0),);
        });