🙌🏻 立即获取「wordway」,由社区驱动的背单词应用,基于 Flutter 开发。🙌🏻

PositionedTransition

Edit this page

Animated version of Positioned which takes a specific Animation<RelativeRect> to transition the child’s position from a start position to an end position over the lifetime of the animation.

Example

final RelativeRectTween relativeRectTween = RelativeRectTween(
  begin: RelativeRect.fromLTRB(40, 40, 0, 0),
  end: RelativeRect.fromLTRB(0, 0, 40, 40),
);

AnimationController _controller;

bool _first = true;

initState() {
  _controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 1),
  );
  super.initState();
}


Widget build(BuildContext context) {
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Container(
        color: Colors.blue[50],
        height: 300,
        child: Stack(
          children: <Widget>[
            PositionedTransition(
              rect: relativeRectTween.animate(_controller),
              child: Container(
                child: Container(
                  width: 200,
                  height: 200,
                  padding: EdgeInsets.all(20),
                  child: FlutterLogo(),
                ),
              ),
            ),
          ],
        ),
      ),
      SizedBox(height: 20,),
      FlatButton(
        onPressed: () {
          if (_first) {
            _controller.forward();
          } else {
            _controller.reverse();
          }
          _first = !_first;
        },
        child: Text(
          "CLICK ME!",
        ),
      )
    ],
  );
}

Related Links