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

來源:互聯網
上載者:User

文章描述: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 效果會更好

到這裡就對滑動解鎖的互動完成了,是不是很簡單呢!哈哈!這時候你會發現,我進入screen介面後無法返回,別急!添加一個矩形在home的位置,連結到前一個頁面,這樣就能夠連續操作了喲!好,今天的交流就到這裡。

丟下一個小問題:

這個時候我們的控制項是能夠左右移動無限距離的,能不能讓控制項只在框內移動呢?我們在以後的axure小技巧中來為大家解答!

作者:lucky



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。