




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
【Axure教程】模擬Windows鼠標(biāo)拖拽框選效果先來看看我們今日要參照實(shí)現(xiàn)的效果:
這個我信任許多人都不會覺得生疏,這是Windows中鼠標(biāo)拖拽框選的效果,一般用于選取多個文件或文件夾,在Axure中也有這種框選操作:
這種設(shè)計(jì)多用于客戶端或一些設(shè)計(jì)類的工具軟件中,今日我準(zhǔn)備用Axure來實(shí)現(xiàn)這個拖拽框選的效果。
先來看看最終效果(體驗(yàn)傳送門):
我也常常問自己,為什么要做這種既無聊又無用的設(shè)計(jì),這種設(shè)計(jì)在實(shí)際業(yè)務(wù)中會用到的幾率不到0.01%,我常常調(diào)侃自己說是“不務(wù)正業(yè)”,但是我始終信任,作為一名產(chǎn)品經(jīng)理,想長期保有對產(chǎn)品設(shè)計(jì)熱忱的秘訣之一,就是始終保持對一切新生事物的奇怪???心,并探究一切可能的未知,有時(shí)候不肯定要追求有用,而是只要你覺得好玩,那就夠了!
我似乎扯遠(yuǎn)了,接下來開頭動手實(shí)現(xiàn)吧。
首先我們來分析一下框選的動作:
鼠標(biāo)按住并拖拽時(shí),拉出框選區(qū)域;框選區(qū)域以鼠標(biāo)點(diǎn)擊位置作為原點(diǎn),鼠標(biāo)移動時(shí),依據(jù)鼠標(biāo)位置動態(tài)調(diào)整框選區(qū)域大??;松開鼠標(biāo)時(shí),隱蔽框選區(qū)域。一、外觀
首先,我們需要繪制一個矩形作為【舞臺】,由于在頁面上直接操作的話,Axure供應(yīng)的交互很少,有許多交互做不了:
所以我們新建一個矩形作為【舞臺】,在【舞臺】做操作,能用到的交互就多了許多:
【舞臺】效果:
鼠標(biāo)拖拽時(shí)拉出的框選區(qū)域也是一個矩形,我們再添加一個矩形并設(shè)置好樣式,命名為【框選區(qū)域】,由于我們是需要它在鼠標(biāo)拖拽時(shí)才消失,所以默認(rèn)我們給它【隱蔽】:
二、交互
接下來我們開頭設(shè)置交互,首先我們的【舞臺】在Axure是固定大小的,但是在預(yù)覽的時(shí)候,我們盼望它能依據(jù)窗口自動調(diào)整大小,所以這里給它添加了一個【載入時(shí)】【設(shè)置尺寸】的大事,讓它依據(jù)掃瞄器窗口大小調(diào)整自身大?。?/p>
這樣我們在掃瞄器中掃瞄時(shí),【舞臺】就會自動全屏了:
接下來給舞臺添加【鼠標(biāo)按下時(shí)】的大事:
主要做3件事:
將【框選區(qū)域】的尺寸設(shè)為0*0,這樣框選區(qū)域就等于只有一個看不見的點(diǎn);把【框選區(qū)域】移動到鼠標(biāo)當(dāng)前所在位置;把【框選區(qū)域】顯示出來,但此時(shí)是看不到任何東西的。此時(shí)假如我們松開了鼠標(biāo),則將【框選區(qū)域】隱蔽掉:
接下來就是這個交互的重點(diǎn),當(dāng)【鼠標(biāo)移動時(shí)】,依據(jù)鼠標(biāo)位置來調(diào)整【框選區(qū)域】大?。?/p>
這里涉及到【框選區(qū)域】的尺寸計(jì)算,我們一般都是習(xí)慣自左上向右下拖動,此時(shí)【框選區(qū)域】的寬度就是鼠標(biāo)所在的x值減去【框選區(qū)域】的x值,高度則是鼠標(biāo)所在y值減去【框選區(qū)域】y值,我們來看看效果:
整體效果出來了,但是有點(diǎn)卡頓,有時(shí)候還不肯定能勝利,這里我就只能憑閱歷解決了,當(dāng)鼠標(biāo)在【舞臺】移動時(shí),雖然【框選區(qū)域】沒有顯示出來,但是依舊會執(zhí)行動作,會消耗肯定資源,所以這里我給【鼠標(biāo)移動時(shí)】的大事加了一個條件,就是只有【框選區(qū)域】顯示出來時(shí)才執(zhí)行動作:
由于我的錄屏軟件一開又會消失卡頓的現(xiàn)象,這里我就不放調(diào)整后的效果圖了,各位可自行體驗(yàn)。
這里還有問題,就是從左上向右下拉的時(shí)候,框選區(qū)域是正常的,但是假如發(fā)覺區(qū)域拉大了,從右下向左上移動,【框選區(qū)域】卻不會縮小,如下:
這個是由于我們是鼠標(biāo)先動,區(qū)域跟著調(diào)整,從右下往左上移動的時(shí)候,鼠標(biāo)被【框選區(qū)域】攔住了,因此【舞臺】無法檢測鼠標(biāo)的移動
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 物理安全與設(shè)施保護(hù)考核試卷
- 茶飲料生產(chǎn)工藝優(yōu)化與設(shè)備升級考核試卷
- 老年心理健康服務(wù)考核試卷
- 蔬菜分子育種與生物技術(shù)考核試卷
- 碳中和碳排放權(quán)交易代理合作協(xié)議
- 固態(tài)電池市場拓展與合作伙伴招募協(xié)議
- 實(shí)驗(yàn)室純水系統(tǒng)升級改造與水質(zhì)監(jiān)測全面合作協(xié)議
- 企業(yè)研發(fā)人員忠誠協(xié)議與股權(quán)激勵及補(bǔ)償合同
- 建筑密封膠行業(yè)政策研究與市場拓展合作協(xié)議
- 電商直播帶貨傭金提成與坑位費(fèi)支付標(biāo)準(zhǔn)合同
- 《VEP波形解釋》課件
- 福建省危險(xiǎn)性較大的分部分項(xiàng)工程安全管理標(biāo)準(zhǔn)
- 閩教版英語六年級下冊單詞默寫表
- 【MOOC】寄生蟲病與食品安全-華中科技大學(xué) 中國大學(xué)慕課MOOC答案
- 國開2024年秋《投資學(xué)》形考作業(yè)冊1-4答案
- 不穩(wěn)定型心絞痛課件
- 全光校園網(wǎng)絡(luò)解決方案
- 建筑企業(yè)安全生產(chǎn)事故報(bào)告及處理制度(4篇)
- 第七章 循證醫(yī)學(xué)課件
- 風(fēng)電專業(yè)考試題庫帶答案
- 艾滋病職業(yè)防護(hù)培訓(xùn)
評論
0/150
提交評論