迷途 - Unity 工作室

Unity   捲動效果  Scroll Rect / Scrollbar

• 此篇效果 – 捲動效果  * * * * 

-  接下來進入完整教學   -

一、首先先準備好需要的物件，此範例準備了要顯示的內容(Text)、顯示的區域(Image)以及背景(Image)。

二、將物件擺到適當的位置，並將要顯示的內容放在顯示區域底下。

三、點擊   Hierarchy 中的   bg_show 物件，Add Component -> 搜尋   Scroll Rect。

• Scroll Rect : 擁有此元件，可以讓物件變成可滾動的矩形。

參數說明 :

四、將   Text 拖曳至   Content欄位，代表   Text 是可被滾動的內容，不過此範例希望內容上下滾動即可，所以我們將   Horizontal 的勾勾取消(取消水平軸移動 方向 : —)。

五、不過目前的內容會超出顯示範圍，所以我們再加上一個   Mask，將顯示的範圍局限在固定大小。

Add Component ->  搜尋   Mask。

 Mask 遮罩效果

● 將 Mask 元件放在父物件，可限制子物件顯示範圍 (只顯示父物件範圍內的內容)。

● 必須都有Image元件。

六、按下撥放鍵後，就可以先試試看目前的效果，可以上下滾動了!!!

七、接下來我們加上滾動條，點擊    Hierarchy 中的   bg_show 物件，右鍵 -> UI -> Scrollbar。

八、點擊   Scrollbar，將   Direction 方向選為   Bottom To Top，然後調整一下滾動軸的   Height 以及滾動軸的位置。

將滾動條的初始位置值設為1，滾動條的把手就會到最上面囉 ~

調好之後就會變成這樣了   ~

九、Scrollbar 滾動軸製作好之後，點擊   Hierarchy 中的     bg_show 物件，Scroll Rect 元件中有一個放垂直滾動軸的欄位。

沒錯 !!! 就是把我們剛剛新增的   Scrollbar 滾動軸拖曳進去   !!! 

十、完成完成啦 ~ 點擊撥放鍵就可以看到效果囉 !!! 

★    補充  :

若覺得滑鼠滾軸滾動速度太慢可以調整   Scroll Sensitivity 滑鼠滾軸靈敏度參數，數值越大越好滾動    XD。

- By Cindy -