animation - 容器高度动画从中间开始

Question

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

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 我希望动画从底部开始，但它从容器的中心开始并在两侧进行动画处理。

Answer 1

从某些点开始缩放动画。您可以用小部件包装您的 Container，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(() {});
     });
}

然后在 build 方法或添加使用 return Widget 的地方，如下所示；

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 用于 Flutter包：https ://pub.dartlang.org/packages/tweenmax

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

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

干杯，