# Time-Lapse

**Repository Path**: chenbool/time-lapse

## Basic Information

- **Project Name**: Time-Lapse
- **Description**: Time-Lapse** 是一款帮助用户创建延时摄影项目的移动应用。通过相机拍摄系列照片，并以直观的方式对比不同时间点的图像变化。无论是记录植物生长、建筑施工还是日出日落，都能轻松捕捉时间流逝的美好瞬间
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-21
- **Last Updated**: 2026-04-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# <img src="https://marklewis01.github.io/timelapse/icon.png" height="50" />&nbsp;&nbsp;Time-Lapse

### 一款简洁优雅的延时摄影应用，用于探索 Expo 和 React Native API。

**Time-Lapse** 是一款帮助用户创建延时摄影项目的移动应用。通过相机拍摄系列照片，并以直观的方式对比不同时间点的图像变化。无论是记录植物生长、建筑施工还是日出日落，都能轻松捕捉时间流逝的美好瞬间。

### [Expo Project Link](https://expo.io/@marklewis01/time-lapse)

## App overview video

<a href="http://www.youtube.com/watch?v=egwMR__ZgnE" target="_blank">
  <img src="https://marklewis01.github.io/timelapse/youtube-thumb.png" alt="A quick video overview" height="400">
</a>

## 技术栈

- **React Native** - 跨平台移动应用框架
- **Expo** - React Native 开发平台，使用的 API 包括：
  - 📷 Camera - 相机拍摄功能
  - 📁 FileSystem - 文件系统操作
  - 📳 Haptics - 触觉反馈
  - 🖼️ ImagePicker - 图片选择器
  - 🗂️ MediaLibrary - 媒体库访问
  - 🔄 ScreenOrientation - 屏幕方向控制
  - 📐 Sensors - 设备传感器（陀螺仪等）
  - 🗃️ SQLite - 本地数据库
- **TypeScript** - 类型安全的 JavaScript
- **React Native Paper** - Material Design 组件库
- **React Navigation** - 页面导航

## 项目结构

```
time-lapse/
├── components/          # 可复用组件
│   ├── Camera/         # 相机相关组件（工具栏、遮罩、闪光灯动画）
│   ├── Drawer/         # 侧边栏抽屉
│   └── Project/        # 项目卡片组件
├── screens/            # 页面屏幕
│   ├── HomeScreen.tsx      # 首页 - 项目列表
│   ├── CameraScreen.tsx    # 相机拍摄页面
│   ├── ProjectScreen.tsx   # 项目详情页面
│   └── CompareScreen.tsx   # 图片对比页面
├── db/                 # 数据库层
│   └── index.ts        # SQLite 数据库操作
├── utils/              # 工具函数
├── assets/             # 静态资源（图标、图片）
├── App.tsx             # 应用入口
└── babel.config.js     # Babel 配置
```

## 功能特性

### 核心功能
- 📁 **多项目管理** - 创建和管理多个延时摄影项目
- 📷 **智能拍摄** - 拍摄时可叠加已有图片作为参考，确保拍摄角度和构图一致
- 🎚️ **图片对比** - 滑动对比不同时间点的图片，直观展示变化过程
- 🗂️ **媒体库集成** - 图片保存至系统媒体库，方便用户查看和分享

### 用户体验
- 🎨 **简洁优雅的界面** - Material Design 设计风格，操作简单直观
- 🌙 **暗黑模式** - 支持深色主题，保护眼睛
- 🌍 **RTL 支持** - 完整支持从右至左的语言（如阿拉伯语、希伯来语）
- 📱 **响应式布局** - 自适应横竖屏切换

### 数据管理
- 💾 **本地 SQLite 数据库** - 安全存储项目信息和图片元数据
- 🔄 **数据持久化** - 应用重启后数据不丢失
- 🔍 **快速检索** - 高效查询项目和图片记录

## 应用截图

|                              创建多个项目                              |                              选择或拍摄照片                              |                              选择图片进行对比                              |
| :--------------------------------------------------------------------: | :------------------------------------------------------------------------: | :--------------------------------------------------------------------------: |
| <img src="https://marklewis01.github.io/timelapse/timelapse-interface-1.png"/> | <img src="https://marklewis01.github.io/timelapse/timelapse-interface-2.png" /> | <img src="https://marklewis01.github.io/timelapse/timelapse-interface-3.png"  /> |
|                            滑动对比图片                             |                                  暗黑模式                                  |                              从右至左布局支持                              |
|  <img src="https://marklewis01.github.io/timelapse/timelapse-compare.png" />   |   <img src="https://marklewis01.github.io/timelapse/timelapse-darkmode.png"/>   |     <img src="https://marklewis01.github.io/timelapse/timelapse-rtl.png" />      |

## 更新说明 (2025-04)

### Expo SDK 54 升级
本项目已从 Expo SDK 37 升级至 **Expo SDK 54**，主要更新内容如下：

#### 核心依赖升级
| 依赖 | 旧版本 | 新版本 |
|------|--------|--------|
| Expo | SDK 37 | SDK 54 |
| React | 16.9.0 | 19.1.0 |
| React Native | 0.61 | 0.81.0 |
| React Navigation | v5 | v7 |
| React Native Reanimated | v1 | v4 |

#### 破坏性变更修复
- **AsyncStorage**: 从 `react-native` 迁移至 `@react-native-async-storage/async-storage`
- **Updates API**: 从 `expo` 迁移至 `expo-updates` 独立包
- **ImagePicker 类型**: `ImageInfo` 类型已更新为 `ImagePickerAsset`
- **Babel 配置**: 添加 `react-native-worklets/plugin` 以支持 Reanimated v4

#### 新特性启用
- ✅ 新架构 (New Architecture) 已启用
- ✅ React Compiler 实验性支持 (已配置，可按需启用)

#### 运行项目
```bash
npm install
npx expo start
```

---

## 总结与展望

这款应用看似简单，但其主要目的是熟悉 React Native 和 Expo 框架 —— 应用本身的功能其实是次要的。

### 未来可能的功能
- 📤 **分享功能** - 允许用户分享对比图片
- 🎬 **视频生成** - 将多张图片合成为延时摄影视频

> 💡 **技术探索**：曾研究使用 React Native FFMpeg 库进行视频拼接，但这需要退出 Expo 的托管工作流。未来可能会考虑构建服务端渲染服务来处理视频生成，不过这不在当前项目范围内。

---

## Final Thoughts

The app could seem trivial in nature, however the purpose was to get acquainted with React Native and the Expo framework - the purpose of the app was secondary.

Saying the above, possible further development could be through allowing users to 'share' comparison images, or even generate timelapse videos through stitching multiple images. I did investigate stitching together videos using a React-Native FFMpeg library, however this would require ejecting from Expo, as such, it wasn't an ideal step in the project. I would consider building a server-side service which would perform the video rendering component, however again, for now that is not in the intended project scope.