? ? 下班前看到一個群友發了一張“跳一跳”的動效圖，覺得挺好玩的，就隨手也做了“Axure版跳一跳”。以下是原理分析、實現步驟。

演示地址：Axure版跳一跳

實現效果

1、“Axure”板塊向右平滑移動，與“版”“跳”“一”“跳”即將靠近時，“版”“跳”“一”“跳”分別向左跳一格；

2、“Axure”板塊向左平滑移動，與“版”“跳”“一”“跳”即將靠近時，“版”“跳”“一”“跳”分別向右跳一格。

原理分析

1、本案例循環面板有2個狀態，分別命名“state1、state2”，面板載入時，每隔5秒變化一次狀態，

2、循環面板狀態為state2時，

2.1 在4秒鐘內向右線性移動“Axure”板塊，移動距離為640px；

2.2 同時，在1秒鐘內逆時針將“版”板塊旋轉180度（相對位置），因為要向左跳一個，所以還需以中心為錨點，向左偏移80px；

2.3 “版”板塊向左跳轉成功后，要等待1秒鐘，再設置“跳”板塊向左跳一格；

2.4 “跳”“一”“跳”三個板塊的跳轉設置同理，不再描述。

3、循環面板狀態為state1時，

3.1 向左移動“Axure”板塊，設置“版”“跳”“一”“跳”向右跳一格，方法同上。

元件準備

1、5個矩形框，分別填寫“Axure”“版”“跳”“一”“跳”文字

2、1個循環面板，狀態為“state1”“state2”

將所有元件整理并轉換為動態面板后如下（轉換為動態面板是方便計算移動距離，不轉換為動態面板的時候注意移動距離設置即可）：

實現步驟

1、設置循環面板載入時事件

2、設置循環面板狀態改變時事件

面板初始狀態為state1，面板載入時就切換為state2，設置面板狀態改變時事件

狀態為state2時，“Axure”板塊向右滑動，“版”“跳”“一”“跳”分別向左跳一格，下圖是“版”板塊向左跳的設置

狀態為state1時，“Axure”板塊向左滑動，“版”“跳”“一”“跳”分別向右跳一格，下圖是“跳”板塊向右跳的設置

本案例已完成，點擊QQ群“532261671”獲取源文件；

更多案例請點擊http://www.pmgod.cn?查看。