Axure拖動效果

動態面板是Axure中唯一一個能夠被拖動的元件。任何元件想要有被拖動的效果,都要放置在動態面板中。

如果需要讓一個動態面板被拖動,必須在動態面板的觸發事件【拖動時】中添加用例動作,【移動】動態面板為某一種拖動行為。動態面板的拖動行為包括:拖動(自由拖動)、水平拖動和垂直拖動

工具/原料

Axure7.0

方法/步驟

我們製作一個能夠水平拖動的滑塊,並且在拖動時不得超出標尺兩端。

我們用矩形做一個標尺,並在兩端分別用矩形做好左邊界「left」和右邊界「right」,然後用矩形改變為圓形並轉為動態面板,作為滑塊「slider」。當拖動滑塊時,滑塊能夠水平移動。並且在移動過程中,如果觸碰到兩端邊界要停留在指定的位置上。

首先判斷拖動時是否超出了邊界,如果超出了讓滑塊移動到指定位置上。

以左側邊界為例,矩形「left」的X軸坐標為150,寬度為10,如果滑塊接觸到左側邊界的矩形,我們就要讓滑塊移動到X軸160的位置上。因為是水平移動,Y軸坐標不會改變,仍然是當前滑塊的Y軸坐標20。而滑塊接觸到右側邊界時,要移動到的位置是右側邊界矩形的X軸坐標-滑塊的寬度。右側邊界矩形「right」的X軸坐標為560,減去滑塊的寬度20,結果是540。Y軸的坐標同樣是20

了解了邊界限制滑塊的原理,我們就來添加判斷和相應的用例動作。仍以左側邊界為例,雙擊動態面板「slider」的【拖動時】事件打開用例編輯界面,然後點擊【添加條件】,設置條件內容為【元件範圍】「slider」接觸【元件範圍】「left」

設置滿足條件時的動作為【移動】「slider」,移動【到絕對位置】x軸「160」y軸「20」

設置當滿足條件【元件範圍】「slider」接觸【元件範圍】「right」時,【移動】「slider」【到絕對位置】x軸「540「y軸」20「。

然後我們讓滑塊能夠被拖動。雙擊動態面板的觸發事件【拖動時】,添加用例動作【移動】,勾選動態面板「slider」或者「當前元件」,選擇【移動】列表中的選項「水平拖動」

相關文章

  1. Android開發學習:[40]拖動效果實現

    本經驗介紹如何使用onTouchEvent來實現拖動效果.這是android的一個螢幕的觸發事件監聽.詳情見下 工具/原料 電腦 Android Studio 方法/步驟 首先我們還是新建一個項目或者 ...
  2. android控制項學習之十三 Gallery拖動效果

    Gallery實現的效果很炫,可以直接拖動圖片移動,展示圖片 工具/原料 電腦(windows) eclipse+android編程環境 方法/步驟 新建一個android項目,GalleryTest ...
  3. Android圖片拖動效果

    這還算是一個稍微有點炫的效果吧.IPhone曾經憑藉這個效果吸引了無數的蘋果粉絲,在Android平台上也可以實現這一效果.要實現這一效果,需要一個容器來存放Gallery顯示的圖片,這裡使用一個繼承 ...
  4. 原生JS代碼實現拖動Div拖動效果

    Div拖動效果的實現,讓你能像軟體開發一樣在瀏覽器中實現炫酷的拖拽效果,不多BB,讓我們開始嘗試吧! 工具/原料 瀏覽器調試.IDE編輯器 方法/步驟 第一步我們得搞清楚拖動div效果的原理,不外乎3 ...
  5. 基於jQuery的拖動效果

    基於jQuery的前端組件庫 工具/原料 網頁代碼編輯器(如:notepad++.EditPlus.Sublime.Dreamweaver......) 瀏覽器 方法/步驟2 在jQwebUI官網能產 ...
  6. AxureRP如何製作滑塊的水平拖動效果

    AxureRP如何製作滑塊的水平拖動效呢?不明白的小夥伴快來看看下面小編分享的方法吧~ 方法/步驟 打開Axure RP 8,新建文件,在左側元件庫將動態面板拉入畫布中,並調節大小. 再加入一個矩形元 ...
  7. 教大家使用Axure製作水平拖動的效果

    教大家使用Axure製作水平拖動的效果,小編會詳細的介紹一下. 工具/原料 電腦 Axure 方法/步驟 首先打開Axure,新建一個空白頁面,在頁面中拖入本次使用的元件,如下圖所示. 然後給這些元件 ...
  8. axure 動態面板實現圖片輪播效果(淘寶)

    淘寶中經常可以看到店鋪中的圖片輪播效果,本經驗將通過axure7.0實現 工具/原料 axure7.0 方法/步驟 下載需要輪播的圖片 將圖片引入至axure中,將引入的第一張圖片轉為動態面板 將動態 ...
  9. axure中做流程圖如果做出箭頭效果

    樓主在使用中發現很多同學和樓主一樣都在搜:axure中做流程圖如果做出箭頭效果,樓主摸索了下,按照如下方式即可做到: 工具/原料 axure pr 中文漢化包 方法/步驟 第一步:將元件庫選中為流程圖 ...
  10. Axure RP Pro 7.0蘇寧易購式標籤切換效果教程

    頁面標籤切換效果,幾乎是所有大網站(尤其是電商類網站)標配的交互方式: 之所以應用如此普遍,關鍵在於網站首屏展示區,是寸土寸斤的黃金區域:標籤切換可以讓更多內容在同一塊地方展示:相當於兩塊同樣面積的地 ...
  11. axure rp 8.0 免費教程 原型製作 幻燈片效果

    axure rp 是一個專業.高效製作原型軟體,可以製作低保真原型,高保真原型,以及流程圖,給產品經理帶來很多的方便,工作效果也大大提高. 幻燈片效果,在很多網站上都可以看到圖片輪播,今天我在這給大家 ...
  12. axure 如何實現動態面板的拖動

    在高仿原型中,經常看到高仿原型,模仿微信,微博的對話框,在這裡我做一個簡單的例子來講解下如通過動態面板的拖動實現想要的效果的 工具/原料 axure7.0 電腦 方法/步驟 在頁面添加動態面板,並在該 ...
  13. 如何利用Axure RP 8軟體設計評論文字提交效果

    一般情況下,博客或論壇中都有評論提交功能,場景:有個文本域,輸入評論文字後,點擊"提交"按鈕,提交後顯示在文本域上方.可以通過這個場景獲取評論效果,下面利用Axure RP 8設計 ...
  14. axure教程之七進度條效果:[7]進度條的製作

    為了使得我們的網頁設計更形象化,往往許多項目要用到上傳下載功能,需要提供進度條效果,這樣子設計的體驗更高,我來介紹一下利用axure PR工具,製作進度條的效果 工具/原料 axure PR 方法/步 ...
  15. axure實現畫廊效果

    產品開發中,經常會用到畫廊效果,那麼在Axure中如何模擬出畫廊效果呢 工具/原料 Axure 8.0 方法/步驟 在Axure的畫布中拖入兩個膠捲圖像,作為畫廊 在畫廊的中間拖入一個動態面板,大小為 ...
  16. iH5高級教程:H5交互進階,拖動物品效果

    下面我們一起來學習iH5高級教程:H5交互進階,拖動物品效果 工具/原料 iH5 方法/步驟 1.選中舞台,點擊工具欄下的頁面工具,在舞台下添加一個頁面. 2.選中頁面1,點擊工具欄下的圖片工具,在舞 ...
  17. axure教程之六製作單選框效果:[6]單選框

    如何實現網頁中的單選框效果,就是選擇一個單選框,然後另一個單選框變成非選中狀態 工具/原料 axure PR 方法/步驟 打工axure,然後從左側元件庫中拖拽三個單選框,編輯單選框中的文字 分別設置 ...
  18. 如何實現Java文本域拖動文字效果

    Java文本域,即Java中的多行文本框,很多軟體的輸入框內都可以對Text拖動處理,拖動以實現移動Text等操作.那麼Java中的JFrame對象中的JTextArea如何實現這種效果呢,讓我們拭目 ...
  19. Axure RP如何利用複選框實現單選效果

    Axure RP是網際網路行業中產品經理的常用軟體,學會它可以快速得畫出產品界面的原始樣子(交互原型), Axure RP的功能非常強大,為了更好的實現原始樣子,需要對該工具的各元件和事件進行研究,本文 ...
  20. Axure RP Pro 7.0輪播圖按鈕控制效果手把手教程

    當下幾乎所有大小網站都有輪播圖展示功能,你還可以用滑鼠點擊輪播圖上的按鈕來切換圖片: 當你需要製作帶按鈕控制的輪播圖效果時,往往會上網搜尋製作方法,但很難找到詳細步驟說明和演示,本人也經歷過欲找教程但 ...