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

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

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

2.設(shè)定動態(tài)面板完成拖拽時的交互

a.到達(dá)指定區(qū)域進(jìn)入screen界面

b.未到達(dá)指定區(qū)域則控件返回原處

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

一．選好三張圖片

二．設(shè)定兩個動態(tài)面板

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

放在圖中的1，2位置

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

在1號動態(tài)面板中添加一個大小和控件大小相同的控制面板，命名為“滑動控件”，將控件圖片添加進(jìn)“滑動控件”面板中，接下來對“滑動控件”做相應(yīng)的交互設(shè)計就可以了。

2號控制面板命名為“結(jié)束”

在交互動作中添加進(jìn)這些事件

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

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

a.用例1

點(diǎn)擊添加條件如下圖

添加一個動作：

b.用例2

點(diǎn)擊添加條件如下圖

添加一個動作

注意：這里的動畫調(diào)成 緩慢結(jié)束 800ms 效果會更好

到這里就對滑動解鎖的交互完成了，是不是很簡單呢！哈哈！這時候你會發(fā)現(xiàn)，我進(jìn)入screen界面后無法返回，別急！添加一個矩形在home的位置，鏈接到前一個頁面，這樣就能夠連續(xù)操作了喲！好，今天的交流就到這里。

丟下一個小問題：

這個時候我們的控件是能夠左右移動無限距離的，能不能讓控件只在框內(nèi)移動呢？我們在以后的axure小技巧中來為大家解答！

作者：lucky

文章來源：365ucd.com

標(biāo)簽： axure教程 axure小技巧 iphone滑動解鎖效果 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。