Axure 8 0 限制某一範圍內移動

2021-08-16 05:27:23 字數 913 閱讀 1831

移動小球時,小球不能移動到邊框之外。

這裡用到了動態面板的拖動功能與邊界設定。

首先做乙個矩形,當做邊框;然後畫乙個圓,並將圓轉換為動態面板。

接下來為動態面板-圓新增拖動事件,並設定頂部,底部,左側和右側的邊界。

在設定邊界時注意,雖然用絕對值相對簡單,但是可用性比較差,如果某乙個引數有變化,邊界值可能就需要調整。所以,我們使用了區域性變數和元件函式在配置動態面板-圓相對於邊框的相對邊界。

在邊界值一項中選擇fx。

首先插入函式,在元件函式中找到top,bottom,left和right,這四個函式分別會返回元件的四邊邊緣。

注意,在插入元件函式之後,預設是當前元件的相關值,為正確設定邊界,我們需要的是邊框元件才對。

現在建立乙個區域性變數bg,變數的值為邊框的元件名,然後我們將之前插入的函式[[this.top]]改為[[bg.top]],這就得到了邊框的四邊。

其餘的三邊都需要單獨建立區域性變數,手動修改函式。

Axure8 0基礎操作

摘自 基礎1.新增元件到畫布 基礎2.新增元件名稱 基礎3.設定元件位置 尺寸 基礎4.設定元件預設角度 基礎5.設定元件顏色與透明 基礎6.設定形狀或圓角 基礎7.設定矩形僅顯示部分邊框 基礎8.設定線段 箭頭 邊框樣式 基礎9.設定元件文字邊距 行距 基礎10.設定元件預設隱藏 基礎11.設定文...

原型設計篇 Axure8 0版

在進入公司之前,都是做的前端開發相關的工作,到這來還要利用axure做一些產品經理的事情,近期公司要做乙個管理後台的 讓先設計乙個原型出來給老闆和客戶看下,著實有點那啥了。好了,沒有 直接進入正題吧。效果圖如下 1.大概的乙個主頁面就是這樣的,因為圖設計方便所以沒有做到鋪滿屏,後期寫 的時候可以再設...

axure 8 0 動態特效庫分享

認準品牌 六脈神掌 盡量給每乙個互動加上效果,盡量模擬真實的互動 無圖無真相,我們先看效果圖 1 這是還原android material design風格的乙個底部選單效果 2 這個是模擬歡迎頁面 3 模擬自動輪播的廣告頁面 4 這裡是傳送簡訊驗證碼 5 模擬選擇附件上傳 6 開關按鈕 7 購物車...