Gemini+SVG手搓一个电子烟花放在公众号里！

奇点Singularity

发布于:2025-12-29

文章内容来源于公众号：奇点Singularity，点此可查看原文，内容版权归相关企业所有，本网站仅供交流学习。若涉及版权问题或存在侵权情况，请及时与我们联系，我们将第一时间进行删除处理。

摘要：复旦大学奇点新媒体研究中心 教程版权所有

奇点新媒体研究中心版权所有 动画内容禁止任何个人、机构、第三方编辑器出于商业目的案例化引用和复用以及二次模板化行为 违者必究 SVG 指导老师 计育韬


元旦和马年春节将至，公众号可以安排哪些应景的 SVG 高级交互排版？本期专题，研究中心为同学们演绎一期基于 Gemini 为主的 SVG 电子烟花燃放交互。


这一交互范式最早由交互实验室开发，而奇点新媒体研究中心在此表现形式基础上，剔除了序列帧的运行强度，改为 CSS 滤色混合模式提升代码结构的运行速度并降低创作难度。更重要的是，我们首次采用 Gemini 工作流来重点处理烟花燃放效果，并录制导出 GIF 动画；音效则采用可灵生成，可谓全方位实验了 AI 产品的跨界式 SVG 场景应用。


Gemini 生成烟花特效

按以往的创作思路，此类烟花效果会首选通过 AE 等视频软件制作，无论套模板还是手搓，Particle 粒子动画的制作强度都不言而喻。现在，我们换一个思路，如果通过纯前端方式是否能一样形成类似的烟花特效？

当然可以！

进入 Gemini，先给到一个基本的交互界面方向需求，让它生成一个能让用户自定义烟花文案的功能，测试应用的逻辑运行。

第一次产生的烟花效果必然是不会让你完全满意的，那么我们接下来就可以根据它的具体表现进行修改。更巧妙的方法是，在 Gemini 生成一定逻辑合理的烟花特效后，要求其布局出一个控制模块，方便用户对烟花的细节特效进行调整：

这样一来，我们不必像摇骰子一样期盼着 Gemini 给出一个随机的优秀结果——而是在当前效果前提下，更自主地控制烟花的生成方式。最后，我们布置了如下的可控参数：

当然，也包含了文本的自主输入功能：

接下来的工作就比较简单了，通过 OBS 录屏，以无鼠标指针方式录制多个文案的燃放效果视频，随后导入视频软件裁切出需要的尺寸和片段：

对于每个导出的视频，拖拽到 PS 内导出 GIF：


可灵生成烟花音效

可灵目前具备独立的音效生成模块，这可能是很多 AIGC 创作者没有注意到的功能：

抽出自己满意的片段，可以适当剪辑处理，产生一个 4-5 秒的烟花音效即可。接下来，我们补一个黑屏画面，合并渲染成视频以备用，因为本期 SVG 交互的音画同步，本质上是双层触发体系——touchstart 指令带动烟花组 SVG，click 传递给下层的视频按钮控件，播放视频后自然可以听到音乐，但视频本身并不可见。

SVG开发流程

为了确保 touchstart 可以被依次引起，并且每次都能穿透触及下方视频，我们这里采用计育韬老师早期在《微信SVG高级交互排版》课程中提出的抽屉布局原理，将嵌套的烟花 GIF 连续以实际斐波那契数列关系排列，代码上通过嵌套构建，变成无限组合的抽屉阵列：

而对于视频的激活，我们借用一下 E2 编辑器中「切换图片+伪音频视频教程」组件架构，这样省去了 rect 热区和视频按钮双重定位的工作量：

上传刚才备用的视频文件到公众号，获取它的代码并导入 E2 编辑器的对应 SVG 模版中，再把我们需要的代码取出布局到整体代码内即可。

如此一来我们就完成了一个公众号里的电子烟花生成器 SVG，是不是非常简单？

欢迎进一步探讨

欢迎进一步探讨秉持「技术公平」理念，复旦大学奇点新媒体研究中心长期为广大央媒提供公益的交互设计技术支持，你可以通过《奇点新媒体研究中心 | 组织介绍 | 复旦大学》了解到我们与各大头部媒体的共创设计。

如果你所在的单位也有元旦、春节相关的交互设计以及 AIGC 创作需要，期望得到高阶的技术指导支援，可以通过专业技术助教微信 Zhuoya_Work 或组织外联微信 FDUSingularity 与我们取得联系。

提前祝广大复旦大学师生朋友新年快乐！

-END-


奇点Singularity

本文可由 i排版团队 制作完成

扫码咨询合作

微信号：playhudong004

同账号文章