animation - 对容器窗口小部件进行动画处理，使屏幕向左移动

Question

我想知道如何为容器小部件制作动画以使屏幕离开左侧。

我怎么做？

谢谢!

Answer 1

这是您可以使用 SlideTransition 做到的方式

class SlideContainerToTheLeft extends StatefulWidget {
  @override
  _SlideContainerToTheLeftState createState() =>
      _SlideContainerToTheLeftState();
}

class _SlideContainerToTheLeftState extends State<SlideContainerToTheLeft>
    with SingleTickerProviderStateMixin {
  var tween = Tween<Offset>(begin: Offset.zero, end: Offset(-2, 0))
      .chain(CurveTween(curve: Curves.ease));
  AnimationController animationController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    animationController =
        AnimationController(vsync: this, duration: Duration(seconds: 2));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SlideTransition(
          position: animationController.drive(tween),
          child: Container(
            width: 300,
            height: 400,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20), color: Colors.blue),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          animationController.forward();
        },
      ),
    );
  }
}

希望这对您有所帮助。