利用ChatGPT，工程师们研发出了这款智能动画工具Keyframer，它的界面十分简洁，初始状态下只有图片和提示词两个输入框。
只需要用自然语言描述动画的内容，它就会为我们搞定动画代码并进行实时渲染，平均耗时17秒，最长也不过1分钟。
不同于我们常见的jpg、png等图片格式，SVG是通过人类可读的代码来表示图像当中的元素的。
比如下面这张图，就是用SVG仿制的量子位logo，它直接以右侧的代码形式存储，可以直接被浏览器读取。
通过给SVG代码中的属性设定动态变化，就可以实现元素的位移、缩放、旋转、变色等各式各样的动画。
其中，属性变化既可以通过SVG规范设定的内置动画实现，还可以嵌入到网页中通过JS脚本或CSS（层叠样式表）动画实现，Keyframer采用的是CSS方式。
需要注意的是，SVG文档中的元素需要带有id标注，这既是为了让大模型能够知道添加动画的位置，也是为CSS动画代码提供靶点。
点击绿色的生成、按钮后，Keyframer就会调用GPT，生成动画代码并可在页面中显示渲染结果。
据开发者统计，Keyframer生成一段动画代码的平均时间约17秒，最快6秒即可完成，最长也只有一分钟。
生成质量方面，Keyframer在大多数情况下都能生成高质量的动画代码，测试中错误率只有6.7%。
这样一来，Keyframer解决了设计师难以将动画迁移到Web界面的问题，快速的修改方式也大大降低了动画版本迭代过程的工作量。
所以，除了用户界面之外，最关键也是最困难的便是提示词的设计——而除了开发者，用户也需要思考这个问题。
为了探究这一问题，让使用者可以更好地运用Keyframer，研究团队邀请了来自不同职业的13名测试人员。
这13名测试者都有AI工具的使用经历，其中11人用过ChatGPT，7人用过DALL·E或MidJourney，按照他们平时工作中“代码”和“设计”含量的高低，这13名人员被分成了四组。
这些受试者首先用15分钟的时间了解了关于SVG动画的基础知识和Keyframer的使用方法。
接着，他们又用了3分钟的时间体验了传统的SVG动画设计工具，并观看了Keyframer的效果演示。
完成这些铺垫后，他们被要求用Keyframer为下面两张图添加动画，两张图各有5分钟思考和15分钟操作时间。
每完成一张图的动画，研究人员都会和他们进行5到10分钟的谈话，询问对Keyframer是否满意，以及操作过程中遇到的问题，最后还会谈论整体感受。
通过对体验者的prompt特征进行分析，13人中有9人更倾向于分步式的提示风格，另外4人则设计了“一体式”的提示词。
另外，研究者还发现，用户对“语义”（Semantic）提示词的青睐程度高于高特异性（High Specificity）提示词。
在实验中，研究团队收集到的提示词中，有84.4%都是语义性的，特异性提示词则主要是被HCLA组选择。
本文为澎湃号作者或机构在澎湃新闻上传并发布，仅代表该作者或机构观点，不代表澎湃新闻的观点或立场，澎湃新闻仅提供信息发布平台。申请澎湃号请用电脑访问。
