零元學Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!輕松制作擁有動畫的MenuBar!(中)
我們接著進行動畫MenuBar的制作
接續著上一篇的範例，要使文字的位置在MouseOver也有變化
?
?
我們接著進行動畫MenuBar的制作
?
?
01
接續著上一篇的範例，要使文字的位置在MouseOver
?
回到Template編輯模式->MouseOver->ContentPresenter
使用Translate X調整文字的位置
?
為了要達到文字被往右帶出的效果，所以我們來做以下的設定
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
?
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
?
F5試試看，目前的動畫效果是否在Mouseover時，文字也會跟著跳動了呢?
?
03
接著，要來設定CheckStates
CheckStates->Checked->grid->Background，於0秒調整Alpha由0%->20%
?
一樣按下F5，檢視一下Checked後的效果
?
不過.....是否發現了Checked以後的Menu選項一樣會跑MouseOver的動畫呢?
請回到Checked State的設定，教你一個小訣竅
?
04
一樣在Checked State的設定模式下，Grid->CommonProperties->IsHitTestVisible
?
請把IsHitTestVisible的選取取消
?
按下F5檢查一下，是否Checked以後的Menu選項不會跑MouseOver的動畫了?
(想深入了解HitTest機制嗎?請看Ouch@點部落-[Silverlight]透過Grid來初步了解物件的MouseEnter、HitTest機制)
?
如果不需要第二層Menu的朋友，可以在RadioButton內放入HyperlinkButton
(想了解更多Hyperlink功能請看Ch22)
?
若還需要制作第二層Menu，請看下篇介紹。
?
本篇最後的成果：
附上本篇的範例下載：
?
?
下篇已完成，想看請點這邊。
?
?
?
(若有任何錯誤的地方，請各位前輩或同好能不吝指教，小女子都會虛心接受；若是你喜歡我的教學，請給我點鼓勵，謝謝。)
?
一步一步邁向HIE之路
喜歡我文章請推我一下或給我個回應，你的鼓勵會給我無限的動力喔!
若是您有其他問題或是特別需要，請在文章回應處留言，我會盡快回覆您
零元學Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!輕松制作擁有動畫的MenuBar!(中)