可以使用 Flutter 的变换 class 来动画缩放吗？

Question

我正在尝试制作两个方形容器的动画，以便在点击它们时制作动画以进行缩放。我在网上看到所有这些显示小部件动画的变换 class 示例，但是当我使用变换 class 时，比例只是从它的初始值跳到它的最终值。

我的最终目标是在每次点击时将容器设置为 'bounce' 动画，就像您在 Web 开发中使用 bounce.js 可以做的那样。要理解我的意思，您可以转到http://bouncejs.com，单击左上角的'select preset'，从下拉菜单中单击select果冻，然后单击'play animation'。

这可以用变换完成吗class？

这是我的代码：

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,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

在此先感谢您的帮助！

Answer 1

你需要使用Animations，你可以开始使用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,
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        );
      }
    }

您还可以在此处阅读有关动画的更多信息：https://flutter.dev/docs/development/ui/animations

可以使用 Flutter 的变换 class 来动画缩放吗？

Can you use Flutter's transform class to animate scale?

dart

flutter

flutter-animation