AlignTransition（子控件动画）

laying_1230

于 2021-06-17 11:46:54 发布

阅读量250

点赞数

分类专栏： flutter实战

本文链接：https://blog.youkuaiyun.com/qq_34511364/article/details/117988030

版权

flutter实战专栏收录该内容

15 篇文章

订阅专栏

博客介绍了如何使用AlignTransition在Flutter中创建子控件的位置变化动画，并提供了示例代码和实际效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AlignTransition

对AlignTransition子控件位置变换动画，用法如下：

@override
  void initState() {
    _animationController =
        AnimationController(duration: Duration(seconds: 2), vsync: this);
    _animation = Tween<AlignmentGeometry>(
            begin: Alignment.topLeft, end: Alignment.bottomRight)
        .animate(_animationController);

    //开始动画
    _animationController.forward();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: 200,
      color: Colors.blue,
      child: AlignTransition(
        alignment: _animation,
        child: Container(
          height: 30,
          width: 30,
          color: Colors.red,
        ),
      ),
    );
  }

效果如下：