dart - 可以使用 Flutter 的变换类来动画缩放吗？

Question

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

我的最终目标是让容器在每次被点击时都“弹跳”，就像您在 Web 开发中使用 bounce.js 可以做的那样。要理解我的意思你可以去http://bouncejs.com ，点击左上角的“选择预设”，在下拉菜单中选择果冻，点击“播放动画”。

这可以用转换类来完成吗？

这是我的代码:

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