Axure RP8 教程：iPhone滑動解鎖效果

5 評論 3372 瀏覽 8 收藏 3 分鐘

今天帶大家使用產(chǎn)品經(jīng)理必備神器axure實現(xiàn)iphone滑動解鎖效果，一起來看看~

一、準(zhǔn)備素材

準(zhǔn)備好一張背景圖，繪制一個外邊框命名“邊框”，330*60，圓角30。

繪制一個圓形命名“滑塊”，，50*50，圓角25，距離外邊框各個邊框距離5px。

新建一個頁面，作為解鎖以后進入的主頁。

二、交互設(shè)置

將滑塊轉(zhuǎn)化為動態(tài)面板，設(shè)置動態(tài)面板載入事件，載入時設(shè)置變量location=滑塊的x坐標(biāo)。

設(shè)置動態(tài)面板拖動事件

1. 拖動時，設(shè)置動態(tài)面板水平拖動

這里需要注意三點：

（1）邊界設(shè)置，滑塊的位置應(yīng)當(dāng)大于等于location小于等于location + 320。這里的270是這么來的：外邊框的長度-2*間距。

（2）如果拖動時候如果當(dāng)前滑塊x坐標(biāo)小于location + 270，則水平拖動。270的由來：外邊框長度 – 2*間距 – 滑塊寬度。

（3）如果拖動時候如果當(dāng)前滑塊x坐標(biāo)大于等于location + 270，則進入主頁。

2. 拖動結(jié)束后如果滑塊沒有到達終點，滑塊退回到原來位置

好了，到這里已經(jīng)完全實現(xiàn)效果了，按下f5預(yù)覽吧。

 

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

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

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
產(chǎn)品李
公眾號：產(chǎn)品李 PM的自我修養(yǎng)
6篇作品 51428總閱讀量
03-102983 瀏覽
百億補貼不是低價解藥，電商急需新故事
07-073394 瀏覽
“狂飆”的短劇，用十萬成本撬動千萬生意
05-243977 瀏覽
當(dāng)下無法繞開的一個話題叫做：內(nèi)容驅(qū)動消費
08-231693 瀏覽
產(chǎn)品經(jīng)理如何進階到管理崗？
07-184394 瀏覽
拿什么拯救你，我的數(shù)據(jù)報表？數(shù)據(jù)報表設(shè)計的四個“也許”法則！
評論
評論請登錄

  1. 哈，看完還是不太會？你可能需要從Axure基礎(chǔ)開始學(xué)

    ?? 這里推薦你加Axure實戰(zhàn)班的助教小可愛@CC-起點學(xué)院（微信：qidiancc520），回復(fù)關(guān)鍵詞：原型禮包

    領(lǐng)取適合產(chǎn)品新人的原型設(shè)計大禮包哦，cc還會不定期分享Axure免費視頻課程呢！

    來自廣東 回復(fù)

  2. 注意當(dāng)中三點，第一條里面應(yīng)該是320的由來，你寫成270啦

    來自安徽 回復(fù)

    1. 270的由來：外邊框長度 – 2*間距 – 滑塊寬度

      來自湖南 回復(fù)

    2. 嗯嗯，看懂了，我是說你上面有個文字小錯誤，（1）邊界設(shè)置，滑塊的位置應(yīng)當(dāng)大于等于location小于等于location + 320。這里的270是這么來的：外邊框的長度-2*間距。應(yīng)該是320是這么來的~~~

      來自安徽 回復(fù)

    3. 感謝提醒

      來自湖南 回復(fù)