# flutter_animation_demo

**Repository Path**: vper/flutter_animation_demo

## Basic Information

- **Project Name**: flutter_animation_demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-01
- **Last Updated**: 2025-12-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Flutter 动画速成演示应用

一个专为Flutter初学者设计的动画演示应用，通过实际案例展示Flutter中常用的动画组件和效果。

## 🎯 项目简介

本项目旨在帮助Flutter开发者快速掌握动画实现技巧，通过简洁明了的代码示例，展示如何在实际应用中使用各种动画组件。

## ✨ 功能特性

### 1. AnimatedContainer 动画
- **点击变色、变大、变圆效果**
- 支持尺寸、颜色、圆角、阴影的平滑过渡
- 使用 `Curves.easeOutBack` 缓动曲线

### 2. AnimatedOpacity / AnimatedPadding 动画
- **平滑显示/隐藏消息内容**
- 透明度与内边距的同步动画
- 优雅的淡入淡出效果

### 3. AnimatedSwitcher 状态切换
- **加载状态与成功状态的平滑切换**
- 自定义过渡效果（缩放 + 淡入淡出）
- 使用 `ValueKey` 确保动画正确执行

### 4. Hero 共享元素动画
- **页面间共享元素的平滑过渡**
- 从列表页到详情页的图标放大效果
- 专业的转场动画体验

## 🚀 快速开始

### 环境要求
- Flutter SDK 3.0+
- Dart 2.17+
- 支持的操作系统：Windows/macOS/Linux

### 安装步骤

1. **克隆项目**
```bash
git clone <项目地址>
cd flutter_animation_demo
```

2. **安装依赖**
```bash
flutter pub get
```

3. **运行应用**
```bash
flutter run
```

## 📱 应用截图

### 主界面
- 包含四个动画演示区域
- 每个区域都有独立的交互按钮
- 实时预览动画效果

### 详情页面
- Hero动画转场效果
- 图标放大展示
- 简洁的界面设计

## 🛠️ 技术栈

- **Flutter 3.0+** - 跨平台UI框架
- **Dart 2.17+** - 编程语言
- **Material Design** - 设计语言

## 📚 核心动画组件

### AnimatedContainer
```dart
AnimatedContainer(
  duration: Duration(milliseconds: 400),
  curve: Curves.easeOutBack,
  width: _isExpanded ? 300 : 100,
  height: _isExpanded ? 150 : 100,
  // ... 其他属性
)
```

### AnimatedOpacity + AnimatedPadding
```dart
AnimatedOpacity(
  opacity: _showMessage ? 1.0 : 0.0,
  duration: Duration(milliseconds: 500),
  child: AnimatedPadding(
    padding: EdgeInsets.only(top: _showMessage ? 30.0 : 0.0),
    duration: Duration(milliseconds: 500),
    // ...
  ),
)
```

### AnimatedSwitcher
```dart
AnimatedSwitcher(
  duration: Duration(milliseconds: 600),
  transitionBuilder: (child, animation) {
    return ScaleTransition(
      scale: animation,
      child: FadeTransition(opacity: animation, child: child),
    );
  },
  // ...
)
```

### Hero
```dart
// 列表页
Hero(
  tag: 'app_logo',
  child: Icon(Icons.flutter_dash, size: 50),
)

// 详情页
Hero(
  tag: 'app_logo', // 相同的tag
  child: Icon(Icons.flutter_dash, size: 150),
)
```

## 🎨 设计特点

- **响应式布局** - 适配不同屏幕尺寸
- **Material Design** - 遵循Google设计规范
- **用户体验优先** - 流畅的动画交互
- **代码可读性** - 清晰的注释和结构

## 🔧 开发指南

### 项目结构
```
lib/
├── main.dart          # 主应用入口和首页
└── detail_screen.dart # 详情页面
```

### 自定义动画
每个动画组件都支持自定义参数：
- `duration` - 动画持续时间
- `curve` - 缓动曲线
- `transitionBuilder` - 自定义过渡效果

### 状态管理
使用Flutter内置的`setState`进行简单的状态管理，适合学习阶段使用。

## 🤝 贡献指南

欢迎提交Issue和Pull Request来改进这个项目！

## 📄 许可证

本项目采用MIT许可证，详见LICENSE文件。

## 🙏 致谢

感谢Flutter社区提供的优秀资源和教程。

---

**开始你的Flutter动画之旅吧！** 🚀