本章將教大家如何更改Button的預設Template,以及如何在Button內設置動畫。
本章將教大家如何更改Button的預設Template,以及如何在Button內設置動畫。
01
開啟一個新專案,並且置入一個Button,調整到適當大小
在Properties->可以調整Button的外觀,基本設定都跟先前的教學雷同
不熟的人請看如何用Blend製作一張猴子臉
範例調整了:
BorderThickness(Left及Right皆為10)
BorderBrush->Gradient brush->0%(#FFA3AEB9)、37.5%(#FF718597)、100%(#FF000000)
按F5來看看效果
按一按Button,你會發現,Mouseover以及Pressed都是藍色的,這個是多數工具預設的顏色
02
有時候為了設計整體的需要,會不喜歡Mouseover以及Pressed時呈現的顏色都為藍色
接下來,要教大家如何把Button修改成我們想要的樣子
請重新拖拉一個新的Botton到主要工作區後,先調整我們想要的一般外觀(Normal)
接著,在Button上單擊右鍵->Edit Template->Edit a Copy
出現Create Style Resource->請命名後直接點擊OK
接著點選左上角的State(如果沒有開出State的朋友,可以在Top Menu->State把它勾選出來即可)
可以看到有幾個狀態可以設定:
Normal:一般狀態
MouseOver:滑鼠移上去時的狀態
Pressed:當點擊滑鼠左鍵時的狀態
Disabled:無法點擊時的狀態
現在我們來修改MouseOver時的顏色
請單擊MouseOver前的小圓點,進入修改狀態,這時你的主要工作區應該會有與設計動畫時相同的錄影紅線外框
點選Properties->Edit修改顏色
(Pressed也是以同樣方式修改)
修改完成後,可以點選下面兩個地方,離開修改樣版模式
按照慣例,按下F5觀看成果,看看是不是已經非預設的樣式了呢?
03
最後,以簡單又快速的方式教大家如何活用剛剛所學的Edit Template結合動畫製作
我延續使用剛剛修改的Button,所以這次單擊右鍵後,選Edit Current,就會回到剛剛的畫面
在還沒進入修改狀態下,從Assets->shapes放入一個名為Ring的空心同心圓,並且調整到適當的大小
Properties下可以修改Ring的外觀(顏色、大小、邊寬),較為一般shapes通用的我就不多介紹了
空心同心圓的大小使用ArsThickness做調整
另外,我為了等等旋轉的動畫效果可以看出Ring的旋轉,所以我幫它開了個口
我使用的是Properties->Appearance->StartAngle
都製作完成以後,請記得把Ring的Opacity設定為0%
(目的在於一般狀態下不會出現的物件,需為不可視)
製作Button動畫的前置作業已經差不多了
再來跟剛剛我們修改顏色的方式一樣,單擊MouseOver前的小圓點進入修改模式
0秒->Ring的Opacity100%
1秒->Ring拉到Button右邊後,請記得調整Y軸為0(保持Y軸水平移動)
若是對Transform不熟的朋友,請參考這篇(Chapter 5 2.5D轉換的使用技巧)
完成後,按下F5來看看成果
04
通常我們在製作Button時,會希望使用者能夠注意到滑鼠已經移動到Button,或是希望使用者特別點擊某個Button
所以連預設的樣式,也把Mouseover以Pressed做些微的變化
如果能善加運用Template以及Animation,對使用者在界面操作來說,會有不一樣的視覺以及操作體驗
共勉之~
本篇的教學就到此。
(若有任何錯誤的地方,請各位前輩或同好能不吝指教,小女子都會虛心接受;若是你喜歡我的教學,請給我點鼓勵,謝謝。)
一步一步邁向HIE之路
喜歡我文章請推我一下或給我個回應,你的鼓勵會給我無限的動力喔!
若是您有其他問題或是特別需要,請在文章回應處留言,我會盡快回覆您