这两个术语回答不同的问题。 Smart Animate 回答“发生了什么变化?”它查看两个帧,找到名称匹配的图层,并将其位置、大小、旋转、不透明度和其他属性从一帧动画到另一帧。
缓和回答“随着时间的推移它如何变化?” Figma 允许您选择标准曲线,例如缓出曲线、自定义三次贝塞尔曲线或弹簧。弹簧缓动是由物理设置、刚度、阻尼和质量定义的,而不是固定的持续时间,因此运动会像真实物体一样加速和稳定。
真正的区别出现在代码中。在产品中,弹簧可以从元素的当前位置和速度开始。如果用户中断过渡或轻弹纸张,运动会自然继续而不是跳跃。原型过渡每次都以相同的方式播放,这对于显示意图很好,但不能显示运动在真实输入下的行为方式。
因此,Figma 原型是一个很好的参考,但开发人员仍然在代码中重建运动。为了保持值一致,许多团队将弹簧设置保存为运动标记。我们免费的 Figma 动画到 Spring 转换器将 Figma 缓动转换为可在代码中使用的弹簧设置。
如果您希望交互式版本成为可交付成果而不是参考,则需要具有运行时的工具。我们制作的 ExodeUI 将状态、弹簧和事件存储在一个在应用程序中运行的文件中。