Flutter 框架跨平台鸿蒙开发 - 光的变化
运行效果图光的变化是一款独特的延时摄影记录应用，核心理念是"同一位置记录一年光线变化，做延时摄影"。用户可以在固定的位置定期拍摄照片，记录不同季节、不同时间的光线变化，最终生成延时摄影视频，见证一年中光线的奇妙变化。光线是摄影的灵魂，也是自然界最神奇的现象之一。同一位置在不同季节、不同时间，光线会呈现出截然不同的面貌。春天的柔和、夏天的强烈、秋天的金黄、冬天的清冷，每个季节都有独特的光线特质。通过
·
光的变化应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
光的变化是一款独特的延时摄影记录应用，核心理念是"同一位置记录一年光线变化，做延时摄影"。用户可以在固定的位置定期拍摄照片，记录不同季节、不同时间的光线变化，最终生成延时摄影视频，见证一年中光线的奇妙变化。
光线是摄影的灵魂，也是自然界最神奇的现象之一。同一位置在不同季节、不同时间，光线会呈现出截然不同的面貌。春天的柔和、夏天的强烈、秋天的金黄、冬天的清冷，每个季节都有独特的光线特质。通过本应用，用户可以系统地记录这些变化，创作出令人惊叹的延时摄影作品。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 位置管理 | 添加和管理拍摄位置 | 地点信息+照片列表 |
| 照片拍摄 | 定期拍摄记录光线 | 相机调用+时间戳 |
| 季节识别 | 自动识别当前季节 | 日期计算+枚举映射 |
| 时段判断 | 判断当前时段 | 小时计算+时段枚举 |
| 光线分析 | 分析光线强度和角度 | 传感器数据+算法 |
| 延时摄影 | 生成延时视频 | 照片序列+视频编码 |
1.3 季节分类
| 序号 | 季节 | Emoji | 主题色 | 时间范围 | 光线特点 |
|---|---|---|---|---|---|
| 1 | 春季 | 🌸 | #66BB6A | 3-5月 | 柔和、清新 |
| 2 | 夏季 | ☀️ | #FFA726 | 6-8月 | 强烈、明亮 |
| 3 | 秋季 | 🍂 | #EF5350 | 9-11月 | 金黄、温暖 |
| 4 | 冬季 | ❄️ | #42A5F5 | 12-2月 | 清冷、柔和 |
1.4 时段分类
| 序号 | 时段 | Emoji | 时间范围 | 光线特点 |
|---|---|---|---|---|
| 1 | 黎明 | 🌅 | 5:00-7:00 | 柔和、渐亮 |
| 2 | 上午 | 🌤️ | 7:00-12:00 | 明亮、稳定 |
| 3 | 正午 | ☀️ | 12:00-14:00 | 最强、垂直 |
| 4 | 下午 | 🌤️ | 14:00-18:00 | 斜射、温暖 |
| 5 | 黄昏 | 🌇 | 18:00-20:00 | 金黄、渐暗 |
| 6 | 夜晚 | 🌙 | 20:00-5:00 | 微弱、人工光 |
1.5 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState | - |
| 动画控制 | AnimationController | - |
| 相机功能 | camera | - |
| 视频编码 | video_encoder | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
二、项目结构
lib/
├── main_light_change.dart # 应用主入口
│ ├── LightChangeApp # 根应用组件
│ ├── Season # 季节枚举
│ ├── TimeOfDay # 时段枚举
│ ├── Location # 位置模型
│ ├── PhotoRecord # 照片记录模型
│ └── LightChangeHomePage # 主页面
三、数据模型
3.1 Season 枚举
enum Season {
spring('春季', '🌸', Color(0xFF66BB6A)),
summer('夏季', '☀️', Color(0xFFFFA726)),
autumn('秋季', '🍂', Color(0xFFEF5350)),
winter('冬季', '❄️', Color(0xFF42A5F5));
final String label;
final String emoji;
final Color color;
static Season fromMonth(int month) {
if (month >= 3 && month <= 5) return Season.spring;
if (month >= 6 && month <= 8) return Season.summer;
if (month >= 9 && month <= 11) return Season.autumn;
return Season.winter;
}
}
3.2 TimeOfDay 枚举
enum TimeOfDay {
dawn('黎明', '🌅', 5, 7),
morning('上午', '🌤️', 7, 12),
noon('正午', '☀️', 12, 14),
afternoon('下午', '🌤️', 14, 18),
dusk('黄昏', '🌇', 18, 20),
night('夜晚', '🌙', 20, 5);
final String label;
final String emoji;
final int startHour;
final int endHour;
static TimeOfDay fromHour(int hour) {
for (final time in TimeOfDay.values) {
if (time.startHour <= time.endHour) {
if (hour >= time.startHour && hour < time.endHour) return time;
} else {
if (hour >= time.startHour || hour < time.endHour) return time;
}
}
return TimeOfDay.morning;
}
}
3.3 Location 模型
class Location {
final String id; // 位置唯一标识
String name; // 位置名称
String description; // 位置描述
double latitude; // 纬度
double longitude; // 经度
List<PhotoRecord> photos; // 照片记录列表
DateTime createdAt; // 创建时间
}
3.4 PhotoRecord 模型
class PhotoRecord {
final String id; // 照片唯一标识
final String locationId; // 关联位置ID
final DateTime capturedAt; // 拍摄时间
final String photoUrl; // 照片URL
final int lightIntensity; // 光线强度（0-100）
final double lightAngle; // 光线角度（0-90度）
final String weather; // 天气状况
final Season season; // 季节
final TimeOfDay timeOfDay; // 时段
final String? notes; // 备注
}
四、核心功能实现
4.1 季节识别算法
4.2 时段判断实现
static TimeOfDay fromHour(int hour) {
for (final time in TimeOfDay.values) {
if (time.startHour <= time.endHour) {
if (hour >= time.startHour && hour < time.endHour) return time;
} else {
// 处理跨天的情况（如夜晚 20:00-5:00）
if (hour >= time.startHour || hour < time.endHour) return time;
}
}
return TimeOfDay.morning;
}
4.3 光线强度计算
4.4 延时摄影生成
Future<void> generateTimelapse(Location location) async {
final photos = location.photos.toList()
..sort((a, b) => a.capturedAt.compareTo(b.capturedAt));
// 将照片序列编码为视频
for (final photo in photos) {
// 添加到视频编码器
// 设置帧率、分辨率等参数
}
// 生成最终视频文件
}
4.5 太阳动画效果
_sunController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 2000),
)..repeat(reverse: true);
AnimatedBuilder(
animation: _sunController,
builder: (context, child) {
return Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.orange.withValues(
alpha: 0.3 + (_sunController.value * 0.2)
),
blurRadius: 10 + (_sunController.value * 5),
),
],
),
);
},
)
五、界面设计
5.1 主页面布局
┌─────────────────────────────────────┐
│ ☀️ 光的变化 │
│ 记录一年光线变化 │
├─────────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ 🌸 春季 · 🌤️ 上午 │ │
│ │ │ │
│ │ 已记录 5 张照片 │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ 📍 客厅窗边 📸 4 │ │
│ │ 朝南的窗户，光线充足 │ │
│ │ ───────────────────────── │ │
│ │ 最后记录：1月15日 │ │
│ │ 🌸 春季 │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ 📍 阳台 📸 1 │ │
│ │ 朝东的阳台，早晨光线最佳 │ │
│ │ ───────────────────────── │ │
│ │ 最后记录：6月15日 │ │
│ │ ☀️ 夏季 │ │
│ └─────────────────────────────┘ │
│ │
│ [添加位置] │
└─────────────────────────────────────┘
5.2 位置详情页面
┌─────────────────────────────────────┐
│ ← 客厅窗边 📍 │
│ 4 张照片 │
├─────────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ │ │
│ │ 📸 │ │
│ │ │ │
│ │ 🌸 春季 · 🌤️ 上午 │ │
│ │ │ │
│ └─────────────────────────────┘ │
│ 📅 2024年1月15日 10:30 │
│ ☀️ 光线强度: 85% │
│ 🧭 光线角度: 45° │
│ ☁️ 天气: 晴天 │
│ ───────────────────────── │
│ 备注: 春天的早晨，光线特别柔和 │
│ │
│ ┌─────────────────────────────┐ │
│ │ │ │
│ │ 📸 │ │
│ │ │ │
│ │ ☀️ 夏季 · ☀️ 正午 │ │
│ │ │ │
│ └─────────────────────────────┘ │
│ 📅 2024年6月15日 12:30 │
│ ☀️ 光线强度: 95% │
│ 🧭 光线角度: 60° │
│ ☁️ 天气: 晴天 │
│ │
│ [拍摄记录] │
└─────────────────────────────────────┘
5.3 拍摄记录弹窗
┌─────────────────────────────────────┐
│ 📷 拍摄记录 │
├─────────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ 🌸 春季 · 🌤️ 上午 │ │
│ └─────────────────────────────┘ │
│ │
│ 备注（可选） │
│ ┌─────────────────────────────┐ │
│ │ 记录光线变化... │ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ 取消 │ │ 拍摄 │ │
│ └──────────┘ └──────────┘ │
└─────────────────────────────────────┘
六、动画效果
6.1 太阳脉冲动画
_sunController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 2000),
)..repeat(reverse: true);
AnimatedBuilder(
animation: _sunController,
builder: (context, child) {
return Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.orange.withValues(
alpha: 0.3 + (_sunController.value * 0.2)
),
blurRadius: 10 + (_sunController.value * 5),
),
],
),
);
},
)
6.2 页面渐入动画
_fadeController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 600),
);
FadeTransition(
opacity: _fadeController,
child: _buildPageContent(),
)
七、运行与调试
7.1 运行命令
# 运行到鸿蒙设备
flutter run -d harmony lib/main_light_change.dart
# 运行到Web服务器
flutter run -d web-server -t lib/main_light_change.dart --web-port 8124
# 运行到Windows
flutter run -d windows -t lib/main_light_change.dart
# 代码分析
flutter analyze lib/main_light_change.dart
7.2 功能测试清单
| 测试项 | 测试内容 | 预期结果 |
|---|---|---|
| 添加位置 | 创建新的拍摄位置 | 位置成功添加 |
| 拍摄记录 | 拍摄并记录光线 | 照片成功保存 |
| 季节识别 | 检查季节自动识别 | 正确识别当前季节 |
| 时段判断 | 检查时段自动判断 | 正确判断当前时段 |
| 光线分析 | 检查光线强度计算 | 数据准确合理 |
| 时间线展示 | 查看照片时间线 | 按时间正确排序 |
八、扩展方向
8.1 后端集成
┌─────────────┐ HTTPS ┌─────────────┐
│ 客户端 │ ←─────────────→ │ 服务器 │
└─────────────┘ └─────────────┘
│ │
│ 照片云端存储 │
│ 用户认证 │
│ 延时视频生成 │
│ 数据分析 │
↓ ↓
┌─────────────┐ ┌─────────────┐
│ 本地存储 │ │ 云端数据库 │
└─────────────┘ └─────────────┘
8.2 功能扩展计划
| 版本 | 功能 | 描述 |
|---|---|---|
| v1.1 | 真实相机 | 调用设备相机拍摄 |
| v1.2 | 延时视频 | 自动生成延时摄影视频 |
| v1.3 | 光线分析 | 详细的光线数据分析 |
| v1.4 | 拍摄提醒 | 定时提醒拍摄 |
| v1.5 | 社区分享 | 分享延时摄影作品 |
8.3 高级功能
九、使用场景
9.1 典型使用场景
☀️ 光的变化使用场景 ☀️
| 场景 | 描述 | 拍摄频率 |
|---|---|---|
| 窗边光线 | 记录窗边一年光线变化 | 每日固定时间 |
| 阳台风景 | 记录阳台不同季节的光线 | 每周一次 |
| 户外场景 | 记录户外光线变化 | 每月一次 |
| 室内空间 | 记录室内光线分布 | 不定期 |
| 特殊时刻 | 记录日出日落等特殊时刻 | 特定时间 |
9.2 拍摄建议
┌─────────────────────────────────────────────────────────┐
│ 拍摄建议 │
├─────────────────────────────────────────────────────────┤
│ │
│ 📸 拍摄时间 │
│ • 固定时间拍摄，便于对比 │
│ • 选择光线变化明显的时段 │
│ • 关注日出日落等特殊时刻 │
│ │
│ 📍 拍摄位置 │
│ • 选择固定的拍摄位置 │
│ • 保持相同的拍摄角度 │
│ • 避免移动或改变构图 │
│ │
│ 🌤️ 天气考虑 │
│ • 晴天：光线强烈，对比明显 │
│ • 多云：光线柔和，层次丰富 │
│ • 阴天：光线均匀，适合细节 │
│ │
│ ⏰ 拍摄频率 │
│ • 高频：每日拍摄，记录细节变化 │
│ • 中频：每周拍摄，记录周变化 │
│ • 低频：每月拍摄，记录季节变化 │
│ │
└─────────────────────────────────────────────────────────┘
十、光学原理
10.1 光线变化因素
| 因素 | 影响 | 变化规律 |
|---|---|---|
| 太阳高度角 | 光线强度和角度 | 夏高冬低，午高晨低 |
| 大气散射 | 光线颜色和柔和度 | 晨昏散射强，正午散射弱 |
| 云层遮挡 | 光线强度和均匀度 | 阴天均匀，晴天强烈 |
| 季节变化 | 光线时长和强度 | 夏季长强，冬季短弱 |
| 地理位置 | 光线角度和时长 | 纬度越高，变化越大 |
10.2 光线特性
🌈 光线特性分析 🌈
春季光线（3-5月）
- 特点：柔和、清新、温暖
- 色温：约5500K
- 最佳拍摄：上午9-11点
夏季光线（6-8月）
- 特点：强烈、明亮、对比度高
- 色温：约6000K
- 最佳拍摄：清晨或黄昏
秋季光线（9-11月）
- 特点：金黄、温暖、层次丰富
- 色温：约5000K
- 最佳拍摄：下午3-5点
冬季光线（12-2月）
- 特点：清冷、柔和、偏蓝
- 色温：约6500K
- 最佳拍摄：中午12-2点
十一、摄影技巧
11.1 延时摄影技巧
| 技巧 | 说明 | 效果 |
|---|---|---|
| 固定机位 | 保持相机位置不变 | 便于对比变化 |
| 固定参数 | 使用相同拍摄参数 | 保证一致性 |
| 定时拍摄 | 设置固定拍摄时间 | 形成规律 |
| 稳定支撑 | 使用三脚架固定 | 避免抖动 |
| 充足电量 | 确保设备电量充足 | 完成拍摄 |
11.2 光线捕捉技巧
📸 光线捕捉技巧 📸
-
黄金时刻 - 日出后和日落前1小时
- 光线柔和，色调温暖
- 适合拍摄剪影和逆光
-
蓝调时刻 - 日出前和日落后30分钟
- 天空呈现深蓝色
- 适合拍摄城市夜景
-
正午光线 - 上午11点到下午1点
- 光线强烈，对比度高
- 适合拍摄建筑和风景
-
阴天光线 - 云层遮挡的天气
- 光线均匀，柔和
- 适合拍摄人像和细节
十二、总结
光的变化应用通过"同一位置记录一年光线变化，做延时摄影"的核心理念，为摄影爱好者和光影追逐者提供了一个专业的记录工具。应用涵盖位置管理、照片拍摄、季节识别、时段判断、光线分析、延时摄影六大核心功能，让用户能够系统地记录光线的变化。
应用采用橙色主题，象征阳光和温暖。主页面清晰展示当前季节和时段信息，位置列表展示所有拍摄位置及其照片数量。位置详情页面按时间线展示所有照片记录，每张照片都标注了拍摄时间、季节、时段、光线强度、光线角度等详细信息。
季节识别功能根据当前月份自动判断季节，时段判断功能根据当前小时自动判断时段，为用户提供实时的光线信息。光线分析功能记录光线强度和角度，帮助用户了解光线的变化规律。
应用采用Material Design 3设计规范，遵循Flutter最佳实践，代码结构清晰，易于维护和扩展。后续版本计划增加真实相机调用、延时视频生成、光线数据分析、拍摄提醒、社区分享等功能，为用户提供更完整的延时摄影体验。
通过光的变化应用，用户可以见证一年中光线的奇妙变化，创作出令人惊叹的延时摄影作品，感受大自然的神奇魅力。
记录光线变化，见证时光流转 ☀️
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
5
0- 0
已为社区贡献16条内容
所有评论(0)