【免费下载链接】huashu-art-motion艺术动画skill35种艺术风格、9种解说语法用代码让画动起来。项目地址https://gitcode.com/gh_mirrors/hu/huashu-art-motion点击查看免费下载本篇基于 huashu-art-motion 仓库的语法卡 y5_kinetic_type.md 展开讲清楚「动态文字排版kinetic typography」这条解说动画语法的完整配方什么场景该用、字号/配色/形状怎么定、每类元素的入场出场轨迹与曲线参数、五种转场的实现与「卡拍」对位技巧以及 120BPM 节拍网格如何落到代码里。读完后你能够照着 scripts/engine/demos/y5_kinetic_type/ 这套工程为自己的「清单/语录/数字讲解」类内容做出可渲染、可质检的代码化动态字片。一句话语法与血统语法卡给出的定义字就是演员——每个关键词踩一个重音砸进来主词大到一眼读完其余的字从「槽」里升起给耳朵对位画面里永远只有一个焦点镜头和底纹一直在动字落定后不动。血统上Saul Bass 为《North by Northwest》1959做的片头被普遍认作第一次在长片里大规模使用动态文字2008 年之后 YouTube 上歌词/台词 kinetic typeAfter Effects 一代把它变成了解说视频、清单、语录、数据开场的标准语法。语法卡末尾列了一手参考清单Saul Bass 片头档案、维基「Kinetic typography」条目、School of Motion 的 After Effects 系列教程、Dan Ebberts 的惯性回弹表达式、Lee/Forlizzi/Hudson 的 UIST 2002 论文等本次实测参照的是两支 30fps 的歌词 kinetic type 转载DISCORD、Charlie Puth。① 适用场景信息是结构不是画面用它解说/清单/「X 个阶段」「3 个理由」类的开场与章节卡信息是结构几个、哪一个、从什么到什么不是画面。语录、金句、一句话结论让观众「看着读」比「听着记」更牢。数字讲解一个数字一个镜头数字本身做主角。口播里有明确的重音词「不是写代码是说需求」。别用讲故事、讲情绪起伏——没有人脸观众很难共情用 y4 角色语法见 y4_storytime.md。长段解释性口播配满屏字——观众只会读不会听。整片超过 30–60 秒全是动态字会累用它做开场、章节卡、结论卡就好。字很多的列表5 条——改成静态信息图慢慢讲。② 画面构成一屏一个主词一章节一个底色构图一屏一个主词。主词左对齐压在画面左侧 1/3–1/2或镜像到右侧辅句紧贴主词下方另一侧放一个「证据物」代码卡、聊天气泡、清单。上角放小标签「阶段 01」和进度轨。四周至少留 130px 边距。字号阶梯示范片的字号阶梯是主词 340px : 辅句 96px : 标签 40px ≈ 3.4 : 1 : 0.4对应字重 Black : Heavy : Bold标签字距 6px。主词要在 0.3 秒里被读完所以主词只给 2 个字。源码里这一条被固化为常量 kinetic.js#L10-L11// 字号阶梯主词 : 辅句 : 标签 ≈ 3.4 : 1 : 0.4主词必须一眼读完辅句给耳朵对位 K.SZ { hero: 340, sub: 96, label: 40 };库层 typo.js 的头部注释也把它写成了可读性底线「主词 : 辅句 : 标签 ≈ 3.4 : 1 : 0.4一句辅句在屏 ≥1.2s入场慢0.3–0.4s、退场快≈0.18s」。配色换章节换底色每个章节一个整屏底色色彩本身就是章节号镜头底色主词强调标题黄#FFD23F墨#111111珊瑚圆#FF5A36里的白「3」01 补全珊瑚#FF5A36白黄荧光笔#FFD23F02 对话藏青#14213D黄黄荧光笔、蓝气泡#3A86FF03 代理米白#F4EFE6墨珊瑚下划线、绿勾#2BB673全片 4 个底色 墨 白强调色永远只有一个。这套色板同样以常量存在 kinetic.js#L9K.C每个镜头文件第一行就是c.fillStyle C.yellow/coral/navy/paper整屏铺底。形状语言字是最大的形辅助形状只用圆角矩形卡片 r26、气泡 r30、键帽 r22、正圆数字底、斜切色块荧光笔斜率 0.18。背景是 64px 间距的点阵不透明度 6–10%。不用描边字、不用投影字唯一的投影是卡片下 8–18% 的偏移阴影。斜切率 0.18 直接体现在库函数 typo.js#L86-L89 的TY.marker(c, x, y, w, h, p, color, skew 0.18)默认参数里点阵背景则是 kinetic.js#L14-L20 的KT.dots64px 网格、斜向平移 36px/s。③ 运动轨迹每类元素的「演员表」入场按重要性选方式元素方式曲线与时长主词砸从 1.7 倍缩到 1前 0.06s 不透明度 0→1欠阻尼弹簧1−e^(−10t)·cos(2π·2.2t)过冲约 8%≈0.35s 停稳标题首词砸旋转回正 −8°→0同上辅句、标签槽里升起字在基线下的遮罩里从 1.2 倍字高推到 0expoOut0.30–0.35s数字/图标/气泡/键帽弹入0→1 缩放backOuts2.6–3.0过冲 17–20%0.30–0.42s卡片滑入从 700px 或下方 260px带 3.4° 旋转回正expoOut0.40s打字按字符截断0.5s 打完 13 个字符26 字/秒光标 2Hz 闪代码补全灰字0 帧闪现补全本来就是瞬间出现的→ 按 Tab 变实色键帽按下压 14%e^(−18t)回弹荧光笔 / 下划线从左往右刷出expoOut0.30s在字出现后 1–3 个八分音符再刷关键词放大到强调拍放大到 1.35 倍并钉住荧光笔跟着放大弹簧 freq 2.5 / decay 9和配合的动作按 Tab、打勾同一拍巨型阶段数字900px、透明度 5–13%、压在画右下、从 1.35 倍落到 1 后斜向慢漂 14/10 px/s弹簧 freq 2 / decay 8打勾勾的笔画按弧长画出框同时 1→1.25→10.22s删除线晚 0.08s 再划这几条不是纸面参数全部有对应实现砸slamtypo.js#L91-L95 的TY.slam用MO.springHz(lt, 2.2, 10)即 motion.js#L88 的欠阻尼弹簧阶跃响应1 − e^(−decay·t)·cos(2π·freq·t)。motion.js的注释给了三组参数的过冲量级freq 3 / decay 6第一次过冲 ≈37%砸进来的大字、2.5 / 9≈16%常规弹入、2.2 / 10≈8%主词落定。透明度用clamp(lt / 0.06)就是「前 0.06s 透明→不透明」。槽里升起risetypo.js#L59-L65 的TY.rise先c.rect(...)裁出基线附近的矩形做遮罩再把字从y size * 1.2 * (1 − e)推回基线曲线MO.expoOut。弹入poptypo.js#L66-L70 的TY.pop默认MO.backOut(p, 2.2)motion.js#L49-L50 注明 backOut 的 s 与过冲的对应关系s1.70158 ≈10%、2.2 ≈13%、2.6 ≈17%、3.5 ≈23%所以 s2.6–3.0 对应 17–20% 过冲。打字TY.typed(s, p)按字符截断typo.js#L79-L80光标用Math.floor(t * 4) % 2做 2Hz 闪烁见 k2_complete.js#L40。代码补全k2_complete.js#L37-L38 里灰字在第 6 拍t b(6)同一帧直接出现、按 Tab 后换实色——「0 帧闪现」就是不加任何入场进度Tab 键帽的「按下压 14%、e^(−18t)回弹」在 k2_complete.js#L44-L51。关键词钉住typo.js#L96-L105 的TY.keyword先rise升起到强调拍tHit用springHz(t − tHit, 2.5, 9)放大到 1.35 倍并停住keywordMarker让荧光笔与字同一拍、同一缩放。库注释点破了设计意图「字和动作说同一件事『下一行』放大的那一拍正好按下 Tab」。出场比入场快出场用加速曲线expoIn时长 0.18s元素之间错开 0.03s同时缩到 0.6、下落 60px、变透明。退场比入场快——观众的注意力在退场开始前就已经走了。标题镜头的实现就是 k1_title.js#L6-L7// 退场t0 起 0.18s缩到 0.6、下落 60px、透明 const exitK (t, t0) MO.expoIn(clamp((t - t0) / 0.18));错开的四个退场起点1.45 / 1.48 / 1.51 / 1.54k1_title.js#L15正好是每 0.03s 一个。标题段最后一拍除「3」以外全部退场只剩下一个要冲进去的形。错开stagger同一行的词错开一个八分音符120BPM 下 0.25s同一组小元素三个勾也是一个八分一个。K4 镜头的三条 TODO 就是13.5 / 14 / 14.5拍各打一个勾k4_agent.js#L8 的TASKS [[写代码, 13.5], [跑测试, 14], [上线, 14.5]]。持续运动字落定后不动动的是别的镜头微漂两路正弦振幅 5px周期约 7s / 2.7s极慢旋转 ±0.5°。对应 kinetic.js#L48-L51 的KT.camCAM.drift(t, 5, 2)提供微漂r: 0.009 * Math.sin(t * 0.8)是 ±0.5° 慢旋转。拍点微冲每个四分拍整屏放大 1.2%e^(−25t)衰减≈0.12s——画面跟着鼓「呼吸」。实现是一行纯函数 kinetic.js#L12-L13// 拍点微冲每个四分拍让画面放大 1.2%0.12s 衰减e^-25t——画面跟着鼓「呼吸」 K.bump t { const ph t % 0.5; return 1 0.012 * Math.exp(-ph * 25); };120BPM 下一拍 0.5st % 0.5保证冲击永远发生在拍上、而不是转场起点上。背景点阵斜向平移 36px/sKT.dots的ox (t * 36) % g。结尾一拍镜头拉远 6%expoOut0.5s所有东西缩小一点「收束」。K4 收尾在 k4_agent.js#L13 和 k4_agent.js#L46pull拉远 6%hit给 3.5% 的一记冲击。原片对照实测数据对两支 30fps 歌词 kinetic type 转载抓帧相邻帧完全静止只占 10.3%DISCORD/ 21.2%Charlie Puth七八成时间画面在动——和 storytime 语法的 71% 静止正好相反大的视觉事件整屏变化 1.5% 的峰平均 0.66s / 0.83s 一个接近一拍一个两支曲速约 105 / 99 BPM一拍 0.57 / 0.60s。示范片的大事件密度是一个八分一个0.25s比歌词片密一倍——解说开场可以这么密长片要放到一拍一个。④ 转场5 种 最值钱的「卡拍」对位技巧示范片用了 3 种另列 2 种常用穿越放大zoom through镜头冲进上一屏的某个形「3」的珊瑚圆形的颜色下一屏的底色冲满屏后下一屏从 1.25 倍落回 1。实现是 transitions.js#L841-L850 的TRANSITIONS.fillZoom实验时叫 zoomThrough收进库后改名免得和 3b1b 的镜头穿越zoomThrough撞名。参数cx, cy, k, maxZoom, fill前 55% 时间k0.55按Math.pow(p / k, 2.2)指数放大到maxZoom倍指数缩放本身就是加速不再套 expoIn后 45% 用expoOut让新画面从 1.25 落回 1、透明度 3 帧内拉满。色带擦除bands三条斜切色带黄→白→藏青接力从左扫到右错开gap最后一条后面露出新画面。transitions.js#L852-L860 的TRANSITIONS.bands每条带沿expoInOut扫过、斜率sk H * 0.35。推push新旧一起平移像在一张长画布上滑到下一块。transitions.js#L862-L866 的TRANSITIONS.pushexpoInOut。遮罩擦出mask wipe一个形圆、矩形条、字本身当遮罩从小长大露出新画面。可用 skill 原有的iristransitions.js#L400-L408。字变形 / 字当转场上一屏的某个字放大成整屏色块或者一个字甩出画面带走旧画面。示范片 eras.js 里三种转场的真实配置window.ERAS [ { id: k1_title, dur: 1.75 }, { id: k2_complete, dur: 1.95, // 冲进点选在圆内、避开「3」字形冲进白字会一片白 transition: { type: fillZoom, dur: 0.45, k: 0.55, cx: 1075, cy: 773, maxZoom: 30, fill: #FF5A36 } }, { id: k3_chat, dur: 2.1, transition: { type: bands, dur: 0.5, gap: 0.12, colors: [#FFD23F, #FFFFFF, #14213D] } }, { id: k4_agent, dur: 2.7, transition: { type: push, dur: 0.35 } }, ];注意 fillZoom 的fill: #FF5A36就是 K2 的珊瑚底色——转场的颜色接力正是「形的颜色下一屏底色」这条规则。对位技巧段起点 小节线 − 揭开点 × 转场时长这是语法卡标注「本次最值钱的一条」引擎里转场从新段的t0开始所以要让「新画面露出来」的那一帧正好落在小节线段的起点必须往前挪段起点 小节线 − 揭开点 × 转场时长示范片的三个数fillZoom 揭开点p 0.55、时长 0.45 → 起点2.0 − 0.25 1.75揭开在 2.00bands 揭开点 ≈0.6、0.5s → 起点 3.70push 用 expoInOut肉眼的「到位」是位移 90% 那一刻p ≈ 0.58而不是p 1→ 起点 5.80第一版按 p1 算起点 5.65审片量到「推完比重拍早 8 帧」返修后重算为 5.80。这条公式在库层有专用函数 motion.js#L101-L102// 揭开那一帧落在拍上段起点 小节线 − 揭开点 × 转场时长y5zoom 揭开点 .55、色带 .6、push 到 90% 位移在 .58 MO.onBeat (barTime, revealP, trDur) barTime - revealP * trDur;eras.js头注释eras.js#L4-L5把三个起点全部写成了可核对的算式。所有镜头内的落点也写成拍号KT.b(n)不写秒——KT.b就是 kinetic.js#L8 的MO.beat(n, 120)b(4) 第 4 拍 2.0s。⑤ 节奏与文字120BPM、4 小节 1 拍收尾120 BPM8.5s 4 小节 1 拍收尾16 拍每小节一个镜头标题 / 阶段一 / 阶段二 / 阶段三。每个镜头里第 1 拍主词砸背景巨型阶段数字、第 1.5 拍证据物、第 2 拍辅句、第 3 拍证据物动作、第 3.5 拍关键词放大高亮、第 4 拍留白或退场最后第 16 拍8.0s收尾重拍再静住 0.5s。四个镜头同一套拍位只换左右和内容——观众第二个镜头起就「知道下一下在哪」这正是节奏感的来源。K2 的拍位注释是模板k2_complete.js#L1-L4第 4 拍主词砸进巨型「1」→ 4.5 拍代码卡滑入、开始打字 → 第 5 拍辅句「它补完」升起、5.25 拍「下一行」→ 第 6 拍灰色补全闪现Tab 键弹出 → 6.5 拍按下 Tab、灰字变实、「下一行」放大 1.35 倍荧光笔。主词落在强拍每小节第一拍配低频冲击小元素落在八分音符上配 pop转场前 0.3s 一段上扬噪声把耳朵带到下一小节。每个画面落点都有一个声音每个重音都有一个画面——示范片音效表在实验归档的build_y5.py没收进 skill和scenes/*.js的拍号一一对应主词boom、小元素pop、打字click、打勾升调 pop、转场前riser。停留时间够读英文视频文字指南给的下限是 13 字符/秒SSW中文没找到一手标准按字幕行业经验上限 7–9 字/秒算未核实当经验值用。主词 2 字至少停 0.5s辅句 7–8 字至少停 1.0s。和口播对位主词口播里的重音词画面宁早勿晚、最多早 1 帧——人对「声音比画面早」比「声音比画面晚」敏感得多广播声画同步容差 EBU R37声音领先 ≤40ms、落后 ≤60ms。⑥ 代码实现从语法卡到可运行的示范片收进 skill 后2026-10-04 v0.4语法卡「新写」里的通用函数已统一进 scripts/engine/lib/名字换成统一后的 MO / CAM / DG / TY / CH / UI / CL / TOON示范片自己的代码在 scripts/engine/demos/y5_kinetic_type/。库速查和「怎么为一段口播选语法」见 references/09-视频动画语法.md。复用与 engine 改动复用 skill引擎段落表、转场新旧两层、renderFrame、render.py、U.clamp / lerp / rngPAINT不需要这风格不用纹理。engine 改动已并进 skill 引擎window.BPM可配默认 128本片 120见 kinetic.js#L6任何段可写dur秒转场punch: 0可关——本片用自己的拍点微冲冲在拍上不冲在转场起点上eras.js#L6 的window.PUNCH 0。新写、现已统一进库的函数清单缓动motion.jsMO.expoOut / expoIn / expoInOut / quintOut / backOut(p, s) / spring(t, {duration, bounce}) / springHz(t, freq, decay) / settle(t, amp, freq, decay)。其中settle是 Dan Ebberts 惯性回弹amp·sin(2πft)/e^(decay·t)的实现motion.js#L89-L90换姿势的身体挤压、屏幕震动都用它。字typo.jsTY.text缩放旋转以任意点为轴、描边、字距、TY.width、TY.rise遮罩升起、TY.pop弹入、TY.typed打字、TY.marker荧光笔斜切块、TY.underline、TY.slam、TY.keyword / keywordMarker。镜头CAM.with(c, {x, y, z, r}, fn)、CAM.driftcamera.js。转场transitions.jsfillZoom、bands、push另有通用iris。本片共用层 kinetic.js 的分工scripts/engine/demos/y5_kinetic_type/kinetic.js 是全片唯一的「共用层」按拍号组织一切落点KT.b(n)拍号KT.SZ字号阶梯KT.C色板KT.bump拍点微冲KT.dots点阵进度轨右上三格画在GLOBAL_OVERLAY固定层值只由全片时间决定——这是 skill 02 号「连续叙事锚」的用法第一版画在各段里推页时跟着页面跳返修后才移走亮格时刻K.STAGES [2.0, 4.0, 6.0]与颜色切换都锁在转场揭开那一帧kinetic.js#L21-L35KT.key / keyMarker关键词先升起、到强调拍放大 1.35 倍并钉住KT.bigNum背景巨型阶段数字kinetic.js#L36-L41springHz(lt, 2.0, 8)从 1.35 倍落到 1之后x lt * 14, y − lt * 10斜向慢漂KT.cam镜头包装微漂慢旋转拍点微冲。中文字体与渲染示范片用阿里巴巴普惠体 3.0 四个字重Black/Heavy/Bold/Medium做开源版因字体许可换成思源黑体 Noto Sans SC 900/800/700/500family 名沿用PuHui-*所以场景代码不用改一行字体名GB2312 全量子集由scripts/font_subset.py --gb2312生成woff 放在 scripts/engine/lib/fonts/许可见同目录 LICENSES.md换题目一般不用重做。渲染与质检命令沿用 SKILL.md 的工程约定工作目录为仓库根# 渲染示范片8.5s60fps合成配乐 120 BPM uv run --with playwright python scripts/engine/render.py --film demos/y5_kinetic_type --out y5.mp4 # 质检稳定/效率/动感/流畅及文字框景线索 uv run scripts/qa.py --project scripts/engine --film demos/y5_kinetic_type预览可直接在浏览器打开scripts/engine/index.html?filmdemos/y5_kinetic_type见 eras.js#L3 注释。镜头表成片叙事K1 标题「AI 写代码 的 ③ 个阶段」→ 穿越放大 → K2「补全」代码卡灰字补全Tab→ 色带擦除 → K3「对话」你一句、它一整段→ 推 → K4「代理」TODO 三条自己打勾进度轨满格。K3 的版式和 K2 镜像主词左↔右见 k3_chat.js#L2-L3 注释「同一套拍位换位置观众不会觉得重复」。⑦ 最容易做错的 3 件事所有字一样大、一起动。没有层级就没有焦点观众不知道先读哪个。主词与辅句至少 3:1同一时刻只让一个东西在「入场」其余全部静止。字一直在漂。字在读的时候不能动会读不进去。持续运动交给镜头微漂、拍点微冲、背景点阵字砸进来 0.35s 后就钉住。动画不踩拍或者踩在转场起点上。转场的第一帧不是重音「新画面露出来」那一帧才是。把段起点往前挪「揭开点 × 时长」再把镜头里每个落点写成拍号节拍网格以外的落点每多一个整片就散一分。示范片的返修与质检数字独立审片返修按 skill 的「窄桥」约定成片交付前派一个没参与制作的独立 agent 只看成片审片。审片结论「开头 0–2s 是标准的 kinetic type『3』的圆冲进镜头变成下一段底色是全片最好的设计」「声画对位几乎完美所有视觉事件都落在 120BPM 网格上、和底鼓同一帧」。必须改的 5 条及处理辅句停留太短0.6–0.9s→ 辅句提前一拍出、压到 6–7 个字「它补完下一行」「一句话换一整段」「你只说要什么」可读时间 1.0–1.5s阶段 2 仍偏紧正式片配口播就够全片加 0.5s。阶段 2 辅句快撞上 AI 面板14px→ 辅句变短、右对齐间距 180px。推页早了 8 帧、进度轨跟着跳→ 段起点按 90% 位移重算5.80进度轨移到GLOBAL_OVERLAY固定层颜色在揭开那一帧换。阶段段落不够 kinetic编号太小、关键词只高亮不放大→ 加背景巨型阶段数字 1/2/3关键词到强调拍放大 1.35 倍。结尾没有收尾的一击、打完勾全变灰→ 加第 16 拍收尾重拍镜头拉远 6%3.5% 冲击低频高音铃勾完的字变绿不变灰内容整体下移 70px 填掉底部空白。另外代码卡改用等宽字体Menlo。没采纳的建议「把每段延长到 2.5–3s、全片 10–11s」——示范片要求约 8 秒用压字数代替延时长。qa.py 数字返修后段运动%静止帧对%跳变均/峰 ms确定性k1_title2.370.01t1.63标题退场1.0/1.6✓k2_complete2.390.001.5/3.2✓k3_chat2.590.01t4.54AI 气泡长出1.6/2.2✓k4_agent2.880.03t6.29 Agent任务卡t8.00/8.04 收尾重拍1.6/2.0✓转场冒烟整帧峰值fillZoom 6.8ms、bands 4.8ms、push 3.8ms。5 个跳变逐个看过帧全是有意的拍点重音qa 文档「有意的节拍闪不算错」。kinetic 的跳变就该落在拍上——可以拿跳变时刻去对节拍网格对不上的才是 bug。返修后逐帧扫描四条边0 帧露黑。小结y5 这条语法的可复用内核可以压缩成五条字号阶梯 3.4:1:0.4 保证「一眼读完」每章节一个整屏底色色彩即章节号入场慢弹簧/expoOut 0.3–0.4s退场快expoIn 0.18s字落定后钉住持续运动全部交给镜头微漂、拍点微冲和背景点阵一切落点写成拍号转场起点按「小节线 − 揭开点 × 时长」回算。仓库里从 语法卡、库函数 到 四个镜头文件 形成了一条完整证据链照此结构可以为任何「结构型信息」内容复制出一支卡拍的动态字片。赞分享【免费下载链接】huashu-art-motion艺术动画skill35种艺术风格、9种解说语法用代码让画动起来。项目地址https://gitcode.com/gh_mirrors/hu/huashu-art-motion点击查看免费下载相关推荐抖音批量下载工具3 步存完整个主页抖音批量下载工具3 步存完整个主页 周五下午你要把某个账号最近的 80 条作品存下来作为下周选题参考。在手机上逐条保存视频太慢用网页工具逐条复制链接网页爬虫CLITeslaMate 实战部署一次跑通你的特斯拉数据监控中心TeslaMate 实战部署一次跑通你的特斯拉数据监控中心 凌晨两点你盯着手机看车还停在楼下电量从 31% 悄悄掉到 29%。这 2% 叫「吸血鬼损耗」—后端数据分析数据可视化huashu-art-motion让 Coding Agent 用代码让画动起来——35 种艺术风格、9 种解说语法与一条可验收的动画流水线huashu art motion让 Coding Agent 用代码让画动起来——35 种艺术风格、9 种解说语法与一条可验收的动画流水线 huashu a上一篇Docker容器持久化存储终极指南baseimage-docker与Ceph/Rook集成方案下一篇归藏提示词库社交媒体优化信息展示卡片的3个设计黄金法则创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考