NGUI官網樣本7– ScrollView講解(三)

第三步，實現一些小細節上的效果

    在這裡官方例子中的最下角，有兩個元件，一個是用於控制item中心顯示的check box，還有一個是實現視窗旋轉的功能。還有右上方的Logo表徵圖，滑鼠點擊它是會自動彈出來，滑鼠移開後又會自動彈回原位。現在我們來分別實現它。   在Camera下建立一個panel。並在這個Panel下建立一個空遊戲對象，並命名為Anchor-Bottom，reset一下，為其添加一個Anchor（Ngui->Attach
a Anchor），把UIAnchor組件中的Side參數設定成Bottom。在這個Anchor-Bottom下建立一個Checkbox，參數如下：

描述:請輸入描述

圖片:1.png

  選擇checkbox下的background，設定其Color
Tint為木黃色；選擇checkmark,設定其Color Tint顏色為綠色，Label的文本為Center
on Item，最終效果：

描述:請輸入描述

圖片:2.png

描述:請輸入描述

圖片:2.png

選擇Panel-Window，為其添加一個高亮背景。在Panel-window下建立一個SlicedSprite元件，參數為Template為Sliced
Sprite，Sprite為Row Outline。建立完成之後設定其大小為x158，y258，ColorTint
為R32，G22，B12；調整它的位置，最終效果：

描述:請輸入描述

圖片:3.png

設定Checkbox。首先選擇checkbox，把UICheckbox組件中的Starts
Checked取消掉。為checkbox添加一個CheckboxComponent組件（Component->NGUI->Interaction->
CheckboxComponent）,把UIGrid賦值給該組件的Target；再添加一個CheckboxCompo
nent，把SlicedSprite（Row Outline）賦值給它的Target，這樣可以開啟或者關閉該對象。點擊播放，現在可以通過checkbox控制那個高亮背景的顯示與關閉，但是定位還沒有實現，：

描述:請輸入描述

圖片:4.png

選擇UIGrid，為其添加一個CenterOnChild組件（Component->
NGUI -> Interaction -> CenterOnChild）,並關閉它，（這裡有一個細節，checkbox controller component在控制target對象的組件開關時，它只對第一個組件進行控制，所以，我們要把UICenterOnChild放在UIGrid組件之前，這個時候你可能需要先刪除UIGrid，然後再添加CenterOnChild，再添加UIGrid，再把UIGrid對象重新賦值給Checkbox的Checkbox
Control Component中的target中）：

描述:請輸入描述

圖片:5.png

使用Ctrl+D複製Anchor-Bottom，改名為Anchor-BottomRight,刪除掉其下的checkbox，把Side設定成BottomRight。接著，為其添加一個Button元件，並設定它的參數和調整它的位置，使用該按鈕來旋轉視窗，：

描述:請輸入描述

圖片:6.png

先選擇WindowRoot，為其添加一個TweenRotation組件（Component->
NGUI -> Tween -> Rotation），同時關閉該組件。並設定該組件的屬性（這樣便給WindowRoot設定了一個旋轉的Tween動畫，我們將用按鈕來觸發）：

描述:請輸入描述

圖片:7.png

選擇Button，為其添加一個ButtonTween組件（Component->
NGUI -> Interaction -> Button Tween），把WindowRoot賦值給該組件的Target，PlayDirection為Toggle（可以實現翻轉，不然你用forward只能點一次了，就再也回不去，可以試試）。注意，播放Animation用ButtonPlayAnimation組件，播放Tween動畫用ButtonTween組件。：

描述:請輸入描述

圖片:8.png

現在點擊播放，點擊ClickMe按鈕，看視窗旋轉起來了，再點一下Clickme按鈕。又轉回來了！
下面來實現Logo的彈出與彈入效果。使用Ctrl+D複製一個Anchor-BottomRight，並把名字改為Anchor-TopRight並把下面的Button刪除掉。接著把Side設定成TopRight。：

描述:請輸入描述

圖片:9.png

  建立一個Sprite組件，其參數為

描述:請輸入描述

圖片:10.png

為該sprite添加一個TweenPosition組件（Component->NGUI->Tween->position），設定該組件的參數為，並關閉該組件：

描述:請輸入描述

圖片:11.png

為Sprite添加一個Button Tween組件（Component->NGUI->Interaction -> Button Tween）。設定參數為TweenTarget為Sprite，Trigger為OnClick，PlayDirection為Toggle，：

描述:請輸入描述

圖片:12.png

最後，為該Sprite添加一個Collider（NGUI->Attach a Collider）。點擊播放，哈哈，Logo的彈出和彈入效果實現了！

這個教程寫得好累，休息下！哈哈