Dart 您可以使用颤振的变换类来设置缩放动画吗？

我正在尝试设置两个方形容器的动画，这样当它们被轻触时，它们就会按比例设置动画。我在网上看到了所有这些显示小部件动画的变换类示例，但是当我使用变换类时，比例只是从其初始值跳到其最终值

我的最终目标是在每次点击容器时将其设置为“bounce”，就像在web开发中使用bounce.js一样。要理解我的意思，请单击左上角的“选择预设”，从下拉菜单中选择“果冻”，然后单击“播放动画”

这可以通过transform类完成吗

这是我的密码：

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
}

var squareScaleA = 0.5;
var squareScaleB = 0.5;

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Bounce Example"),
      ),
      body: Stack(
        children: <Widget>[
          Container(
            width: 300.0,
            height: 150.0,
            color: Colors.yellowAccent,
          ),
          Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  GestureDetector(
                    onTap: () {
                      setState(() {
                        squareScaleA = 1.0;
                      });
                    },
                    child: Transform.scale(
                      scale: squareScaleA,
                      child: Container(
                        width: 150.0,
                        height: 150.0,
                        color: Colors.green,
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      setState(() {
                        squareScaleB = 1.0;
                      });
                    },
                    child: Transform.scale(
                      scale: squareScaleB,
                      child: Container(
                        width: 150.0,
                        height: 150.0,
                        color: Colors.blue,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

提前感谢您的帮助

您需要使用动画，您可以开始使用AnimationController。它非常简单，我修复了您的示例：

    class _MyHomePageState extends State<TestingNewWidget>
        with TickerProviderStateMixin {
      var squareScaleA = 0.5;
      var squareScaleB = 0.5;
      AnimationController _controllerA;
      AnimationController _controllerB;

      @override
      void initState() {
        _controllerA = AnimationController(
            vsync: this,
            lowerBound: 0.5,
            upperBound: 1.0,
            duration: Duration(seconds: 1));
        _controllerA.addListener(() {
          setState(() {
            squareScaleA = _controllerA.value;
          });
        });
        _controllerB = AnimationController(
            vsync: this,
            lowerBound: 0.5,
            upperBound: 1.0,
            duration: Duration(seconds: 1));
        _controllerB.addListener(() {
          setState(() {
            squareScaleB = _controllerB.value;
          });
        });
        super.initState();
      }

      @override
      void dispose() {
        _controllerA.dispose();
        _controllerB.dispose();
        super.dispose();
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Bounce Example"),
          ),
          body: Stack(
            children: <Widget>[
              Container(
                width: 300.0,
                height: 150.0,
                color: Colors.yellowAccent,
              ),
              Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      GestureDetector(
                        onTap: () {
                          if (_controllerA.isCompleted) {
                            _controllerA.reverse();
                          } else {
                            _controllerA.forward(from: 0.0);
                          }
                        },
                        child: Transform.scale(
                          scale: squareScaleA,
                          child: Container(
                            width: 150.0,
                            height: 150.0,
                            color: Colors.green,
                          ),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          if (_controllerB.isCompleted) {
                            _controllerB.reverse();
                          } else {
                            _controllerB.forward(from: 0.0);
                          }
                        },
                        child: Transform.scale(
                          scale: squareScaleB,
                          child: Container(
                            width: 150.0,
                            height: 150.0,
                            color: Colors.blue,
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        );
      }
    }

---

您也可以在此处阅读有关动画的更多信息：

非常感谢您的帮助！