零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中)

原文:零元学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，请看下篇介绍。

?

本篇最後的成果：

很抱歉，阁下使用的浏览器并不支援 IFrame，不能正常浏览我的网页

附上本篇的范例下载：

?

?

下篇已完成，想看请点这边。

?

?

?

(若有任何错误的地方，请各位前辈或同好能不吝指教，小女子都会虚心接受；若是你喜欢我的教学，请给我点鼓励，谢谢。)

?

一步一步迈向HIE之路

喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您