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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上)相关的知识,希望对你有一定的参考价值。

原文:零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上)

一直以来都有人拿Flash的动画问我Blend可不可以做到一样的动画效果

虽然我很明白Flash跟Silverlight差异在哪,但似乎对很多人来说,在网页上的动画效果已经根深蒂固的觉得只能用Flash才做到!?


在我看来....善用工具,并且用对工具,就能达到想要的效果!

技术日新月异,很多工具软体也越来越人性化,操作起来更是便捷

可能我对Blend有着特殊的感情,所以很偏心吧?

在Flash跟Blend做比较时,总是有着不想让Blend设计出的东西输掉一样的心情...

所以我把这次的MenuBar动画效果,分享给想要学习Blend的朋友

?

一直以来都有人拿Flash的动画问我Blend可不可以做到一样的动画效果

虽然我很明白Flash跟Silverlight差异在哪,但似乎对很多人来说,在网页上的动画效果已经根深蒂固的觉得只能用Flash才做到!?

?

在我看来....

善用工具,并且用对工具,就能达到想要的效果!

?

最近又遇到了有人拿Flash的动画效果问我MenuBar的动画效果运用Blend能不能做到一样?

为了证明Blend也能做得到,我就做了一个一样效果的东西还了回去。

?

技术日新月异,很多工具软体也越来越人性化,操作起来更是便捷

可能我对Blend有着特殊的感情,所以很偏心吧?

在Flash跟Blend做比较时,总是有着不想让Blend设计出的东西输掉一样的心情...

?

所以我把这次的MenuBar动画效果,分享给想要学习Blend的朋友

?

?

?

本章你将会学习到的观念有

RaidoButton的应用

Button触发范围大小的变更

使用Clip达到遮罩效果的运用

State和动画以及EasingFunction的复习

?

?

请移动滑鼠或是试试看效果

?

?

?

就是要让新手都看得懂!

?

那我们开始吧!

?

01

首先,在主要工作区置入一个Border:(想看Border的深入介绍请点这里)

(1)Background:本范例使用粉红色渐层,你可以自订,或是参考小猴子的设定

(2)BorderBrush:No brush

(3)BorderThickness:0

(4)CornerRadius:5

技术分享图片

?

02

Border的部分完成後,为了使MenuBar内的按钮能够水平且整齐的排列

这边我们在Border内置入一个StackPanel,并请记得把Orientation设定为Horizontal

(想看StackPanel的深入介绍请看这里)

技术分享图片

?

03

基本上使用者操作,点选Menu选项时,一般都只会选取一个按钮

所以这边使用带有只能单选属性的RaidoButton:

(1) 因为RadioButton是不能复选的,所以当使用者选取群组中的一个选项按钮时,会自动清除其他选项按钮;虽然RadioButton在同一个容器只能被选取1个,不过若是在不同容器里的RadioButton,就算在同一个页面还是可以被选取的喔!

(2) RadioButton 和 CheckBox控制项两者的功能类似:皆是让使用者选择选取或清除,但差别在於CheckBox可以同时选取多个选项按钮,RadioButton 则否。

?

可以在MSDN中,看到更多对RaidoButton的特性介绍

(其实在Ch26时,有针对RaidoButton做过一次介绍了,回顾请看这里。)

(想看CheckBox的深入介绍,请看Ch17Ch18)

技术分享图片

?

04

放入了RaidoButton以後,接着就是要改变它的Template,使之变成我们想要的样子

点选RaidoButton->Edit Template->Edit a Copy,开始修改预设样式

技术分享图片

?

删掉不要的部份

技术分享图片

?

把ContentPresenter置中

技术分享图片

?

05

接下来,有个重要的小技巧要教大家

因为RaidoButton目前只有文字的地方是有颜色的,所以只有文字部分会触发事件

HitTest机制的触发来说,它会选择有颜色的地方来认定选取范围

但是为了避免触发范围过小,所以要把Border设为有填色

如下图:

技术分享图片

?

除非有特殊的用途,不然一般在设计上,都会希望使用者可以很方便就能点选按钮

(想深入了解HitTest机制吗?请看[email protected]点部落-[Silverlight]透过Grid来初步了解物件的MouseEnter、HitTest机制)

?

接下来照着设定,就可以修改触发范围的大小

目前一样是在Template编辑模式

Step1:选取最外层的Grid->Brushes->Background->随便你选取什麽颜色

Step2:更改颜色的透明度->100%改为0%

Step3:完成!

技术分享图片

?

?

06

再来运用Make Clipping Path制作遮罩范围

?

同样是在Template编辑模式

Step1:在Grid内置入一个Rectangle,并使它填满整个Grid

Step2:在Rectangle上单击滑鼠右键->Path->Make Clipping Path

技术分享图片

?

Step3:选择要被路径剪裁的物件(Choose the object that will be clipped by the path)->Grid

技术分享图片

?

Step4:完成

如下图,物件超过遮罩就不会显示

可以在Properties->Miscellaneous->Clip检查是否已完成Make Clipping Path

?

技术分享图片

?

想看更多的Clip介绍,请参考Ch37Ch38喔!

?

?

07

置入一个RectangleTriangle,为我们将要制作的梯型做准备

Rectangle与Triangle交叠的部分,如下图位置:

技术分享图片

?

?

接着一并选起Rectangle与Triangle後,单击滑鼠右键->Combine->Subtract

完成後,你会得到一个梯型的Path

技术分享图片

?

接着把梯型Path放到能充满整个Grid的适当位子,并把透明度调整为20%

技术分享图片

?

08

切换到State

Base状态下,设定Transform的Translate X,让梯型Path退到Grid左边

技术分享图片

?

选取Mouseover,开启Show Timeline後移动时间轴至0.5

并且调整Translate X使梯型Path回到原位

技术分享图片

?

最後设定EasingFuntion->Back InOut->Amplitude(幅度)->1

技术分享图片

?

完成後,离开Template编辑模式

并复制多个RadioButton在同一个StackPanel里?

将会看到如下的成果

?

接下来的设计,下篇告诉你

?

附上本篇的范例下载

?

?

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

一步一步迈向HIE之路

 

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

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

 

 














以上是关于零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上)的主要内容,如果未能解决你的问题,请参考以下文章

零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」

零元学Expression Blend 4 - Chapter 19 如何让做好的Blend专案变Silverlight网页

零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」

零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」

零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」

零元学Expression Blend 4 – Chapter 21 以实作案例学习MouseDragElementBehavior