中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

演示地址：Axure版跳一跳

實(shí)現(xiàn)效果：

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

原理分析：

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

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

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

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

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

元件準(zhǔn)備：

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

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

實(shí)現(xiàn)步驟：

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

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

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

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

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

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

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

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