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

我們接著進行動畫MenuBar的製作

接續著上一篇的範例,要使文字的位置在MouseOver也有變化

 

 

我們接著進行動畫MenuBar的製作

 

 

01

接續著上一篇的範例,要使文字的位置在MouseOver也有變化

 

回到Template編輯模式->MouseOver->ContentPresenter

使用Translate X調整文字的位置

image

 

為了要達到文字被往右帶出的效果,所以我們來做以下的設定

0.3秒 Translate X : 8

0.4秒 Translate X : -8 並設定 EasingFunction Back InOut 為1

0.5秒 Translate X : 0

 

02

上一篇只介紹到當MouseOver時會有動畫,而滑鼠移開選項時沒有動畫

但當滑鼠移開選項時,會進入一般狀態,所以Normal一樣也需要設定,讓選項的動畫有收回的效果

 

先設定Path的部分:

0.0秒 Translate X : 0

image

 

0.5秒 讓梯型Path退到Grid左邊,範例是設定為Translate X : -116,並設定 EasingFunction Back InOut 為1

 

再來是文字

接著做到文字往左被帶走的效果,所以設定的數值如下:

0.3秒 Translate X : -8

0.4秒 Translate X : 8 ,並設定 EasingFunction Back InOut 1(也可選擇在這裡不設定EasingFunction)

0.5秒 Translate X : 0

image

 

F5試試看,目前的動畫效果是否在Mouseover時,文字也會跟著跳動了呢?

 

03

接著,要來設定CheckStates

CheckStates->Checked->grid->Background,於0秒調整Alpha由0%->20%

image

 

一樣按下F5,檢視一下Checked後的效果

 

不過.....是否發現了Checked以後的Menu選項一樣會跑MouseOver的動畫呢?

請回到Checked State的設定,教你一個小訣竅

 

04

一樣在Checked State的設定模式下,Grid->CommonProperties->IsHitTestVisible

image

 

請把IsHitTestVisible的選取取消

image

 

按下F5檢查一下,是否Checked以後的Menu選項不會跑MouseOver的動畫了?

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

 

如果不需要第二層Menu的朋友,可以在RadioButton內放入HyperlinkButton

(想了解更多Hyperlink功能請看Ch22)

image

 

若還需要製作第二層Menu,請看下篇介紹。

 

本篇最後的成果:

附上本篇的範例下載:

 

 

下篇已完成,想看請點這邊

 

 

 

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

 

一步一步邁向HIE之路

 

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

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