相關(guān)推薦
您可能對下面課程感興趣
Axure8.0視頻教程

74小節(jié)已有16886人學過

UI交互app及axure設(shè)計教程

84小節(jié)已有76368人學過

手機滑動解鎖效果的制作
發(fā)布時間:2022-03-22 09:27 [ 我要自學網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 2775
在我們第一次接觸iphone時,都曾醉心于iphone手指輕輕一滑世界便在掌握的爽快感受,axure作為一款強大的交互軟件,我現(xiàn)在告訴你:這個可以有。你想要自己制作iphone的滑動解鎖效果嗎,筆者在這里為你提供一個很簡單的用axure實現(xiàn)的小技巧,讓我們在axure的成長道路上多多交流。

axure小技巧:iphone滑動解鎖效果制作

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

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

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

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

a.到達指定區(qū)域進入screen界面

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

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

一.選好三張圖片

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

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

放在圖中的1,2位置

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

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

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

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

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

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

a.用例1

點擊添加條件如下圖

添加一個動作:

b.用例2

點擊添加條件如下圖

添加一個動作

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

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

UI交互app及axure設(shè)計教程
我要自學網(wǎng)商城 ¥50 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔因您的行為而導(dǎo)致的法律責任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
相關(guān)推薦
您可能對下面課程感興趣
Axure8.0視頻教程

74小節(jié)已有16886人學過

UI交互app及axure設(shè)計教程

84小節(jié)已有76368人學過

分類選擇:
電腦辦公 平面設(shè)計 室內(nèi)設(shè)計 室外設(shè)計 機械設(shè)計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設(shè)計 會計課程 興趣成長 AIGC