Spaces:
Running
Running
libra: 计划/大纲/步骤 README
Browse files- README.md +7 -0
- libra/README.md +91 -0
README.md
CHANGED
|
@@ -8,6 +8,13 @@ app_file: index.html
|
|
| 8 |
pinned: false
|
| 9 |
---
|
| 10 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 11 |
<!-- solana-clock:start -->
|
| 12 |
# ⏱️ 项目五(全新制作):SOLANA —— 给区块链装上时钟的人(solana-clock/)
|
| 13 |
|
|
|
|
| 8 |
pinned: false
|
| 9 |
---
|
| 10 |
|
| 11 |
+
<!-- libra:start -->
|
| 12 |
+
# ♎ 项目六(全新制作):天秤座 —— 在左右之间(libra/)
|
| 13 |
+
|
| 14 |
+
> 完整计划、大纲、步骤与进度看板见 **[`libra/README.md`](libra/README.md)**。打开 `libra/index.html` 即可观看。
|
| 15 |
+
<!-- libra:end -->
|
| 16 |
+
|
| 17 |
+
|
| 18 |
<!-- solana-clock:start -->
|
| 19 |
# ⏱️ 项目五(全新制作):SOLANA —— 给区块链装上时钟的人(solana-clock/)
|
| 20 |
|
libra/README.md
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# ♎ 项目六(全新制作):天秤座 —— 在左右之间(libra/)
|
| 2 |
+
|
| 3 |
+
> 用一支 **约 3 分钟** 的网页动画视频,生动地讲解黄道十二星座中的 **天秤座 Libra**:
|
| 4 |
+
> 星空坐标、真实星图、名字的来历、岁差与秋分点、正义女神的神话、星座文化中的"天秤性格"、深空彩蛋。
|
| 5 |
+
> **全新制作**:文案、分镜、画面代码、音乐、音效、旁白全部从零编写,**不参考**仓库中任何已有目录的代码;
|
| 6 |
+
> 不删除、不修改任何已有项目,只新增 `libra/` 目录(根目录 README / index.html 只做"追加")。
|
| 7 |
+
|
| 8 |
+
## 0. 进度看板(每完成一个大动作就推送一次到 Ethscriptions/POLS)
|
| 9 |
+
|
| 10 |
+
| # | 阶段 | 状态 |
|
| 11 |
+
|---|------|------|
|
| 12 |
+
| 1 | 写计划 / 大纲 / 步骤(本文件) | ✅ 完成 |
|
| 13 |
+
| 2 | 旁白文案定稿 + TTS 配音(逐句 mp3)+ 时长清单 `js/narration.js` | ⏳ |
|
| 14 |
+
| 3 | 动画引擎 + 全部场景(横屏 16:9 / 竖屏 9:16 安全区布局 + 烧录字幕) | ⏳ |
|
| 15 |
+
| 4 | 程序化音乐 + 合成音效 + 旁白闪避混音(实时播放与离线渲染共用一套代码) | ⏳ |
|
| 16 |
+
| 5 | 播放器 UI + 浏览器本地 MP4 导出(24 / 30 / 60 fps;横屏 1920×1080 B站 / 竖屏 1080×1920 抖音) | ⏳ |
|
| 17 |
+
| 6 | 四平台(小红书 / 抖音 / B站 / 视频号)标题、描述、话题一键复制 + 字数校验 | ⏳ |
|
| 18 |
+
| 7 | 四平台封面生成(4:3 / 3:4 / 16:9)页面内一键下载 + `covers/` 静态 PNG | ⏳ |
|
| 19 |
+
| 8 | 无头浏览器自动化测试(播放、横竖屏、导出 MP4、封面)+ 修复 + 最终推送 | ⏳ |
|
| 20 |
+
|
| 21 |
+
## 1. 创意核心
|
| 22 |
+
|
| 23 |
+
**一句话主题:** 天秤是黄道上唯一"不是活物"的星座符号——它不讲力量,讲的是 **平衡**。
|
| 24 |
+
|
| 25 |
+
视觉母题:**一架会呼吸的星光天平**。全片所有元素都"挂"在天平两端:昼与夜、南爪与北爪、
|
| 26 |
+
过去与现在、神话与科学、理性与感性。每一章结束时天平摇晃一次,再回到水平——这就是转场。
|
| 27 |
+
|
| 28 |
+
视觉风格:**深空鎏金 + 玫瑰粉雾**(金星是天秤的守护星,取金色 #F3D28A + 玫瑰 #F2A7C3 + 夜空靛蓝 #0B0F2A),
|
| 29 |
+
细线描金几何、粒子星尘、柔光辉光、缓动弹性动画。
|
| 30 |
+
|
| 31 |
+
## 2. 分镜大纲(8 章)
|
| 32 |
+
|
| 33 |
+
| 章 | 标题 | 画面 | 旁白要点 |
|
| 34 |
+
|----|------|------|----------|
|
| 35 |
+
| 0 | 冷开场 · 秋分 | 太阳与月亮分坐天平两端,昼夜各半 | 秋分昼夜平分,天秤季开始 |
|
| 36 |
+
| 1 | 星空坐标 | 黄道带圆环旋转,室女与天蝎之间亮起天秤 | 第七个黄道星座;唯一非生物符号 |
|
| 37 |
+
| 2 | 星图连线 | 真实亮星位置逐颗点亮、描金连线、标注名字 | 氐宿一 / 氐宿四 / 氐宿三等;阿拉伯语"南爪/北爪" |
|
| 38 |
+
| 3 | 从蝎钳到天平 | 天蝎的两只钳子被"剪下",变形为天平秤盘 | 古巴比伦已称"天平";希腊时期曾是蝎钳;罗马时期定型 |
|
| 39 |
+
| 4 | 岁差与秋分点 | 地轴陀螺进动,秋分点沿黄道从天秤滑入室女 | 约 2000 多年前秋分点在天秤,如今已移入室女座 |
|
| 40 |
+
| 5 | 正义女神 | 星光勾勒的女神阿斯特赖亚举起天平,升入夜空 | 神话:最后离开人间的神,天平留在了星空 |
|
| 41 |
+
| 6 | 天秤性格(娱乐向) | 关键词卡片在秤盘上左右称重 | 9/23–10/23,风象,守护星金星;审美、公正、选择困难 |
|
| 42 |
+
| 7 | 深空彩蛋 | 镜头推进:红矮星 Gliese 581 与"玛土撒拉星" HD 140283 | 天秤座方向的著名天体 |
|
| 43 |
+
| 8 | 结尾 | 天平最后一次摇晃后静止,片名浮现 | "在左右之间,找到自己的平衡" |
|
| 44 |
+
|
| 45 |
+
## 3. 技术方案
|
| 46 |
+
|
| 47 |
+
- **纯前端、零构建**:`index.html` + 原生 ES 模块(`js/*.js`),在 HF Static Space 直接运行。
|
| 48 |
+
- **画面**:Canvas 2D,**确定性渲染** `renderFrame(t)` —— 同一时刻永远画出同一帧,
|
| 49 |
+
所以实时播放、拖动进度、离线导出用的是同一份代码。
|
| 50 |
+
- **横竖屏**:逻辑坐标系分两套布局:
|
| 51 |
+
- 横屏 1920×1080(B站)。
|
| 52 |
+
- 竖屏 1080×1920(抖音):顶部预留 ≈ 7% 刘海/状态栏、底部预留 ≈ 22% 标题文案/进度条、
|
| 53 |
+
右侧预留 ≈ 13% 点赞评论按钮栏;主体与字幕全部落在安全区内,页面可开关"安全区参考线"。
|
| 54 |
+
- **旁白**:edge-tts 中文女声逐句生成 mp3,Python 用 mutagen 量出时长,写进 `js/narration.js`,
|
| 55 |
+
时间轴由时长自动排布(不手抠时间码),字幕与旁白天然同步。
|
| 56 |
+
- **音乐**:Web Audio 程序化合成(和弦铺底 / 竖琴琶音 / 低音 / 钟琴 / 混响),按章节换和声;
|
| 57 |
+
**音效**:合成的"叮"、星点亮起、天平摇晃、嗖声转场、深空低鸣等。旁白出现时音乐自动闪避(ducking)。
|
| 58 |
+
- **MP4 导出(浏览器本地)**:
|
| 59 |
+
1. 用 `OfflineAudioContext` 把 音乐 + 音效 + 旁白 一次性离线混音成 PCM;
|
| 60 |
+
2. 逐帧调用 `renderFrame(i / fps)` 画到离屏 Canvas → `VideoEncoder`(H.264,AVC High);
|
| 61 |
+
3. 音频 → `AudioEncoder`(AAC);
|
| 62 |
+
4. `mp4-muxer` 封装为 MP4(fastStart),本地下载,无需服务器。
|
| 63 |
+
帧率可选 **24 / 30 / 60**;尺寸可选 **横屏 1920×1080** / **竖屏 1080×1920**。
|
| 64 |
+
- **发布助手**:四平台标题 / 话题 / 正文一键复制,实时字数与话题数校验(超限标红)。
|
| 65 |
+
- **封面**:同一套绘图代码生成 小红书 4:3 & 3:4、抖音 4:3 & 3:4、B站 4:3 & 16:9、视频号 3:4 & 4:3,一键下载 PNG。
|
| 66 |
+
|
| 67 |
+
## 4. 目录
|
| 68 |
+
|
| 69 |
+
```
|
| 70 |
+
libra/
|
| 71 |
+
├── README.md 本文件(计划 + 进度)
|
| 72 |
+
├── index.html 播放器页面
|
| 73 |
+
├── css/style.css
|
| 74 |
+
├── js/
|
| 75 |
+
│ ├── narration.js 旁白文案 + 时长(脚本生成)
|
| 76 |
+
│ ├── timeline.js 时间轴排布
|
| 77 |
+
│ ├── scenes.js 全部场景绘制(确定性)
|
| 78 |
+
│ ├── audio.js 音乐 / 音效 / 混音(实时 & 离线共用)
|
| 79 |
+
│ ├── exporter.js WebCodecs + mp4-muxer 导出
|
| 80 |
+
│ ├── publish.js 四平台文案 + 封面
|
| 81 |
+
│ └── app.js 播放器控制
|
| 82 |
+
├── vendor/mp4-muxer.min.js
|
| 83 |
+
├── audio/ 旁白 mp3
|
| 84 |
+
├── covers/ 静态封面 PNG
|
| 85 |
+
└── tools/gen_tts.py 旁白生成脚本
|
| 86 |
+
```
|
| 87 |
+
|
| 88 |
+
## 5. 数据与事实来源说明
|
| 89 |
+
|
| 90 |
+
天文事实(亮星名称、星座位置、岁差、Gliese 581、HD 140283)为公开天文学常识;
|
| 91 |
+
"星座性格"部分属于流行文化 / 占星娱乐内容,片中会明确标注"娱乐向,不具科学依据"。
|