容器高度动画从中间开始答案

【问题标题】：Container height Animation starts from the middle容器高度动画从中间开始
【发布时间】：2018-05-08 06:57:07
【问题描述】：

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() => CorrectWrongOverlayState();
}

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

  @override
  void initState() {
    super.initState();
    _iconAnimationController = AnimationController(
        duration: Duration(seconds: 3), vsync: this);
    _iconAnimation = 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 Material(
      color: Colors.black54,
      child: InkWell(
        onTap: () => widget._onTap(),
        child: Padding(
          padding: const EdgeInsets.all(18.0),
          child: Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    width: 80.0,
                    height: 200.0 * _iconAnimation.value,
                    color: Colors.green,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    width: 80.0,
                    height: 200.0,
                    color: Colors.green,
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

我正在尝试在 Flutter 中实现这种带有高度增长动画的 UI 我希望动画从底部开始，但它从容器的中心开始并在两侧设置动画。

【问题讨论】：

标签： animation dart flutter flutter-layout

【解决方案1】：

从某些点开始缩放动画。您可以使用 Align 小部件包装您的 Container，并简单地给出某些起始位置。

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

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

【讨论】：

【解决方案2】：

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

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

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

干杯，

【讨论】：