Keyframer：利用大语言模型（LLMs）将静态图像转换成动画。

该项目由苹果开发，通过自然语言提示，可以从静态SVG图像创建动画插图。

同时通过LLMs生成的CSS动画代码，用户可以对生成的动画进行细化编辑。

这意味着，无论你是想让一个设计中的元素旋转、移动还是淡入淡出，你都可以通过描述这些动作的文字来实现。

Keyframer主要功能：

1、自然语言控制：用户可以使用自然语言提示来指导动画的创作过程，无需深入了解动画制作的复杂技术细节。

2、迭代设计支持：Keyframer允许用户通过编辑大语言模型生成的CSS动画代码或属性来迭代和精细化他们的设计，提供了一种直接和灵活的方式来调整动画效果。

3、设计变体探索：用户可以请求设计变体，这支持了创意过程和设计探索，帮助用户发现和尝试新的设计方向。

4、分类用户提示策略：通过用户研究，Keyframer贡献了用户提示策略的分类，包括用于描述运动的语义提示类型和“分解”提示风格，这有助于用户更有效地与工具交互。

Keyframer将动画设计的门槛大大降低，让更广泛的受众能够参与到动画创作中，不仅对设计师有益，对于任何对动画创作感兴趣的人来说都是一个有价值的工具。

工作原理：

1、自然语言处理： 用户通过自然语言描述他们想要为静态SVG图像创建的动画效果。这些描述可以包括动画的方向、速度、效果等详细信息。

2、LLM生成动画代码： Keyframer利用大语言模型（如GPT-3）来解析用户的自然语言描述。基于这些描述，LLM生成相应的CSS动画代码。这段代码是动画效果的“配方”，指定了动画的具体行为，如动画的持续时间、变化的属性（例如位置、大小、颜色等）以及动画的时间函数。

3、动画渲染和预览： 生成的CSS代码应用于输入的SVG图像，创建动画效果。用户可以在Keyframer的界面中实时预览这些动画，以评估效果是否符合他们的预期。

4、直接编辑功能： 为了进一步细化和定制动画，Keyframer提供了代码编辑器和属性编辑器。用户可以预览这段代码生成的动画效果，如果效果符合预期，可以直接使用；如果需要调整，用户还可以通过编辑生成的CSS代码来细化动画的效果。这一步不需要用户编写代码，但他们可以直接修改代码来调整动画的各种参数（如速度、方向、延迟等），以达到完全符合他们设计意图的动画效果。

5、设计迭代与探索： 用户可以通过添加新的自然语言提示来请求设计变体或对动画进行迭代。这支持了创意思维和设计探索过程，允许用户在看到初步效果后，继续调整和完善他们的动画设计。

6、用户提示策略和反馈循环： Keyframer支持分解式提示风格，用户可以分步骤地描述和细化动画的各个部分。系统的设计允许用户基于生成的动画效果和直接编辑的反馈，不断调整他们的提示策略，实现设计目标的逐步精细化。

实验结果：

研究表明，即使是动画和编程经验较少的用户，也能够使用Keyframer有效地创建动画。通过直接编辑生成的CSS代码，用户可以对动画进行精细调整，这增强了他们对设计过程的控制感和满意度。

研究还发现，LLM生成的输出有时会出现意外的、创意的解决方案，这为设计过程带来了意外的惊喜和新的灵感。这些意外的输出有助于扩展用户的设计思维，推动他们探索新的创意可能性。
论文：https://t.co/pOXOXDSbtq

PDF：https://t.co/LHbps1IVil

点击图片查看原图

点击图片查看原图

点击图片查看原图