ARTICLE · 1256321
一个按钮变成整个 App:这段＂大厂级＂动画,其实是 AI 写的网页
一个按钮变成整个 App:这段＂大厂级＂动画,其实是 AI 写的网页最近刷到一期 AI 实战视频：博主「Mia 码上 AI」做了一段 16 秒的产品动画，一个按钮变成录音条，再缩成加载圈，最后摊开成会议记录，全程一镜到底。按她的说法，这不是剪辑软件做的，而是让 AI 写的一个约 400 行的网页。我把她的方法拆成普通人能用的几步。 先说为什么用网页 网页里的字是真字，放大不糊；圆角、阴影这些浏览器自带。所以做 App 演示、功能介绍，网页最省事，也最像真东西。她定了一条规矩：每个元素在哪、多大、什么颜色，都只由“现在是第几秒”算出来。这样逐帧截图拼成视频时，画面才不会错位。 三个让动画“高级”的小窍门 弹簧感：匀速移动像机器。让东西起步快、略微冲过头再弹回停稳，就是手机上那种舒服的手感。回弹要克制，多了像果冻。 踩节拍：她的配乐一拍半秒，先把“第几拍点按钮、第几拍出摘要”排进格子，再动手。点击声也放在同一张时间表上。 加一点拖影：每帧多拍几张叠起来，快速移动的地方自然带点模糊，不再一顿一顿。代价是渲染时间变成三倍多。 真正值得学的：先写“不要清单” 她的提示词分几块：有哪几个画面、每个画面落在第几拍、用哪种动法，外加一张不要清单：不要匀速、不要发光、不要渐变、不要粒子爆炸。她的经验是，不写这些，AI 就会回到它最熟的那套花哨默认样子。 第一版照样问题不少：横屏里形状太小、黑条滑过时字看不清、录音那段三秒没事干。她的办法是一次只改一处：加镜头推进、给字做一份白色副本、让计时器快进。 今天可以试 在豆包或 WorkBuddy 里粘贴： 请帮我写一个单文件 HTML 动画，打开就自动循环播放，时长约 10 秒，用来展示【你的产品/流程，例如：点“开始”→ 显示进度 → 出现结果卡片】。 要求：只用一个形状一路变化，不切镜头；动作带轻微弹簧回弹；黑白配色。 不要：匀速移动、发光、渐变、粒子特效。 先列出每一秒发生什么，等我确认后再写代码。 验收：把代码保存成 .html 用浏览器打开，能连续播放，而且结尾能自然接回开头。做到了，就算跑通了第一版。 冷静看 上面的效果和耗时都是博主自己的实测，她用的是海外大模型，国产工具第一版大概率更粗糙，要多改几轮。她也说得明白：这招适合做界面、流程、数据卡片，做不了真人、风景和手绘质感。想做得和你的真产品一模一样，得把真实截图或设计稿一起交给 AI。 红线 别把公司未公开的产品界面、内部数据发给 AI 做动画；对外发布前，确认用到的配乐和字体有使用授权。 你最想把哪个流程做成十秒动画？评论区说说。 来源声明：本文信息参考 YouTube 频道「Mia 码上 AI」的视频《AI 做 MG 动画：让 Opus 5.5 写代码，网页动得像大厂发布会》，观点与解读为本号自行整理，效果数据以博主原视频为准。
