Как анимировать контейнер / кнопку вертикально вверх и вниз? - PullRequest
Новая
       17

Как анимировать контейнер / кнопку вертикально вверх и вниз?

0 голосов
/ 08 июля 2019

Я пытаюсь оживить центральную кнопку вертикально вверх и вниз, как лифт после нажатия кнопки, но не могу понять, как это сделать. Я использую sequenceAnimations в других местах этой кнопки, поэтому я попытался обернуть его в виджете «Позиционирование» и изменить нижнее смещение в сочетании с 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

1 Ответ

0 голосов
/ 09 июля 2019

Вы можете использовать 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;
                });
              },
            ),
          ),
        ),
      ),
    );
  }
}
...