自己常用的 Prototyping Tools 主要是 Framer (Classic)和 Principle 。Framer 用于相对高保真的方案输出,而简洁易用的 Principle 则用于对高保真设计要求不高的需求,快速出货。
然而,最近在处理一个看起来很简单的交互动效时发现这两个工具竟然都达不到要求。
动效大致意思如下,点击 Checkbox 后,底部通过缩放和透明的的变化变成蓝色,同时 Checkbox 的对勾以描边的形式展示出来。很简单,但Framer 和 Principle 竟然都无法实现。
底部的变化很容易实现,难点在于 F 和 P 都没有提供路径动画的支持。Framer 理论上是可以是实现的,但系统更新 Big Sur 之后 Framer 的画布渲染一直出现频闪的问题,Framer X 虽然有播放 SVG 路径动画的组件,但没法对其加入交互事件。无奈之下用 Google 做了功课,发现 Flinto 对路径动画提供了很好的支持(赞)。
Flinto 的路径描边以 0-100% 的方式控制,极易上手。通过自身的 Behavior 元素事件可以非常容易的实现期望的效果。
此外还有一个小惊喜, Flinto 提供了对 iPhone 线性马达的支持,可以在交互事件发生的时候让设备发生震动。这也是 Framer 和 Principle 还没有的能力。
各位在遇到类似需求时可以试下这个小发现。