如何5分钟即时设计一个「灵动岛」动效？

在前不久刚发布的iphone14中，灵动岛可以说是C位出圈，今天我就教大家花5分钟设计一个小红书的灵动岛动效。

开始设计

首先让我们打开即时设计，将涉及到「灵动岛」的4个UI页面进行设计（如下图）设计的过程就不做重点介绍。

设计交互

UI部分设计结束之后，我们就进入了交互设计的环节，这也是本次教程的精髓所在。首先我们要对完整的「灵动岛」交互有个清晰的思路，以及非线性动效的展示。

首先让我们选中页面1上方的胶囊提示部分，接着在右边的交互事件选项中选择「点击」，跳转页面2，事件类型选择「点击」，行为选择「跳转画板」，过渡动画选择「智能动画」即可。交互动画创建完毕后，大家可以试着点击顶部的预览按钮，看看是否达到了理想中的交互效果。

接下来的一切就水到渠成了，我们只需重复以上的操作即可完成灵动岛的交互动画。我们只需选中页面2上的胶囊连接到页面3上，页面3连接到页面4，并且重复之前的设置项操作即可。

最后还有一步就大功告成啦，我们为了让动画能够循环播放，我们只需框选每一个画板，在事件类型选择定时即可，就像下图这样。

以上就是灵动岛的基础交互教程，如果大家还有疑问，可以进群一起讨论哦，我们会持续更新有关这方面的交互教程，敬请期待！