animation - 不能使移动的容器逐渐变大，并且从屏幕中心开始变小

Question

我一直在尝试制作一个从左到右过渡的容器，尺寸增加直到到达中心，到达中心后尺寸减小。
我尝试使用两个 Controller 和更多的Tween-s，但未找到结果。

`import 'package:flutter/material.dart';
 import 'package:flutter/animation.dart';

class Basic_animation_view extends StatefulWidget {
  @override
  _Basic_animation_viewState createState() => _Basic_animation_viewState();
}

class _Basic_animation_viewState extends State<Basic_animation_view>
  with TickerProviderStateMixin {
  AnimationController controller;
  Animation<Offset> animation;
  Animation<Size> growAnimation;

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 3))
          ..addListener(() {
            setState(() {});
          });
    animation = Tween<Offset>(begin: Offset(0, 0), end: Offset(5, 0))
        .animate(controller);

    growAnimation =
        Tween<Size>(begin: Size(50.0, 50.0), end: Size(100.0, 100.0))
            .animate(CurvedAnimation(parent: controller,curve: Curves.linear));

    controller.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            SlideTransition(
              position: animation,
              child: Container(***strong text***
                width:growAnimation.value.width,
                height:growAnimation.value.height,
                color: Colors.red,
              ),
            ),
          ],
        ));
  }
}
`

Answer 1

Maybe an animated container class will be closer to what you want. You can find more details using the documented sample with more details found at the source.

// Flutter code sample for

// The following example (depicted above) transitions an AnimatedContainer
// between two states. It adjusts the [height], [width], [color], and
// [alignment] properties when tapped.

import 'package:flutter/material.dart';

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

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selected = !selected;
        });
      },
      child: Center(
        child: AnimatedContainer(
          width: selected ? 200.0 : 100.0,
          height: selected ? 100.0 : 200.0,
          color: selected ? Colors.red : Colors.blue,
          alignment:
              selected ? Alignment.center : AlignmentDirectional.topCenter,
          duration: Duration(seconds: 2),
          curve: Curves.fastOutSlowIn,
          child: FlutterLogo(size: 75),
        ),
      ),
    );
  }
}