【免费下载链接】huashu-art-motion艺术动画skill35种艺术风格、9种解说语法用代码让画动起来。项目地址https://gitcode.com/gh_mirrors/hu/huashu-art-motion点击查看免费下载本文基于风格配方卡 18_klimt.md 与其对应的场景实现 18_klimt.js完整还原 huashu-art-motion「艺术史速通」项目中克里姆特Gustav Klimt1907 金色时期场景的做法逐像素 fbm 金箔墙、source-in剪影纹样层、写实脸与平面金袍的对比以及一套消灭静止帧的动效配方。读完后你可以掌握 Canvas 纯代码绘制「金质感」的完整参数链路以及多图案填充时合成模式的正确用法。配方卡定位35 种风格中的 18 号在 风格总索引 中18 号风格的定位是项内容核心渲染器 / 手法复用哥特金箔、螺旋 / 眼形纹样、写实脸配平面金袍母题动作画怎么活袍上眼形纹轮流眨、金屑飘签名转场进入它金箔从头部螺旋铺开质量★★★一眼认得、可直接用当前短板桌上的手没接袖子配方卡开头记录了它的实验来源来自 2026-10-04 的迁移测试 A一个只读 skill 的独立 agent 实做当时文件名为scenes/02_klimt.js223 行整合后移植为 scenes/18_klimt.js。实测数据0.45↔0.9s 帧差 32.9%主要来自流光相邻帧中位 0.40%但 48 对帧里有 14 对几乎静止——这组数据直接引出了后文的「坑」一节因为静止帧正是这个风格最先暴露的缺陷。场景管线12 步绘制顺序配方卡给出的绘制管线画布 1920×1080金箔墙缓存→ 金粉四角星闪烁lighter→ 窗《白桦林》点彩 → 黑白方格金框 → 花毯地 → 霍夫曼黑白方格桌 → 斜向流光 在角色之前画角色自然挡住→ 猫 → 少女金袍纹样层按剪影 source-in → 写实的脸与手 → 花冠 → 金袖、金杯 → 金色热气对应源码中draw(c, lt, t)主函数的顺序18_klimt.js#L160-L215c.drawImage(wall(), 0, 0)—— 金箔墙整屏缓存图lighter混合下画 420 颗金粉的四角星L164-L167P.particles撒 34 片翻面飘落的金箔碎片L169-L171窗windowArt()缓存 clip 内 14 片翻面落叶L173-L176meadow(c, t)花草地、table()霍夫曼方格桌L177-L178斜向流光sweep(c, sx)在角色之前画所以角色天然挡住光带L179-L182猫共享角色骨架RIG.cat(...)出姿态后做装饰化重涂L184-L185少女RIG.girl({ cup, sip, breathe, hair: bun })生成姿态先画金袍纹样层一次性source-in再画写实的脸与手、花冠、金袖、金杯L187-L213金色热气两条从杯口上升的细螺旋线L215。角色姿态与动画参数来自共享编舞KIT.choreo(lt, t)L161约定与实现见 paint.js 的编舞注释端杯循环按全片时间走跨段连续、猫尾sin(t·5.2)摆动、2.3s 一次眨眼、呼吸sin(t·4)·0.012。场景只负责「用自己的画法画出来」动作曲线全项目共用——这是 02-机制 中「固定场景骨架窗、桌、猫、人位置 ±40px 不动」机制的落地观众的眼睛有锚点才看得清「变的是风格」。金箔逐像素公式与 96px 接缝金箔是这个场景的地基逐像素计算18_klimt.js#L12-L23f clamp( 0.5 fbm(x·0.004)·0.55 noise(x·0.003, y·0.08)·0.45 随机±0.05 )fbm项大尺度斑驳。P.fbm是 4 倍频的 Perlin 分形噪声paint.js#L18-L23配方卡写作fbm(x·.004)·0.55源码里 x、y 同缩放P.fbm(x*0.0043, y*0.004, 4)noise项拉丝方向感。注意noise(x·0.003, y·0.08)的 x/y 频率相差约 27 倍横向几乎不变、纵向快速波动于是形成水平拉丝——金箔被压延/摩擦的痕迹配方卡里记为noise(x·.003, y·.08)·0.5源码权重取 0.45随机粒度每像素 ±0.05 的细颗粒。颜色按f在三级金色之间分段插值[120,78,18] → [196,148,52] → [246,216,128]即深铜金 → 中金黄 → 亮金f0.5时在前两级间、否则在后两级间线性混合L17。再叠一层金箔接缝每 96px 画一条极淡的方块缝线行与行错位 48px棋盘错缝表示金箔是一片片贴上去的而不是整张刷的L22g.strokeStyle rgba(90,55,10,.18); g.lineWidth 1; for (let y 0; y H; y 96) for (let x (y / 96 % 2) * 48; x W; x 96) g.strokeRect(x 0.5, y 0.5, 96, 96);金箔图通过P.cached(kl_gold, W, H, ...)只算一次并缓存paint.js#L10-L11——1920×1080 逐像素双噪声若每帧重算会直接拖垮帧率而它又是静态的这正是P.cached的用武之地。墙金箔 × 480×270 斑驳 multiply 9000 颗金粉墙不是直接铺金箔而是先压暗再撒粉L25-L32目标是《吻》的褐金斑驳底画整屏金箔底globalCompositeOperation multiply叠一张480×270 的小 fbm 灰度图v clamp(0.62 fbm·0.7)RGB 偏褐(255,235,190)·v放大到全屏——低分辨率放大后色斑边界发软恰好是「旧金箔氧化斑驳」的质感换回source-over用固定种子撒9000 颗小方块70% 概率是亮金粉rgba(250,226,140, .3–.8)30% 是暗粉rgba(70,40,10, .2–.5)边长 0.6–2.8px。三个要点multiply 之前必须有不透明底金箔图 α255否则结果发黑斑驳图刻意用小分辨率480×270而非逐像素同分辨率换取柔和的大色斑金粉用固定种子 rng保证每帧位置不变闪烁感由后面的动态金粉层承担而不是靠这层抖动。金袍纹样150 个随机点的四类系统袍子纹样在robePatternL85-L105中生成先用rng(71)撒 150 个随机点区域 x∈[1090,1470]、y∈[420,940]每个点带缩放s和相位ph按随机数k分成四类占比类型动画30%k0.3同心圆三色红白蓝 / 蓝金红 / 紫白金按i%3轮换静态32%0.3≤k0.62深褐底#3a2410金螺旋旋转t·5·(±1)ph奇偶索引反向22%0.62≤k0.84荷鲁斯式眼形纹白底、墨勾、虹膜三色轮换轮流眨sin(t·2.2ph·3) 0.86时按 0.07 宽度过渡闭上16%其余5 点白圆簇 红心静态配方卡记录的设计参数与源码的差异值得注意卡片记螺旋「每个按 ±3rad/s 转」、眨眼条件写为sin(2.2tφ)0.86当前整合版代码的实际取值是t·5·(±1)和相位ph·3L96、L98。从源码结构看整合移植时提高了转速并让相位参与更充分避免 150 个纹样同步闪烁。眼形纹的画法L78-L84上下两条quadraticCurveTo合成杏仁形开合度open控制曲线高度h L·0.42·open虹膜只在open 0.25时 clip 后画出最外面还有一道不随开合的上眼睑弧——配方卡注明这是「像埃及荷鲁斯之眼的勾」。下摆另有 60 块黑白竖长方块w 10–24px, h 26–66px55% 概率黑、否则米白金描边#d6a845, 2px——配方卡指出这是《吻》里男子长袍的视觉语言L89与桌、窗框、袖口的黑白方格呼应成一套维也纳分离派符号。平面装饰对写实脸这个对比就是克里姆特金袍是纯平面的装饰纹样、色块、3px 深色描边#1d140c见 L194而脸与手刻意走写实路线L108-L128体积感完全靠径向渐变#fbe8da → #f0cfb8 → #d8a88c → #b88068高光 0% → 0.5 → 0.85 → 1光源方向由lightDx/lightDy偏移渐变中心控制腮红与眼窝阴影用blur(7px)/blur(6px)的软色块clip 在脸部 Path 内全脸只有 1.2px 淡轮廓rgba(150,90,70,.55)眼睛是半垂的「倦眼」浓睫毛唇用两段二次曲线收口。配方卡的结论一句话「这个对比就是克里姆特」——平面装饰的袍子包住写实有体积的脸和手正是《吻》与《阿黛尔·布洛赫-鲍尔肖像 I》的张力来源。窗、花毯、桌三个次级元素窗《白桦林》L36-L52420×400 的 clip 区内 2600 个秋叶色椭圆点上 65% 用 6 色调、下 35% 用 5 色调的深暗色板模拟林间纵深6 根米白树干宽 9–16px上按确定性伪随机撒黑色斑纹窗外金框 24px上下左右再贴一圈 10×10 黑白小方格L48-L50。动态部分是 14 片落叶P.particles(14, 5, t, ...)生成确定轨迹scale(1, cos(t·6i))做翻面L175。花毯L55-L65260 朵同心圆花沿 y∈[712,1082] 按Math.pow(r,0.8)分布越靠近画面底部越大半径 6→20px5 组双色调轮换每朵由外圈实心 0.62R 描边圈 0.25R 芯三层组成。点头动画x 偏移 sin(t·4.2φ)·s·0.35L61——注意幅度是 0.35 而非配方卡初版的 0.18这是「消灭静止帧」的返修之一见下节。霍夫曼方格桌L68-L74约瑟夫·霍夫曼Klimt 同圈的黑白方格语言桌面 12px 米白棋格嵌在 16px 黑底上、立面竖条纹、桌沿压 6px 金边。三个「活」的机制流光、金粉、金箔碎片克里姆特场景最难的点是金墙是静态的、纹样动画是间歇的眨眼——初版出现了大片静止帧。配方卡记录的数据加三样东西之前静止帧对为 20/36另一组 48 对里 14 对静止之后降到0/36。这三样分别是1. 斜向流光每帧必动的主角520px 宽的亮带transform(1, 0, −0.45, 1, 0, 0)斜切x 随 y 偏移 45%lighter混合在1.15s 内匀速从 −200 扫到 2300L180-L182const sweep (c2, x0) { const gr c2.createLinearGradient(x0-260, 0, x0260, 0); gr.addColorStop(0, rgba(255,240,180,0)); gr.addColorStop(0.5, rgba(255,240,180,.24)); // 峰值 α gr.addColorStop(1, rgba(255,240,180,0)); c2.save(); c2.globalCompositeOperation lighter; c2.transform(1, 0, -0.45, 1, 0, 0); c2.fillStyle gr; c2.fillRect(x0-260-600, 0, 5201200, 700); c2.restore(); }; const sx lerp(-200, 2300, clamp(lt / 1.15));两个关键决策一是匀速clamp(lt/1.15)线性插值不缓动扫光带缓动会在中途「慢下来」显得像故障二是峰值 α 被压在.24——配方卡的坑α 到 .38 时像镜头眩光lens flare盖过了金箔本身的纹理。流光在角色之前画在墙上金袍层内部还单独在source-atop下对袍子再扫了一次sweep(rg, sx260)L192让袍子表面也随光带亮一下。2. 金粉四角星420 颗上浮 闪烁固定种子生成 420 颗金粉初始 x、y、大小 1.5–5、相位、频率 3–9L33。每帧位置y ((y0 − t·26) % H H) % H——以26px/s 恒定上浮横向sin(t·0.8φ)·14微漂闪烁tw sin(t·spφ)只有tw ≥ 0.55时可见间歇性不是持续亮亮度a (tw−0.55)/0.45形状四角星两个交叉菱形共 8 个顶点半径R s·(0.6 a·1.1)。配方卡记录了这个参数的来历第一版半径公式s·(12.2a)的星太大「像圣诞装饰」改小后与金箔的颗粒尺度匹配。上浮是返修加上的——只闪烁不上浮时两颗粉之间会长时间不动形成新的静止区。3. 金箔碎片飘落34 片翻面用P.particles(34, 77, t, { x0:0, x1:W, y0:−30, y1:720, speed:150, drift:36, life:3.2 })paint.js#L194-L199 的确定轨迹粒子在画面上半部撒 34 片金箔碎片每片按i%3在「方块」与「圆片」间切换scale(1, cos(t·5i))做翻面金色对角渐变#fbe6a0 → #a8741e随旋转方向变亮变暗L169-L171。这是「《吻》背景里的金屑」意象速度 150px/s 比落叶窗内 120px/s更快承担主要的每帧运动量。坑配方卡的四条审片记录这一节是配方卡最有工程价值的部分每条都有对应代码证据逐个纹样source-in会把彼此清掉。这是合成模式的经典陷阱source-in只保留「新图与已有不透明区域」的交集如果对 150 个纹样逐个执行每画一个都会把前一个裁掉。正确做法是先把全部纹样画满一张离屏再对剪影一次性source-inL188-L191const R_ P.scratch(kl_robe), rg R_.getContext(2d); const Pt P.scratch(kl_pat), pt Pt.getContext(2d); pt.reset(); robePattern(pt, t, lt); // 纹样先画满一张 rg.fillStyle #000; [G.farSleeve, G.skirt, G.torso].forEach(p rg.fill(p)); rg.globalCompositeOperation source-in; rg.drawImage(Pt, 0, 0); // 一次性裁进剪影这条经验在 迁移测试 C 的转场通用经验 里也独立出现过一次「新画面藏在一个形状里」这类需求形状是多段并集时不要clip(并集 Path2D)子路径绕向不一致会抵消成洞改用离屏填充再source-in。流光 α .38 → .24。见上节超过 .3 的 lighter 亮带读起来是镜头眩光而非「金墙反光」。静止段返修。初版只有眨眼间歇 软渐变流光20/36 帧对静止加上金箔碎片、金粉上浮、花点头幅度 0.18→0.35 三样后降到 0/36。方法论可以推广静态纹理风格里静止帧要靠「全场连续小运动」飘落/上浮/幅度加大兜底而不是靠放大少数几个动画元素。猫身上的金螺旋第一版连脸上都有审片说「像起了疹子」。改法用isPointInPath区分身体、头部、白斑区螺旋只落在身体且非头部的橘色区数量减到 46 个L152-L155白斑区改画小圆环。这也是一条通用审片经验装饰纹样要尊重角色的「干净区」——脸是信息区不能参与装饰密度。此外INDEX.md 记录的当前短板是「桌上的手没接袖子」即RIG.girl的远侧手与金袖剪影在袖口处有接缝是下次提质时要解决的具体位置。签名转场 goldLeaf金箔从头部螺旋铺开进入克里姆特段的转场 goldLeaf0.5s与配方卡描述完全对应72px 方格铺满屏幕每格的次序 key 离少女头部 (1300,380) 的归一化距离×0.78 方位角×0.12 随机×0.08——距离主导、方位角引入螺旋、随机打破整齐所以金箔看起来是从头部螺旋铺开而不是同心圆扩散transitions.js#L417-L420每块进度q (p·1.32 − key)/0.32q0.5时一片金箔从 1.3 倍、带旋转落位金色渐变高光随 q 移动箔面压有螺旋、眼形或同心圆三种暗纹t.m取值 0/1/2L433-L4370.5q1时该格露出 B新画面金箔淡出L424-L427。这符合 02-机制 的转场设计原则转场不从通用库里挑而从「新风格最有辨识度的形式元素」里长出来——进克里姆特就是金箔一片片贴上来。配方卡的机制文档也补充这类复杂签名转场金箔、色带、飘带需要 0.48–0.5s比原片 0.4s 的简单形状更长。参数与路径索引内容位置本风格配方卡references/风格配方/18_klimt.md场景实现227 行scripts/engine/scenes/18_klimt.js风格总索引质量评级、短板references/风格配方/INDEX.mdgoldLeaf / screamWarp 等迁移测试转场说明references/风格配方/_转场_迁移测试.md转场实现goldLeaf 在 L415scripts/engine/transitions.js噪声 / fbm / 缓存 / 粒子 / 编舞scripts/engine/lib/paint.js场景骨架与五层机制references/02-机制.md复用这份配方时的三个前提W1920, H1080画布约定、P.cached/P.scratch离屏缓存体系以及共享的RIG角色骨架与KIT.choreo编舞——它们保证 18 号场景与其余风格在同一骨架坐标下互相对齐转场也能以画内物体少女头部、杯子为原点设计。赞分享【免费下载链接】huashu-art-motion艺术动画skill35种艺术风格、9种解说语法用代码让画动起来。项目地址https://gitcode.com/gh_mirrors/hu/huashu-art-motion点击查看免费下载相关推荐huashu-art-motion 05_gothic 哥特泥金手抄本逐像素金箔着色、金色度掩膜与角色编舞全管线huashu art motion 05_gothic 哥特泥金手抄本逐像素金箔着色、金色度掩膜与角色编舞全管线 本篇以仓库中 05_gothic 风格配方卡huashu-art-motion 的 8-bit 像素风格配方240×135 低分辨率画布、14 色调色板与 NES 式部件描边huashu art motion 的 8 bit 像素风格配方240×135 低分辨率画布、14 色调色板与 NES 式部件描边 本文以 14_8bit.mhuashu-art-motion 风格配方 13_pop用 createPattern 本戴点与四格换色纯代码复刻 1962 波普艺术huashu art motion 风格配方 13_pop用 createPattern 本戴点与四格换色纯代码复刻 1962 波普艺术 本篇基于 refe上一篇微信聊天记录导出十分钟跑完的完整教程下一篇ZCode Browser Use 控制浏览器 Skill 实战指南基于 Node REPL 的浏览器自动化完整工作流创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考