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

演示地址：Axure版跳一跳

實現(xiàn)效果：

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

原理分析：

（1）本案例循環(huán)面板有2個狀態(tài)，分別命名“state1、state2”，面板載入時，每隔5秒變化一次狀態(tài)。

（2）循環(huán)面板狀態(tài)為state2時：

1. 在4秒鐘內(nèi)向右線性移動“Axure”板塊，移動距離為640px；
2. 同時，在1秒鐘內(nèi)逆時針將“版”板塊旋轉(zhuǎn)180度（相對位置），因為要向左跳一個，所以還需以中心為錨點，向左偏移80px；
3. “版”板塊向左跳轉(zhuǎn)成功后，要等待1秒鐘，再設(shè)置“跳”板塊向左跳一格；
4. “跳”“一”“跳”三個板塊的跳轉(zhuǎn)設(shè)置同理，不再描述。

（3）循環(huán)面板狀態(tài)為state1時：

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

元件準備：

1. 5個矩形框，分別填寫“Axure”“版”“跳”“一”“跳”文字；
2. 1個循環(huán)面板，狀態(tài)為“state1”“state2”。

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

實現(xiàn)步驟：

1）設(shè)置循環(huán)面板載入時事件

2）設(shè)置循環(huán)面板狀態(tài)改變時事件

面板初始狀態(tài)為state1，面板載入時就切換為state2，設(shè)置面板狀態(tài)改變時事件。

狀態(tài)為state2時，“Axure”板塊向右滑動，“版”“跳”“一”“跳”分別向左跳一格，下圖是“版”板塊向左跳的設(shè)置。

狀態(tài)為state1時，“Axure”板塊向左滑動，“版”“跳”“一”“跳”分別向右跳一格，下圖是“跳”板塊向右跳的設(shè)置。

本案例已完成，點擊查看上一篇案例《仿網(wǎng)易云播放器：帶聲音可歌曲的播放器》

本文由 @十月大神 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。