将所有动画扑向onClick开始

Question

我不习惯动手并尝试通过学习新的小部件来提高自己，而我在使用AnimatedIcons和Animations时，当我分别向其中一个添加两个动画图标和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

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

1. 将SingleTickerProviderStateMixin更改为TickerProviderStateMixin。
2. 为每种动画类型创建不同的AnimationController。
3. 在AnimationController上以正确的动画设置每个void initState()