这更像是一种将 3D 动画集成到原型中的

adnanhridoy2844

您也可以使用 GIF但这样您就可以完全控制图像，而不仅仅是播放/停止，从而允许您创建一个模拟旋转对象界面的原型，常见于汽车网站，您可以在其中旋转汽车。


主要物体是一个玻璃方块，里面有 手机号数据库列表 一个瓷球，它是一个 3D 构图，物体位于 45 度视图中。 有两个箭头，一个向右，另一个向左。 动画显示鼠标单击箭头，对象旋转到相同方向。
想象一下一个带有可以翻转的 3D 模型的电子商务网站。（大预览）
在本例中，我使用了九张图像（您可以使用更多或更少，具体取决于您需要的旋转），重现此交互的重要步骤是：

为每个图像创建一个变体（在本例中将需要 9 个变体），并按照序列顺序在每个图像中包含一张图像。
创建箭头按钮，它将成为热点。
将右箭头连接到下一个变体（对每个变体重复）。
将左箭头连接到前一个变体（对每个变体重复）。
使用即时动画而不是智能动画来避免淡入/淡出效果并创建运动的错觉。
结论
我使用此功能的次数越多，我就越认为它将为网页和产品设计领域的公司带来游戏规则的改变。掌握交互式组件和变体将使设计人员能够以更少的精力制作出更好、更先进、更真实的原型，让您可以自由地进行实际设计，减少对设计工具本身的关注。

如前所述，我使用本文中的示例创建了一个 Figma 社区文件（以及我在新功能测试期间所做的一些实验）。加入 Beta 版后，请随意复制我的设计、遵循或开始实验，并分享您的结果！调整动画时间，更改缓动，尝试旋转、缩放元素，尝试嵌套不同的交互组件。

下载 Figma 设计文件 →
如果您有疑问或有什么不完全清楚的地方，请在下面的评论部分留下问题，或在 Twitter 上联系我 ( emi_cicero ) — 我很乐意提供帮助

市面上有一系列 Headless CMS。在本文中，我们深入研究了无头 CMS 功能，以满足您的内容编辑、营销人员和您作为开发人员的需求。对于有经验的无头实践者来说，这可能是一个检查表，可以查看那里有什么新鲜事。对于那些开始无头之旅的人来说，这可能是寻找什么的指南。