学习笔记 · Friends 创作复盘

显影与错版:从艺术方向到可操作的动效

CSSJavaScriptCanvasSVG

这次为创作空间增加了 10 个艺术器物图标、一个蓝晒登录实验和一张可调节、可导出的套印海报。目标是让材料语言决定交互,而不是在相同模板上换颜色。

两种艺术语言

显影登录以蓝晒植物、普鲁士蓝和棉纸色为中心,衬线标题与开放表单左右分区。曝光滑杆改变图像亮度,鼠标仅产生很小的纸面位移;提交时光带经过植物,让“等待”成为一次显影。它区别于既有的丝线花朵、金属声场、几何角色、台灯与立体赛场。

错版印务使用浅薄荷底、深墨绿大字与粉色、钴蓝、酒红植物叠印。三栏构图把文案、纸张和控制台并置,侧栏调色、套印位移、油墨浓度直接改变画面。与已有织物叙事、成衣商店、工业网格、柔和花朵、科技轨道和城市漫游不同,这一页的中心是可带走的平面作品。

两页的概念与植物素材均使用内置 ImageGen 生成。导航、表单和按钮是真实 HTML;植物素材是生成的艺术图像,不是真实历史蓝晒收藏。数字套印效果不模拟真实印刷油墨、套准精度或色彩管理。

十个图标如何算十个

艺术器物图标包含:沙漏、节拍器、棱镜、印章、折扇、风铃、望远镜、磁带、陀螺、音叉。每个都有独立语义和矢量路径。它们的线性与双色版本共 20 款,但只计作 10 个新设计。

统一使用 24 × 24 坐标、圆头和圆角连接、明确的负空间,导出 SVG、透明 PNG 与可复制组件代码。图标目录、文件清单和下载包共同更新,避免页面有图、压缩包却仍是旧版本。

让动画可被打断

一个可靠的交互要同时考虑进入、改变、离开和中断。显影表单区分空输入、非法邮箱、短密码、处理中与成功;重复提交不会重复启动计时器。离开页面时取消等待,清除密码,恢复可重试状态。输入不发出网络请求、不进入 Cookie 或浏览器存储。

海报在新设置到来时,先保存当前帧,再在短时间内过渡到目标画面。连续拖动滑杆不会累计一串过时动画。一次变更完成后停止申请动画帧,静止画面不持续占用渲染循环。离屏或后台直接收敛到最新设置,返回时保持一致。

预览与导出共用画法

海报的预览和 PNG 导出共用同一绘制函数。色彩方案在离屏画布中缓存;套印偏移按画布宽度比例换算,避免大图下载后效果与小预览不同。导出为 1200 × 1800 PNG,文字在浏览器中绘制;分辨率不是印刷精度承诺。

下载按钮等待素材及字体就绪;图片失败保留静态作品和可理解的错误状态。对象 URL 在下载后释放,页面离开时清理剩余资源。所有设置只存在于当前页面。

触屏与减少动态效果

鼠标视差只针对精确指针,触屏仍保持原生页面滚动。手机将艺术画面、表单或控制台纵向排列,标签、焦点与反馈留在真实文档中。系统要求减少动态效果时,取消光带、倾斜和画布渐变,保留曝光调节、套印设置与导出功能。

无 JavaScript 时,登录表单处于不可提交的静态展示,海报保留原图与下载入口。静态降级不应成为空白屏,也不能暗示完成了真实登录。

让下一次更新可以继续

技术复盘的 Markdown 来源与显式名单保留在项目内。发布项目笔记时只读取这份名单,再合入既有公开资料快照,不扫描私人 Vault,也不重新导出个人 Skills 正文。全量公开导入结束后会再次合入项目笔记,避免这次总结被下次生成覆盖。

验证时分别检查文件与引用、图标导出、表单状态、画布变化、下载内容、桌面与手机排版。线上状态必须由对应提交的部署结果和真实域名检查确认,本篇技术说明本身不是上线证明。