🎯 核心概念

Flutter 动画基于 声明式UI 和 响应式编程 理念，通过 Widget 树的变化自动触发动画效果。

📚 主要动画类型

1. 隐式动画 (Implicit Animations)

最简单的动画方式，框架自动处理动画细节：

// AnimatedContainer - 最常用的布局动画
AnimatedContainer(
  duration: Duration(milliseconds: 300),
  width: _width,
  height: _height,
  color: _color,
  curve: Curves.easeInOut, // 缓动曲线
)

// AnimatedOpacity - 透明度动画
AnimatedOpacity(
  opacity: _isVisible ? 1.0 : 0.0,
  duration: Duration(milliseconds: 200),
)

// AnimatedPositioned - 位置动画
AnimatedPositioned(
  left: _left,
  top: _top,
  duration: Duration(milliseconds: 500),
)

2. 显式动画 (Explicit Animations)

更精细的控制，需要手动管理 AnimationController：

class MyAnimationWidget extends StatefulWidget {
  @override
  _MyAnimationWidgetState createState() => _MyAnimationWidgetState();
}

class _MyAnimationWidgetState extends State<MyAnimationWidget> 
    with SingleTickerProviderStateMixin {
  
  late AnimationController _controller;
  late Animation<double> _animation;

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Container(
          width: _animation.value,
          height: _animation.value,
          color: Colors.blue,
        );
      },
    );
  }
}

3. Hero 动画

页面间共享元素过渡动画：

// 源页面
Hero(
  tag: 'hero-tag',
  child: Image.network('image-url'),
)

// 目标页面
Hero(
  tag: 'hero-tag',
  child: Image.network('image-url'),
)

⚡ 内置动画组件

交互反馈类

• InkWell - 水波纹点击效果
• InkResponse - 自定义水波纹效果
• AnimatedSwitcher - 子组件切换动画
• FadeTransition - 淡入淡出动画

页面转场类

• PageRouteBuilder - 自定义页面转场
• SlideTransition - 滑动转场
• ScaleTransition - 缩放转场
• RotationTransition - 旋转转场

物理效果类

• ScrollConfiguration - 滚动物理效果
• BouncingScrollPhysics - 弹性滚动
• ClampingScrollPhysics - 阻尼滚动

🎨 动画曲线 (Curves)

Curves.linear          // 线性
Curves.ease            // 标准缓入缓出
Curves.easeIn          // 缓入
Curves.easeOut         // 缓出
Curves.easeInOut       // 缓入缓出
Curves.elasticOut      // 弹性效果
Curves.bounceOut       // 弹跳效果
Curves.decelerate      // 减速效果

🔧 最佳实践

性能优化

1. 优先使用隐式动画 - 减少代码复杂度
2. 合理使用const - 避免不必要的重建
3. 及时释放资源 - dispose中释放AnimationController
4. 避免过度动画 - 保持60fps流畅度

设计原则

1. 遵循Material Design - 使用标准动画时长和曲线
2. 保持一致性 - 相同操作使用相同动画效果
3. 适度使用 - 动画应该增强而非干扰用户体验
4. 考虑无障碍 - 提供关闭动画的选项

📊 Flutter vs Android 对比

Flutter 的动画系统真正体现了"一切皆Widget"的设计哲学，让开发者能够用最少的代码创造出流畅、美观的交互动效。