跳一跳的变化图解

下班前看到一个群友发了一张“跳一跳”的动效图，觉得挺好玩的，就随手也做了“Axure版跳一跳”。以下是原理分析、实现步骤。

实现效果：

1. “Axure”板块向右平滑移动，与“版”“跳”“一”“跳”即将靠近时，“版”“跳”“一”“跳”分别向左跳一格；
2. “Axure”板块向左平滑移动，与“版”“跳”“一”“跳”即将靠近时，“版”“跳”“一”“跳”分别向右跳一格。

原理分析：

（1）本案例循环面板有2个状态，分别命名“state1、state2”，面板载入时，每隔5秒变化一次状态。

（2）循环面板状态为state2时：

1. 在4秒钟内向右线性移动“Axure”板块，移动距离为640px；
2. 同时，在1秒钟内逆时针将“版”板块旋转180度（相对位置），因为要向左跳一个，所以还需以中心为锚点，向左偏移80px；
3. “版”板块向左跳转成功后，要等待1秒钟，再设置“跳”板块向左跳一格；
4. “跳”“一”“跳”三个板块的跳转设置同理，不再描述。

（3）循环面板状态为state1时：

向左移动“Axure”板块，设置“版”“跳”“一”“跳”向右跳一格，方法同上。

元件准备：