一直以來都有人拿Flash的動畫問我Blend可不可以做到一樣的動畫效果
雖然我很明白Flash跟Silverlight差異在哪,但似乎對很多人來說,在網頁上的動畫效果已經根深蒂固的覺得只能用Flash才做到!?
在我看來....善用工具,並且用對工具,就能達到想要的效果!
技術日新月異,很多工具軟體也越來越人性化,操作起來更是便捷
可能我對Blend有著特殊的感情,所以很偏心吧?
在Flash跟Blend做比較時,總是有著不想讓Blend設計出的東西輸掉一樣的心情...
所以我把這次的MenuBar動畫效果,分享給想要學習Blend的朋友
一直以來都有人拿Flash的動畫問我Blend可不可以做到一樣的動畫效果
雖然我很明白Flash跟Silverlight差異在哪,但似乎對很多人來說,在網頁上的動畫效果已經根深蒂固的覺得只能用Flash才做到!?
在我看來....
善用工具,並且用對工具,就能達到想要的效果!
最近又遇到了有人拿Flash的動畫效果問我MenuBar的動畫效果運用Blend能不能做到一樣?
為了證明Blend也能做得到,我就做了一個一樣效果的東西還了回去。
技術日新月異,很多工具軟體也越來越人性化,操作起來更是便捷
可能我對Blend有著特殊的感情,所以很偏心吧?
在Flash跟Blend做比較時,總是有著不想讓Blend設計出的東西輸掉一樣的心情...
所以我把這次的MenuBar動畫效果,分享給想要學習Blend的朋友
本章你將會學習到的觀念有
RaidoButton的應用
Button觸發範圍大小的變更
使用Clip達到遮罩效果的運用
State和動畫以及EasingFunction的複習
請移動滑鼠或是試試看效果
就是要讓新手都看得懂!
那我們開始吧!
01
首先,在主要工作區置入一個Border:(想看Border的深入介紹請點這裡)
(1)Background:本範例使用粉紅色漸層,你可以自訂,或是參考小猴子的設定
(2)BorderBrush:No brush
(3)BorderThickness:0
(4)CornerRadius:5
02
Border的部分完成後,為了使MenuBar內的按鈕能夠水平且整齊的排列
這邊我們在Border內置入一個StackPanel,並請記得把Orientation設定為Horizontal
(想看StackPanel的深入介紹請看這裡)
03
基本上使用者操作,點選Menu選項時,一般都只會選取一個按鈕
所以這邊使用帶有只能單選屬性的RaidoButton:
(1) 因為RadioButton是不能複選的,所以當使用者選取群組中的一個選項按鈕時,會自動清除其他選項按鈕;雖然RadioButton在同一個容器只能被選取1個,不過若是在不同容器裡的RadioButton,就算在同一個頁面還是可以被選取的喔!
(2) RadioButton 和 CheckBox控制項兩者的功能類似:皆是讓使用者選擇選取或清除,但差別在於CheckBox可以同時選取多個選項按鈕,RadioButton 則否。
可以在MSDN中,看到更多對RaidoButton的特性介紹
(其實在Ch26時,有針對RaidoButton做過一次介紹了,回顧請看這裡。)
04
放入了RaidoButton以後,接著就是要改變它的Template,使之變成我們想要的樣子
點選RaidoButton->Edit Template->Edit a Copy,開始修改預設樣式
刪掉不要的部份
把ContentPresenter置中
05
接下來,有個重要的小技巧要教大家
因為RaidoButton目前只有文字的地方是有顏色的,所以只有文字部分會觸發事件
對HitTest機制的觸發來說,它會選擇有顏色的地方來認定選取範圍
但是為了避免觸發範圍過小,所以要把Border設為有填色
如下圖:
除非有特殊的用途,不然一般在設計上,都會希望使用者可以很方便就能點選按鈕
(想深入瞭解HitTest機制嗎?請看Ouch@點部落-[Silverlight]透過Grid來初步了解物件的MouseEnter、HitTest機制)
接下來照著設定,就可以修改觸發範圍的大小
目前一樣是在Template編輯模式
Step1:選取最外層的Grid->Brushes->Background->隨便你選取什麼顏色
Step2:更改顏色的透明度->100%改為0%
Step3:完成!
06
再來運用Make Clipping Path製作遮罩範圍
同樣是在Template編輯模式
Step1:在Grid內置入一個Rectangle,並使它填滿整個Grid
Step2:在Rectangle上單擊滑鼠右鍵->Path->Make Clipping Path
Step3:選擇要被路徑剪裁的物件(Choose the object that will be clipped by the path)->Grid
Step4:完成
如下圖,物件超過遮罩就不會顯示
可以在Properties->Miscellaneous->Clip檢查是否已完成Make Clipping Path
07
置入一個Rectangle與Triangle,為我們將要製作的梯型做準備
Rectangle與Triangle交疊的部分,如下圖位置:
接著一併選起Rectangle與Triangle後,單擊滑鼠右鍵->Combine->Subtract
完成後,你會得到一個梯型的Path
接著把梯型Path放到能充滿整個Grid的適當位子,並把透明度調整為20%
08
切換到State
在Base狀態下,設定Transform的Translate X,讓梯型Path退到Grid左邊
選取Mouseover,開啟Show Timeline後移動時間軸至0.5秒
並且調整Translate X使梯型Path回到原位
最後設定EasingFuntion->Back InOut->Amplitude(幅度)->1
完成後,離開Template編輯模式
並複製多個RadioButton在同一個StackPanel裡
將會看到如下的成果
接下來的設計,下篇告訴你
附上本篇的範例下載
(若有任何錯誤的地方,請各位前輩或同好能不吝指教,小女子都會虛心接受;若是你喜歡我的教學,請給我點鼓勵,謝謝。)
一步一步邁向HIE之路
喜歡我文章請推我一下或給我個回應,你的鼓勵會給我無限的動力喔!
若是您有其他問題或是特別需要,請在文章回應處留言,我會盡快回覆您