Skip to content

About

Folia Folium 模组:MiSide 风格立体掉落歌词(打字机浮现 → 整句坠落 → 落地停留 → 淡出)

Resources

Stars

2 stars

Watchers

0 watching

Forks

Latest commit

 

History

18 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MiSide 立体掉落歌词

Folia 的 Folium 歌词动画模组。灵感来自游戏 MiSide 的对话字幕:文字浮现 → 整句说完 → 掉到地面 → 停留 → 淡出消失。

效果

  • 打字机逐字浮现 —— 每字按自己的歌词时间出现
  • 整句说完整行坠落 —— 重力下落、触地反弹、平面翻滚
  • 灰阶立体挤出 —— 7 层明度递减的 text-shadow,读作实体厚度而非光晕
  • 落地停留后淡出 —— 默认停留 2.5 秒,再 1.5 秒淡出
  • 可调地面高度 —— 对齐桌面歌词区或壁纸边框

安装

需要 Folium 1.3 及以上(用到了 ctx.getDisplay() 与 ctx.seed)。

从模组市场安装,或拖 miside-drop.zip 进 Folia 的模组面板。

手动安装放这里:

%APPDATA%/Folia/mods/miside-drop/

然后在歌词动画列表里选 MiSide 掉落。

设置

项 默认 说明
掉落时机 整句说完 整句说完 = 打字机 + 整行坠;唱到就逐字崩落
字号基准 56 跟随宿主的歌词字号倍率
打字机间隔 0 逐字模式额外的字间隔(秒)
落地停留 2.5 落地后多久开始淡出
淡出时长 1.5 淡出耗时
翻转幅度上限 16 俯仰/偏航上限(度)。调大更翻腾,但立体厚度会被压扁
重力 1400 像素/秒²,越小越慢
弹性 0.34 触地反弹系数
掉落延迟 0 触发后再等多久开始掉
提前量 0 觉得慢了往负调
地面高度 0.82 落点占画面高度的比例
保留落地行数 2 地上保留几行残骸,超出整行回收
落地淡出 开 关闭则残骸一直留到被行数上限回收
立体挤出阴影 开 关闭只剩柔和投影

实现要点

四个不可违反的约束,改坏任意一个都会出 bug:

  1. stage 零 padding / 零 border —— 绝对定位的包含块是 padding box,测量拿的是 border box,有 padding 就整体错位。边距交给 lineBox 的 max-width。
  2. 粒子坐标是舞台绝对坐标,与 lineBox 无关 —— 换行时不能清粒子。
  3. 物理走独立 requestAnimationFrame + 真实 dt 积分 —— 用歌词时钟驱动会随刷新率变速。
  4. 文字显隐的交接只在 spawn() 里决定 —— 延迟落下的字由 span 显示、粒子隐形;到点由粒子接手、span 藏起。若在别处补一手「隐藏已掉落的字」,无延迟的字会因为 started 一开始就是 true 而错过隐藏,同一个字在排版层和粒子层各显示一次。

测量用 span.offsetLeft/offsetTop(offsetParent 是 position:relative 的 lineBox),不含页面滚动,也不受祖先 transform 影响。

设置与显示参数在 ctx.subscribe 回调里重读,改设置、改歌词字号当场生效,不必换歌。 getDisplay().showText 为 false 时整层 display:none(内部 span 各自显式设了 visibility,祖先的 hidden 会被覆盖);visualizerOpacity 接到容器透明度。

许可

MIT

About

Folia Folium 模组:MiSide 风格立体掉落歌词(打字机浮现 → 整句坠落 → 落地停留 → 淡出)

Resources

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages