Axure教學案例總結(1)

lcyhshj發表於2020-12-25

一:拖動與選中小案例
實現的效果:當將綠色病毒圖形接觸到藍色笑臉圖形時,會出現紅色不開心圖形和一段紅色文字“你中病毒了”,且圖形有一個放大效果。

原型: 預覽效果圖:

實現步驟:
1.將綠色病毒圖形設定為動態皮膚(因為只有動態皮膚具有拖拽功能)
2.給綠色病毒圖形設定一個拖拽事件。
3.當拖拽結束後,如果綠色病毒圖形接觸到藍色笑臉圖形就隱藏綠色病毒圖形和藍色笑臉圖形顯示紅色不開心圖形且將紅色不開心圖形中心線性放大它的尺寸,紅色不開心圖形的填充顏色其實就可以直接拉出一個橢圓形給他一個紅色填充,然後設定為底層,最後組合在一起就好了。
4.如果綠色病毒圖形沒有接觸到藍色笑臉圖形就直接設定綠色病毒圖形回到拖拽前的位置就行了。

二:啟用與禁用小案例
實現的效果:當滑鼠點選輸入框時,輸入框邊框變為藍色,顯示關閉按鈕。當輸入框輸入的字元達到11位時,登入按鈕可用顯示顏色為藍色。

原型: 預覽效果圖:

實現步驟:
1.設定輸入框的選中事件,當輸入框被選中時,邊框顏色變為藍色。
2.將輸入框與文字框組合在一起,當組合獲取到焦點時,設定組合選中,如果失去焦點則取消選中。
3.給文字框設定文字改變事件,如果文字框元件文字的長度不等於空則顯示關閉按鈕。如果文字框元件文字的長度等於空則隱藏關閉按鈕。
4.給關閉按鈕設定一個單擊事件,當滑鼠單擊時設定文字與文字框等於空值。

三:移動
實現的效果:當滑鼠點選任意一個選項時,被選項字型顏色變紅,橙色矩形移動到被選項下方。

原型: 預覽效果圖:

實現步驟:
1.給每一個選項設定一個選中狀態等於true,設定當選中時字型顏色變為紅色,(如果要設定多個選中狀態,只要選中多個矩形,在檢視的屬性裡面可以設定多個矩形的選中狀態)
2.設定一個選項組將所有選項放在一個選項組內,這樣就可以實現單選效果。
3.給每個選項設定單擊事件,當單擊時移動橙色矩形,需要設定絕對移動,X軸不變([[This.x]]),Y軸要與被選項(目標項)Y軸一致,設定為[[Target.y]](target: 目標,指標;(攻擊的)物件),然後設定動畫為線性,200ms。

相關文章