原文:零元学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机制吗?请看[email protected]点部落-[Silverlight]透过Grid来初步了解物件的MouseEnter、HitTest机制)
?
如果不需要第二层Menu的朋友，可以在RadioButton内放入HyperlinkButton
(想了解更多Hyperlink功能请看Ch22)
?
若还需要制作第二层Menu，请看下篇介绍。
?
本篇最後的成果：
很抱歉，阁下使用的浏览器并不支援 IFrame，不能正常浏览我的网页
附上本篇的范例下载：
?
?
下篇已完成，想看请点这边。
?
?
?
(若有任何错误的地方，请各位前辈或同好能不吝指教，小女子都会虚心接受；若是你喜欢我的教学，请给我点鼓励，谢谢。)
?
一步一步迈向HIE之路
喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您