Flutter Container height动画从中间开始

Question

Flutter Container高度动画从中间开始，但我需要它从底部开始这里是我的代码

import 'dart:math';
import 'package:flutter/material.dart';

class CorrectWrongOverlay extends StatefulWidget {
  final bool _isCorrect;
  final VoidCallback _onTap;
  final double percentR;
  final double percentW;

  CorrectWrongOverlay(
      this._isCorrect, this.percentR, this.percentW, this._onTap);

  @override
  State createState() => new CorrectWrongOverlayState();
}

class CorrectWrongOverlayState extends State<CorrectWrongOverlay>
    with SingleTickerProviderStateMixin {
  Animation<double> _iconAnimation;
  AnimationController _iconAnimationController;

  @override
  void initState() {
    super.initState();
    _iconAnimationController = new AnimationController(
        duration: new Duration(seconds: 3), vsync: this);
    _iconAnimation = new CurvedAnimation(
        parent: _iconAnimationController, curve: Curves.fastOutSlowIn);
    _iconAnimation.addListener(() => this.setState(() {}));
    _iconAnimationController.forward();
  }

  @override
  void dispose() {
    _iconAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Material(
      color: Colors.black54,
      child: new InkWell(
        onTap: () => widget._onTap(),
        child: new Padding(
          padding: const EdgeInsets.all(18.0),
          child: new Center(
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                new Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: new Container(
                    width: 80.0,
                    height: 200.0 * _iconAnimation.value,
                    color: Colors.green,
                  ),
                ),
                new Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: new Container(
                    width: 80.0,
                    height: 200.0,
                    color: Colors.green,
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

我正在尝试使用高度增长动画来实现这种用户界面.Flut我希望动画从底部开始，但它从容器的中心开始，并将其动画到两侧。

Answer 1

从某些点开始缩放动画。您可以使用Align小部件包装容器，并简单地指定某些开始位置。

定义您的控制器和动画变量；

  AnimationController animationController;
  Animation<double> tween;

使用initState方法初始化它们；

   @override
  void initState() {
     super.initState();
     animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 800));
     tween = Tween<double>(begin:0,end:1).animate(CurvedAnimation(parent: animationController, curve: Curves.easeIn));
     animationController.addListener(() {
       setState(() {});
     });
}

然后在构建方法中或您添加到任何地方使用返回小部件，如下所示；

Widget animatedContainer(){
  return Align(
    alignment: Alignment.topRight,// .topCenter, .topLeft, .bottomLeft, bottomCenter...etc
    child: Container(
      width: (size.width * tween.value).abs(),
      height: (200 *tween.value).abs(),
      color:Colors.red
      ),
  );
}

Answer 2

您可以使用 TweenMax for Flutter 软件包：https://pub.dartlang.org/packages/tweenmax

这里是一个示例：https://github.com/mrgoonie/flutter_tweenmax/blob/master/lib/screens/animated_column_chart.dart

单击底部按钮为这些栏设置动画。

干杯