axure制作iPhone滑動解鎖效果的方法

時間：2025-11-19 22:59:52 網頁設計

　　我們為大家收集整理了關于axure制作iPhone滑動解鎖效果，以方便大家參考。就跟隨百分網小編一起去了解下吧，想了解更多相關信息請持續關注我們應屆畢業生考試網!

　　在我們第一次接觸iphone時，都曾醉心于iphone手指輕輕一滑世界便在掌握的爽快感受，axure作為一款強大的交互軟件，我現在告訴你：這個可以有。你想要自己制作iphone的滑動解鎖效果嗎，筆者在這里為你提供一個很簡單的用axure實現的小技巧，讓我們在axure的成長道路上多多交流。

　　其實完成這一動作只需要滿足兩個條件：

　　1.iphone的一張背景圖、一個滑動控件圖、一個ip的screen的圖片

　　2.設定動態面板完成拖拽時的交互

　　a.到達指定區域進入screen界面

　　b.未到達指定區域則控件返回原處

　　設定好了這些內容，我們就可以生成原型，欣賞自己的作品吧。好，下面筆者將詳細講解如何來制作這個功能吧。

　　一.選好三張圖片

　　二.設定兩個動態面板

　　一個動態面板的大小長度和解鎖框的大小一致，另外一個可以盡量小一些僅用來判定滑動控件的位置就可以了

　　放在圖中的1，2位置

　　接下來看1、2號控制面板

　　在1號動態面板中添加一個大小和控件大小相同的控制面板，命名為“滑動控件”，將控件圖片添加進“滑動控件”面板中，接下來對“滑動控件”做相應的交互設計就可以了。

　　2號控制面板命名為“結束”

　　在交互動作中添加進這些事件

　　1.如用例1中：選擇移動動態面板→選擇“滑動控件”動態面板→移動選擇沿X軸移動。就像這樣：

　　2.接下來編輯ondragdrop事件，這個事件中我們要編寫兩個用例，一個用例是控件滑動到底時，一個用例是控件未滑動到底回到原位置

　　a.用例1

　　點擊添加條件如下圖

　　添加一個動作：

　　b.用例2

　　點擊添加條件如下圖

　　添加一個動作

　　注意：這里的動畫調成緩慢結束 800ms 效果會更好

【axure制作iPhone滑動解鎖效果的方法】相關文章：