零元學Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!輕鬆製作擁有動畫的MenuBar!(上)

一直以來都有人拿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

image

 

02

Border的部分完成後,為了使MenuBar內的按鈕能夠水平且整齊的排列

這邊我們在Border內置入一個StackPanel,並請記得把Orientation設定為Horizontal

(想看StackPanel的深入介紹請看這裡)

image

 

03

基本上使用者操作,點選Menu選項時,一般都只會選取一個按鈕

所以這邊使用帶有只能單選屬性的RaidoButton:

(1) 因為RadioButton是不能複選的,所以當使用者選取群組中的一個選項按鈕時,會自動清除其他選項按鈕;雖然RadioButton在同一個容器只能被選取1個,不過若是在不同容器裡的RadioButton,就算在同一個頁面還是可以被選取的喔!

(2) RadioButton 和 CheckBox控制項兩者的功能類似:皆是讓使用者選擇選取或清除,但差別在於CheckBox可以同時選取多個選項按鈕,RadioButton 則否。

 

可以在MSDN中,看到更多對RaidoButton的特性介紹

(其實在Ch26時,有針對RaidoButton做過一次介紹了,回顧請看這裡。)

(想看CheckBox的深入介紹,請看Ch17Ch18)

image

 

04

放入了RaidoButton以後,接著就是要改變它的Template,使之變成我們想要的樣子

點選RaidoButton->Edit Template->Edit a Copy,開始修改預設樣式

image

 

刪掉不要的部份

image

 

把ContentPresenter置中

image

 

05

接下來,有個重要的小技巧要教大家

因為RaidoButton目前只有文字的地方是有顏色的,所以只有文字部分會觸發事件

HitTest機制的觸發來說,它會選擇有顏色的地方來認定選取範圍

但是為了避免觸發範圍過小,所以要把Border設為有填色

如下圖:

image

 

除非有特殊的用途,不然一般在設計上,都會希望使用者可以很方便就能點選按鈕

(想深入瞭解HitTest機制嗎?請看Ouch@點部落-[Silverlight]透過Grid來初步了解物件的MouseEnter、HitTest機制)

 

接下來照著設定,就可以修改觸發範圍的大小

目前一樣是在Template編輯模式

Step1:選取最外層的Grid->Brushes->Background->隨便你選取什麼顏色

Step2:更改顏色的透明度->100%改為0%

Step3:完成!

image

 

 

06

再來運用Make Clipping Path製作遮罩範圍

 

同樣是在Template編輯模式

Step1:在Grid內置入一個Rectangle,並使它填滿整個Grid

Step2:在Rectangle上單擊滑鼠右鍵->Path->Make Clipping Path

image

 

Step3:選擇要被路徑剪裁的物件(Choose the object that will be clipped by the path)->Grid

image

 

Step4:完成

如下圖,物件超過遮罩就不會顯示

可以在Properties->Miscellaneous->Clip檢查是否已完成Make Clipping Path

 

image

 

想看更多的Clip介紹,請參考Ch37Ch38喔!

 

 

07

置入一個RectangleTriangle,為我們將要製作的梯型做準備

Rectangle與Triangle交疊的部分,如下圖位置:

image

 

 

接著一併選起Rectangle與Triangle後,單擊滑鼠右鍵->Combine->Subtract

完成後,你會得到一個梯型的Path

image

 

接著把梯型Path放到能充滿整個Grid的適當位子,並把透明度調整為20%

image

 

08

切換到State

Base狀態下,設定Transform的Translate X,讓梯型Path退到Grid左邊

image

 

選取Mouseover,開啟Show Timeline後移動時間軸至0.5

並且調整Translate X使梯型Path回到原位

image

 

最後設定EasingFuntion->Back InOut->Amplitude(幅度)->1

image

 

完成後,離開Template編輯模式

並複製多個RadioButton在同一個StackPanel裡 

將會看到如下的成果

 

接下來的設計,下篇告訴你

 

附上本篇的範例下載

 

 

(若有任何錯誤的地方,請各位前輩或同好能不吝指教,小女子都會虛心接受;若是你喜歡我的教學,請給我點鼓勵,謝謝。)

一步一步邁向HIE之路

 

喜歡我文章請推我一下或給我個回應,你的鼓勵會給我無限的動力喔!

若是您有其他問題或是特別需要,請在文章回應處留言,我會盡快回覆您