Flutter 零基础入门（四十三）：Flutter 动画基础 —— 动态交互与过渡效果

LarryLan

发布于 2026-03-05 17:24:37

Flutter 动画基础 —— 动态交互与过渡效果

到目前为止，你已经掌握了：

多页面 App 架构与导航（TabBar / BottomNavigationBar / 命名路由）
列表刷新与分页
用户操作反馈（SnackBar / AlertDialog）
App 美化（主题、颜色、字体）

但是，一个静态页面的 App 很无趣。 Flutter 提供了丰富的动画组件，让 UI 更加生动。

一、Flutter 动画分类

类型	组件	说明
隐式动画	AnimatedContainer, AnimatedOpacity, AnimatedPadding, AnimatedAlign	属性变化自动过渡动画，无需 AnimationController
显式动画	AnimationController + Tween + AnimatedBuilder	完全可控动画，适合复杂效果
页面过渡	PageRouteBuilder, Hero	页面切换动画，元素过渡动画

本篇先从 隐式动画 入门。

二、AnimatedContainer

1️⃣ 基本用法

class AnimatedContainerDemo extends StatefulWidget{
@override
  _AnimatedContainerDemoState createState() => _AnimatedContainerDemoState();
}

class _AnimatedContainerDemoState extends State<AnimatedContainerDemo> {
double _width = 100;
double _height = 100;
  Color _color = Colors.blue;

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedContainer 示例')),
      body: Center(
        child: AnimatedContainer(
          width: _width,
          height: _height,
          color: _color,
          duration: Duration(seconds: 1),
          curve: Curves.easeInOut,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _width = _width == 100 ? 200 : 100;
            _height = _height == 100 ? 200 : 100;
            _color = _color == Colors.blue ? Colors.orange : Colors.blue;
          });
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

📌 功能解析：

AnimatedContainer 自动根据属性变化生成动画
duration → 动画持续时间
curve → 动画曲线
点击 FloatingActionButton 切换状态 → 自动过渡动画

三、AnimatedOpacity

实现淡入淡出效果：

AnimatedOpacity(
  opacity: _visible ? 1.0 : 0.0,
  duration: Duration(seconds: 1),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.green,
  ),
)

📌 配合 setState 切换 _visible，即可实现淡入淡出动画

四、AnimatedAlign

实现位置平滑移动：

AnimatedAlign(
  alignment: _align,
  duration: Duration(seconds: 1),
  child: FlutterLogo(size: 80),
)
onPressed: () {
  setState(() {
    _align = _align == Alignment.topLeft ? Alignment.bottomRight : Alignment.topLeft;
  });
}

📌 平滑移动元素到不同位置

五、显式动画入门

1️⃣ AnimationController + Tween + AnimatedBuilder

class ScaleAnimationDemo extends StatefulWidget {
  @override
  _ScaleAnimationDemoState createState() => _ScaleAnimationDemoState();
}

class _ScaleAnimationDemoState extends State<ScaleAnimationDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    _animation = Tween<double>(begin: 0, end: 1).animate(_controller);
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('显式动画示例')),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Transform.scale(
              scale: _animation.value,
              child: FlutterLogo(size: 100),
            );
          },
        ),
      ),
    );
  }
}

📌 功能解析：

AnimationController 控制动画时长与播放
Tween 设置动画开始/结束值
AnimatedBuilder 构建动画 UI

六、页面过渡动画

1️⃣ Hero 动画

Hero(
  tag: 'logo',
  child: FlutterLogo(size: 80),
)

在跳转页面也使用相同 tag，即可实现元素平滑过渡

2️⃣ PageRouteBuilder 自定义页面切换

Navigator.push(context, PageRouteBuilder(
  pageBuilder: (context, animation, secondaryAnimation) => DetailPage(),
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    return FadeTransition(opacity: animation, child: child);
  },
));

📌 页面切换时淡入淡出效果