- 相關(guān)推薦
axure制作iPhone滑動(dòng)解鎖效果的方法
我們?yōu)榇蠹沂占砹岁P(guān)于axure制作iPhone滑動(dòng)解鎖效果，以方便大家參考。就跟隨百分網(wǎng)小編一起去了解下吧，想了解更多相關(guān)信息請(qǐng)持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!
在我們第一次接觸iphone時(shí)，都曾醉心于iphone手指輕輕一滑世界便在掌握的爽快感受，axure作為一款強(qiáng)大的交互軟件，我現(xiàn)在告訴你：這個(gè)可以有。你想要自己制作iphone的滑動(dòng)解鎖效果嗎，筆者在這里為你提供一個(gè)很簡(jiǎn)單的用axure實(shí)現(xiàn)的小技巧，讓我們?cè)赼xure的成長(zhǎng)道路上多多交流。
其實(shí)完成這一動(dòng)作只需要滿足兩個(gè)條件：
1.iphone的一張背景圖、一個(gè)滑動(dòng)控件圖、一個(gè)ip的screen的圖片
2.設(shè)定動(dòng)態(tài)面板完成拖拽時(shí)的交互
a.到達(dá)指定區(qū)域進(jìn)入screen界面
b.未到達(dá)指定區(qū)域則控件返回原處
設(shè)定好了這些內(nèi)容，我們就可以生成原型，欣賞自己的作品吧。好，下面筆者將詳細(xì)講解如何來(lái)制作這個(gè)功能吧。
一.選好三張圖片
二.設(shè)定兩個(gè)動(dòng)態(tài)面板
一個(gè)動(dòng)態(tài)面板的大小長(zhǎng)度和解鎖框的大小一致，另外一個(gè)可以盡量小一些僅用來(lái)判定滑動(dòng)控件的位置就可以了
放在圖中的1，2位置
接下來(lái)看1、2號(hào)控制面板
在1號(hào)動(dòng)態(tài)面板中添加一個(gè)大小和控件大小相同的控制面板，命名為“滑動(dòng)控件”，將控件圖片添加進(jìn)“滑動(dòng)控件”面板中，接下來(lái)對(duì)“滑動(dòng)控件”做相應(yīng)的交互設(shè)計(jì)就可以了。
2號(hào)控制面板命名為“結(jié)束”
在交互動(dòng)作中添加進(jìn)這些事件
1.如用例1中：選擇移動(dòng)動(dòng)態(tài)面板→選擇“滑動(dòng)控件”動(dòng)態(tài)面板→移動(dòng)選擇沿X軸移動(dòng)。就像這樣：
2.接下來(lái)編輯ondragdrop事件，這個(gè)事件中我們要編寫兩個(gè)用例，一個(gè)用例是控件滑動(dòng)到底時(shí)，一個(gè)用例是控件未滑動(dòng)到底回到原位置
a.用例1
點(diǎn)擊添加條件如下圖
添加一個(gè)動(dòng)作：
b.用例2
點(diǎn)擊添加條件如下圖
添加一個(gè)動(dòng)作
注意：這里的動(dòng)畫調(diào)成 緩慢結(jié)束 800ms 效果會(huì)更好
【axure制作iPhone滑動(dòng)解鎖效果的方法】相關(guān)文章：
Axure常用交互效果制作06-13
PHP簡(jiǎn)單的滑動(dòng)菜單制作的方法01-21
Axure常用交互效果03-23
axure網(wǎng)頁(yè)設(shè)計(jì)的方法05-28
ppt制作遮罩效果的方法06-03
Illustrator制作長(zhǎng)投影效果的方法05-18
photoshop制作燈光照射效果的方法12-29