情绪气象站应用

---

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图

1.1 应用简介

情绪气象站是一款将抽象情绪转化为具象天气动画的创意应用。核心理念是"心情如天气，变化无常"——用户选择心情，应用便将其转化为对应的天气动画效果：开心时阳光灿烂，难过时细雨绵绵，愤怒时电闪雷鸣，焦虑时狂风呼啸，疲惫时雾气朦胧。

应用采用CustomPainter实现6种独特的天气动画效果，每种天气都有专属的视觉元素和动画循环。特别设计了"撑伞"功能——当用户选择"难过"心情时，可以点击雨伞按钮为自己撑起一把伞，获得情感上的慰藉和保护感。这种将情绪具象化的设计，让用户更容易感知和理解自己的情绪状态，同时也增添了趣味性和互动性。

1.2 核心功能

功能模块	功能描述	实现方式
心情选择	6种心情类型	Emoji选择器
天气动画	6种天气效果	CustomPainter
撑伞功能	雨天时撑伞	悬浮按钮
历史记录	心情记录存档	内存存储
统计分析	心情分布	数据聚合
每日提醒	定时提醒	系统通知

1.3 心情与天气映射

心情	表情	天气	背景渐变	动画元素
开心	😊	晴天	天蓝→金黄	太阳、光芒、飞鸟
平静	😌	多云	浅蓝→灰蓝	云朵飘动
难过	😢	下雨	深灰→暗灰	雨滴、水花、云朵
愤怒	😠	雷暴	深红→暗红	闪电、乌云、暴雨
焦虑	😰	大风	靛蓝→深蓝	风线、落叶、云朵
疲惫	😴	雾天	灰色→深灰	雾气、朦胧效果

1.4 技术栈

技术领域	技术选型	版本要求
开发框架	Flutter	>= 3.0.0
编程语言	Dart	>= 2.17.0
设计规范	Material Design 3	-
动画系统	AnimationController	-
自定义绘制	CustomPainter	-
目标平台	鸿蒙OS	API 21+

1.5 项目结构

lib/
└── main_mood_weather.dart
    ├── MoodWeatherApp           # 应用入口
    ├── MainScreen               # 主屏幕
    ├── WeatherPainter           # 天气绘制器
    ├── UmbrellaPainter          # 雨伞绘制器
    ├── MoodType                 # 心情枚举
    ├── MoodEntry                # 心情记录模型
    ├── MoodStats                # 统计数据模型
    ├── MoodStorage              # 存储管理器
    ├── HistoryPage              # 历史页面
    ├── StatsPage                # 统计页面
    └── SettingsPage             # 设置页面

---

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 心情选择流程

---

三、核心模块设计

3.1 心情枚举设计

enum MoodType {
  happy('开心', '晴天', '😊'),
  calm('平静', '多云', '😌'),
  sad('难过', '下雨', '😢'),
  angry('愤怒', '雷暴', '😠'),
  anxious('焦虑', '大风', '😰'),
  tired('疲惫', '雾天', '😴');

  final String chineseName;
  final String weatherName;
  final String emoji;

  const MoodType(this.chineseName, this.weatherName, this.emoji);
}

3.2 天气绘制器

3.2.1 绘制器结构

class WeatherPainter extends CustomPainter {
  final MoodType mood;
  final double animation;

  @override
  void paint(Canvas canvas, Size size) {
    switch (mood) {
      case MoodType.happy: _drawSunny(canvas, size); break;
      case MoodType.calm: _drawCloudy(canvas, size); break;
      case MoodType.sad: _drawRainy(canvas, size); break;
      case MoodType.angry: _drawStormy(canvas, size); break;
      case MoodType.anxious: _drawWindy(canvas, size); break;
      case MoodType.tired: _drawFoggy(canvas, size); break;
    }
  }
}

3.2.2 各天气效果

天气	绘制元素	动画效果
晴天	太阳、光芒、飞鸟	光芒旋转、飞鸟飞翔
多云	云朵组	云朵水平飘动
下雨	云朵、雨滴、水花	雨滴下落、水花溅起
雷暴	乌云、闪电、暴雨	闪电闪烁、暴雨倾盆
大风	风线、落叶、云朵	风线流动、落叶飘飞
雾天	雾气层、朦胧圆	雾气流动、朦胧效果

3.3 雨伞绘制器

class UmbrellaPainter extends CustomPainter {
  final double animation;

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制伞面（红色渐变）
    // 绘制伞柄（棕色）
    // 绘制弯钩
  }
}

3.4 动画控制

// 天气动画：10秒循环
_weatherController = AnimationController(
  duration: const Duration(seconds: 10),
  vsync: this,
)..repeat();

// 雨伞动画：500毫秒
_umbrellaController = AnimationController(
  duration: const Duration(milliseconds: 500),
  vsync: this,
);

---

四、UI设计规范

4.1 配色方案

心情	背景渐变起始	背景渐变结束
开心	#87CEEB	#FFD700
平静	#B0C4DE	#708090
难过	#4A5568	#2D3748
愤怒	#4A0E0E	#1A0505
焦虑	#5C6BC0	#3949AB
疲惫	#9E9E9E	#616161

4.2 组件规范

4.2.1 主页面布局

┌─────────────────────────────────┐
│  [渐变背景 + 天气动画]           │
│                                 │
│  情绪气象站            [历史]   │
│                                 │
│        ☀️ 太阳动画               │
│        🐦 飞鸟动画               │
│                                 │
│  ┌─────────────────────────┐   │
│  │    今天的心情是          │   │
│  │       开心               │   │
│  │      晴天                │   │
│  │                         │   │
│  │    选择心情              │   │
│  │  😊 😌 😢 😠 😰 😴       │   │
│  └─────────────────────────┘   │
│                    [☂️ 撑伞]    │
└─────────────────────────────────┘

4.3 动画效果

动画	持续时间	效果描述
背景渐变	1秒	平滑过渡
太阳旋转	10秒循环	光芒旋转
雨滴下落	10秒循环	持续下落
闪电闪烁	随机	闪电效果
雨伞展开	500毫秒	缩放淡入

---

五、核心功能实现

5.1 心情选择

void _selectMood(MoodType mood) {
  setState(() {
    _currentMood = mood;
    _showUmbrella = false;
  });
}

5.2 撑伞功能

void _toggleUmbrella() {
  setState(() {
    _showUmbrella = !_showUmbrella;
    if (_showUmbrella) {
      _umbrellaController.forward();
    } else {
      _umbrellaController.reverse();
    }
  });
}

5.3 天气动画渲染

AnimatedBuilder(
  animation: _weatherController,
  builder: (context, child) {
    return CustomPaint(
      painter: WeatherPainter(
        mood: _currentMood,
        animation: _weatherController.value,
      ),
      size: Size.infinite,
    );
  },
)

---

六、情绪心理学知识拓展

6.1 情绪与天气的隐喻

情绪	天气隐喻	心理学解释
开心	晴天	阳光代表温暖、希望、积极
平静	多云	云朵代表柔和、稳定、内敛
难过	下雨	雨水代表泪水、洗涤、释放
愤怒	雷暴	闪电代表爆发、能量、宣泄
焦虑	大风	风代表不安、动荡、失控
疲惫	雾天	雾代表迷茫、模糊、无力

6.2 情绪记录的意义

好处	说明
自我觉察	了解自己的情绪模式
情绪识别	准确命名和区分情绪
压力释放	通过记录释放负面情绪
趋势分析	发现情绪变化规律

6.3 情绪调节策略

情绪	调节策略
开心	分享喜悦、感恩记录
平静	保持冥想、享受当下
难过	允许悲伤、寻求支持
愤怒	深呼吸、运动释放
焦虑	正念练习、分解任务
疲惫	充足休息、减少负担

---

七、扩展功能规划

7.1 后续版本规划

7.2 功能扩展建议

功能	说明
心情日记	记录心情时添加文字描述
照片记录	拍照记录当下状态
音乐推荐	根据心情推荐音乐
呼吸练习	焦虑时引导呼吸放松

---

八、注意事项

8.1 开发注意事项

1. 动画性能：CustomPainter中使用固定随机种子保证一致性
2. 内存管理：及时释放AnimationController
3. 状态同步：切换心情时重置雨伞状态
4. 绘制优化：使用shouldRepaint控制重绘
5. 历史限制：记录最多保存100条

8.2 常见问题

问题	原因	解决方案
动画卡顿	绘制元素过多	减少粒子数量
雨伞不显示	心情不是难过	仅难过时显示
历史记录丢失	内存存储	迁移至持久化存储

---

九、运行说明

9.1 环境要求

环境	版本要求
Flutter SDK	>= 3.0.0
Dart SDK	>= 2.17.0
鸿蒙OS	API 21+

9.2 运行命令

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_mood_weather.dart

# 代码分析
flutter analyze lib/main_mood_weather.dart

---

十、总结

情绪气象站应用通过将心情可视化为天气动画，为用户提供了一种全新的情绪表达方式。应用支持6种心情类型，每种心情对应独特的天气效果：开心时阳光灿烂、平静时云朵飘动、难过时细雨绵绵、愤怒时雷电交加、焦虑时狂风呼啸、疲惫时雾气朦胧。

应用采用深色主题配合动态渐变背景，营造出沉浸式的视觉体验。天气动画通过CustomPainter实现，使用AnimationController驱动持续循环的动画效果。难过心情下特有的撑伞功能，为用户提供了情感上的关怀和互动乐趣。

历史记录功能保存用户的心情轨迹，统计页面展示心情分布和变化趋势，帮助用户了解自己的情绪模式。后续版本计划增加心情日记、照片记录、音乐推荐等功能，为用户提供更完善的情绪管理工具。

心情如天气，记录每一刻的情绪变化！