文字特效
打字机、故障、渐变、描边、拆分入场等文字动效,逐字在画布上排版与动画,悬停读出每个字的状态。
技术栈: Canvas 2D, 逐字布局, easing
- 打字机 — 文字一个个出现,后面跟着闪烁的光标;打完停顿一会儿,再逐字删除,循环往复。
- 故障风文字 — 模仿信号干扰——把文字切成横条随机左右错位,并把红、青两个颜色通道错开。
- 渐变扫光 — 文字用一条横向的颜色渐变来填充,渐变不断平移形成流动感;再叠加一条倾斜的白色高光从左扫到右,像金属反光。
- 描边填充 — 先只画文字的轮廓线(strokeText),并向右下错开叠几层形成立体阴影;然后实心颜色从左往右「灌」进文字…
- 拆分下落 — 把一句话拆成单个字,每个字依次从上方落下,落地时带一点弹跳;停留片刻后再逐个向下掉出画面,循环。
- 弹性弹入 — 每个字从 0 放大到原尺寸,因为「弹性」会先超过原尺寸再回弹几次才停下,像果冻。
- 模糊清晰 — 每个字一开始又糊又淡,然后依次变得清晰锐利,像镜头对焦;停留后再从左到右重新变糊。
- 镜像翻转 — 每个字绕水平轴依次翻转一圈(纵向缩放从 1 → −1 → 1),下方还有一个上下颠倒、逐渐变淡的倒影,像站在…
- 波浪字 — 每个字的上下位置是一条正弦波,后面的字比前面的字晚一点(相位差),连起来就像一排在水面上起伏的浮标。
- 3D 透视 — 文字写在一张向后倒下的平面上,平面不断往远处移动。
- 霓虹灯管 — 文字用细线描边当作灯管,再加上同色的大范围模糊阴影(shadowBlur)当作光晕。
- 打散重组 — 所有字从各自的位置飞散到随机方向并旋转,然后再沿原路飞回拼成原句,循环。
- 计数滚动 — 每一位数字是一条竖着的 0~9 纸带,数值增加时最低位持续滚动;当低位从 9 滚到 0 的那一刻,高一位才跟…
- 密码解码 — 文字先显示为不断变化的乱码字符,然后从左到右一个个「破译」成真正的字,像电影里的黑客界面。
- 打印色带 — 模仿小票打印机——打印头从左到右扫过当前行把字印出来,印完一行纸带向上走一行。
- 手写进度 — 用虚线技巧画字的轮廓——把虚线的「实线段」从 0 慢慢加长到整条轮廓长度,看起来就像笔在一笔笔描字;每个字描…
- 字幕卡拉OK — 当前唱到的那一行,颜色像进度条一样从左往右「刷」过去,刷过的字变成高亮色并发光;唱完一行切换到下一行,上下行…
- 竖排滚动 — 中文古籍从右往左、从上往下竖着排列。
- 切页翻转 — 每一格上下两半分开,换字时上半片向下翻倒,露出新字的上半部分,翻倒的片背面是新字的下半部分。
- 液态变形 — 先把文字画到一张隐藏画布上,再把它横切成很多细条,每条按正弦波左右错开,看起来就像文字在水里晃动。
- 像素显现 — 先把文字画到隐藏画布上,按网格取样:落在字形内的格子变成一个像素块。
- 烟雾消散 — 文字被拆成很多细小的粒子。
- 磁吸排列 — 字平时在画面里随噪声自由漂浮;指针像一块磁铁,离指针越近的字越会被吸回到它在句子中的位置并摆正。
- 彩虹跳动 — 每个字依次向上跳起再落下(|sin| 曲线,像弹跳的球),同时颜色沿色环流动,第一个字的色相是主色,整句跨越…