零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中)
2017-12-24 23:08
274 查看
原文:零元学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之路
喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您
我们接着进行动画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之路
喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您
相关文章推荐
- 零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上)
- 零元學Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!輕鬆製作擁有動畫的MenuBar!(中)
- 零元學Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!輕鬆製作擁有動畫的MenuBar!(上)
- 零元學Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以!輕鬆製作擁有動畫的MenuBar!(下)
- 视频专辑:轻松学习flash动画制作视频教程
- Flash 动画制作
- U盘和存储卡实际上可以轻松的创建隐藏分区制作PE启动盘
- 零元学Expression Blend 4 - Chapter 7 什麽?影片不再是印象中的方框框!!!看Blend 4如何把影片镶入字里
- 盛世五洲flash进入页 动画设计制作
- Flash Gallery Factory(动画相册制作软件)
- Flash传统补间动画制作
- mfc制作具有动画效果的字体,可以设置字体
- 常见的四种Animation详解(深入可以制作效果动画)
- 利用同一模型的两种表情(Poser轻松得到)制作表情动画(菜鸟版)
- flash动画制作1musicgail
- Blend制作的下载动画
- 关于Flash制作动画的一些基础总结
- 可以制作照片360°全景flash文件的jp软件
- 在blend中制作完动画之后需要增加这么一句话
- 【原】向html5进军(2)——用flash和wallaby 制作html5动画 第一章