如何垂直上下动画容器/按钮？

Question

我正在尝试在单击按钮后像电梯一样垂直上下动画中心按钮，但不知道如何去做。我在此按钮上的其他地方使用了 sequenceAnimations，因此我尝试将其包装在 Positioned 小部件中并更改底部偏移量并与 Tween 合作以在值之间循环，不幸的是这会导致 LayoutErrors 和崩溃...

尝试过位置换行。

class LiftPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _LiftPageState();
  }
}

class _LiftPageState extends State<LiftPage> with TickerProviderStateMixin {
  AnimationController _pageLoadController;
  AnimationController _liftImageController;
  SequenceAnimation _liftPageLoadAnimation;
  SequenceAnimation _liftImageAnimation;
  double _screenWidth = 2000.0;
  double _screenHeight = 5000.0;

  @override
  void initState() {
    super.initState();
    initPlayer();

    _pageLoadController = AnimationController(vsync: this);
    _liftImageController = AnimationController(vsync: this);

    _liftImageAnimation = SequenceAnimationBuilder()
        .addAnimatable(
          animatable: Tween<double>(
            begin: 0,
            end: _screenHeight,
          ),
          from: Duration(seconds: 0),
          to: Duration(seconds: _timeForLiftUp),
          tag: "liftGoingUp",
        )
        .animate(_liftImageController);

    _liftPageLoadAnimation = SequenceAnimationBuilder()
        .addAnimatable(
          animatable: ColorTween(
            begin: Color(0xfff665c6),
            end: Color(0xffF599E9),
          ),
          from: Duration(seconds: 0),
          to: Duration(seconds: 4),
          tag: "color",
        )
        .addAnimatable(
          animatable: Tween<double>(
            begin: 125,
            end: 0,
          ),
          from: Duration(seconds: 0),
          to: Duration(seconds: 2),
          tag: "border",
        )
        .addAnimatable(
          animatable: Tween<double>(
            begin: 100,
            end: _screenHeight,
          ),
          from: Duration(seconds: 0),
          to: Duration(seconds: 4),
          tag: "height",
        )
        .addAnimatable(
          animatable: Tween<double>(
            begin: 100,
            end: _screenWidth,
          ),
          from: Duration(seconds: 0),
          to: Duration(seconds: 4),
          tag: "width",
        )
        .addAnimatable(
          animatable: ColorTween(
            begin: Colors.white,
            end: Color(0xffF599E9),
          ),
          from: Duration(seconds: 0),
          to: Duration(seconds: 1),
          tag: "iconFade",
        )
        .addAnimatable(
          animatable: ColorTween(
            begin: Color(0x00000000),
            end: Color(0xfff665c6),
          ),
          from: Duration(milliseconds: 2000),
          to: Duration(milliseconds: 2300),
          tag: "circleFadeIn",
        )
        .addAnimatable(
          animatable: ColorTween(
            begin: Color(0x00ffffff),
            end: Color(0xfff665c6),
          ),
          from: Duration(milliseconds: 2500),
          to: Duration(milliseconds: 3500),
          tag: "audioControlsFadeIn",
        )
        .animate(_pageLoadController);
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> childrenStack = <Widget>[
      Scaffold(
        body: AnimatedBuilder(
            animation: _pageLoadController,
            builder: (BuildContext context, Widget child) {
              return Stack(
                children: <Widget>[
                  Center(child: _placeButton()),
                  Center(
                    child: _placeCircle(),
                  ),
                  Align(
                    alignment: Alignment.topCenter,
                    child: _playBackControls(),
                  ),
                ],
              );
            }),
      ),
    ];

    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Center(
          child: Text('Lift Page'),
        ),
        backgroundColor: Color(0xfff665c6),
      ),
      body: Center(child: Stack(children: childrenStack)),
    ));
  }

  GestureDetector _placeCircle() {
    return GestureDetector(
      onTap: () {
        final _status = _pageLoadController.status;
        if (_status == AnimationStatus.completed) {
          _pageLoadController.reverse();
          _liftPage_liftButtonTapped();
        } else {
          _pageLoadController.forward();
          _liftPage_liftButtonTapped();
        }
      },
      child: Container(
        height: 100,
        width: 100,
        decoration: BoxDecoration(
          color: _liftPageLoadAnimation["circleFadeIn"].value,
          borderRadius: BorderRadius.circular(125.0),
        ),
      ),
    );
  }

我正在尝试为粉红色圆圈/按钮上下设置动画。 https://imgur.com/a/Iu7i5uw

Answer 1

你可以使用AnimatedContainer，这里是一个例子：

class UpDown extends StatefulWidget {
  @override
  UpDownState createState() {
    return UpDownState();
  }
}

class UpDownState extends State<UpDown> {
  bool up = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedContainer(
          padding: EdgeInsets.all(10.0),
          duration: Duration(milliseconds: 250), // Animation speed
          transform: Transform.translate(
            offset: Offset(0, up == true ? -100 : 0), // Change -100 for the y offset
          ).transform,
          child: Container(
            height: 50.0,
            child: FloatingActionButton(
              backgroundColor: Colors.red,
              child: Icon(Icons.ac_unit),
              onPressed: () {
                setState(() {
                  up = !up;
                });
              },
            ),
          ),
        ),
      ),
    );
  }
}