Flutter 所有动画开始向前 onClick

Question

我试图通过学习新的小部件来提高自己，在使用 AnimatedIcons 和动画时，我遇到了一个问题，在为每个图标添加了两个动画图标和 InkWell 小部件之后，当我按下其中一个图标时，另一个也开始动画，我怎样才能防止这种情况发生？

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyFirstWidget(),
    );
  }
}

class MyFirstWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyFirstWidgetState();
}

class MyFirstWidgetState extends State<MyFirstWidget>
    with SingleTickerProviderStateMixin {
  bool reverse = false, reverse1 = false;
  Animation animation;
  AnimationController animationController, animationController1;
  @override
  void initState() {
    super.initState();
    animationController =
        new AnimationController(vsync: this, duration: Duration(seconds: 1));
    animation = Tween<double>(begin: 0, end: 2).animate(animationController);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      body: Container(
        decoration: BoxDecoration(
            image: DecorationImage(image: AssetImage("assets/mathware.jpg"),fit: BoxFit.cover)),
        child: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    InkWell(
                      onTap: () {
                        if (reverse == false) {
                          animationController.forward();
                        } else
                          animationController.reverse();
                        reverse = !reverse;
                      },
                      child: AnimatedIcon(
                        icon: AnimatedIcons.home_menu,
                        progress: animation,
                        size: 50,
                        color: Colors.black,
                      ),
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    InkWell(
                      onTap: () {
                        if (reverse1 == false) {
                          animationController1.forward();
                        } else
                          animationController1.reverse();
                        reverse1 = !reverse1;
                      },
                      child: AnimatedIcon(
                        icon: AnimatedIcons.event_add,
                        progress: animation,
                        size: 50,
                        color: Colors.black,
                      ),
                    ),
                  ],
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

要实现此行为，您应该这样做。

将 SingleTickerProviderStateMixin 更改为 TickerProviderStateMixin。
为每种类型的动画创建不同的AnimationController。
在 void initState() 处为每个 AnimationController 设置正确的动画。
为每个动画创建不同的Animation。

将正确的 Aniumation 应用于动画小部件。

class MyFirstWidget extends StatefulWidget {

@override
State<StatefulWidget> createState() => MyFirstWidgetState();

}

class MyFirstWidgetState extends State<MyFirstWidget> with TickerProviderStateMixin {

  bool reverse = false, reverse1 = false;
  Animation animation;
  Animation animation1;
  AnimationController animationController, animationController1;

  @override
  void initState() {
  super.initState();
      animationController = new AnimationController(vsync: this, duration: Duration(seconds: 1));
      animationController1 = new AnimationController(vsync: this, duration: Duration(seconds: 1));
      animation = Tween<double>(begin: 0, end: 2).animate(animationController);
      animation1 = Tween<double>(begin: 0, end: 2).animate(animationController1);
  }

  @override
  Widget build(BuildContext context) {
       return Scaffold(
              backgroundColor: Colors.green,
              body: Container(
                decoration: BoxDecoration(),
                child: Stack(
                  fit: StackFit.expand,
                  children: <Widget>[
                    Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            InkWell(
                              onTap: () {
                                if (reverse == false) {
                                  animationController.forward();
                                } else
                                  animationController.reverse();
                                reverse = !reverse;
                              },
                              child: AnimatedIcon(
                                icon: AnimatedIcons.home_menu,
                                progress: animation,
                                size: 50,
                                color: Colors.black,
                              ),
                            ),
                          ],
                        ),
                    Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    InkWell(
                      onTap: () {
                        if (reverse1 == false) {
                          animationController1.forward();
                        } else
                          animationController1.reverse();
                        reverse1 = !reverse1;
                      },
                      child: AnimatedIcon(
                        icon: AnimatedIcons.event_add,
                        progress: animation1,
                        size: 50,
                        color: Colors.black,
                      ),
                    ),
                  ],
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

Answer 2

嘿，只需将 SingleTickerProviderStateMixin 更改为 TickerProviderStateMixin 并为两者创建 2 个不同的动画。您可以从附件中获得参考

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyFirstWidget(),
    );
  }
}

class MyFirstWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyFirstWidgetState();
}

class MyFirstWidgetState extends State<MyFirstWidget>
  with TickerProviderStateMixin {
  bool reverse = false, reverse1 = false;
  Animation animation1,animation2;
  AnimationController animationController1, animationController2;
  @override
  void initState() {
    super.initState();
    animationController1 = new AnimationController(vsync: this, duration: Duration(seconds: 1));
    animationController2 = new AnimationController(vsync: this, duration: Duration(seconds: 1));
    animation1 = Tween<double>(begin: 0, end: 2).animate(animationController1);
    animation2 = Tween<double>(begin: 0, end: 2).animate(animationController2);

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      backgroundColor: Colors.green,
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          InkWell(
            onTap: () {
              if (reverse == false) {
                animationController1.forward();
              } else
                animationController1.reverse();
              reverse = !reverse;
            },
            child: AnimatedIcon(
              icon: AnimatedIcons.home_menu,
              progress: animation1,
              size: 50,
              color: Colors.black,
            ),
          ),
          InkWell(
            onTap: () {
              if (reverse1 == false) {
                animationController2.forward();
              } else
                animationController2.reverse();
              reverse1 = !reverse1;
            },
            child: AnimatedIcon(
              icon: AnimatedIcons.event_add,
              progress: animation2,
              size: 50,
              color: Colors.black,
            ),
          ),
        ],
      ),
    );
  }
}

Flutter 所有动画开始向前 onClick

Flutter all animations start forward onClick

flutter

flutter-animation