零元学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的复习
?
?
请移动滑鼠或是试试看效果
很抱歉，阁下使用的浏览器并不支援 IFrame，不能正常浏览我的网页
?
?
?
就是要让新手都看得懂!
?
那我们开始吧!
?
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做过一次介绍了，回顾请看这里。)
?
04
放入了RaidoButton以後，接着就是要改变它的Template，使之变成我们想要的样子
点选RaidoButton->Edit Template->Edit a Copy，开始修改预设样式
?
删掉不要的部份
?
把ContentPresenter置中
?
05
接下来，有个重要的小技巧要教大家
因为RaidoButton目前只有文字的地方是有颜色的，所以只有文字部分会触发事件
对HitTest机制的触发来说，它会选择有颜色的地方来认定选取范围
但是为了避免触发范围过小，所以要把Border设为有填色
如下图：
?
除非有特殊的用途，不然一般在设计上，都会希望使用者可以很方便就能点选按钮
(想深入了解HitTest机制吗?请看Ouch@点部落-[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
?
?
?
?
07
置入一个Rectangle与Triangle，为我们将要制作的梯型做准备
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里?
将会看到如下的成果
很抱歉，阁下使用的浏览器并不支援 IFrame，不能正常浏览我的网页
?
接下来的设计，下篇告诉你
?
附上本篇的范例下载
?
?
(若有任何错误的地方，请各位前辈或同好能不吝指教，小女子都会虚心接受；若是你喜欢我的教学，请给我点鼓励，谢谢。)
一步一步迈向HIE之路
喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您
零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上)的更多相关文章
- 零元学Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(下)
原文:零元学Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(下) 抱歉久等了!!!! 终於到了动画MenuBar ...
- 零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中)
原文:零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中) 我们接着进行动画MenuBar的制作 接续着上 ...
- 零元学Expression Design 4 - Chapter 1 入门界面简介
原文:零元学Expression Design 4 - Chapter 1 入门界面简介 Expression Design 是Expression系列里面的一员,更是Blend跟Web的好帮手 而在 ...
- 零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果
原文:零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果 又来一篇五分钟做设计啦~ 本篇将教大家如何运用Design内建工具Blend Path ...
- 零元学Expression Design 4 - Chapter 7 使用内建功能「Clone」来达成Path的影分身之术
原文:零元学Expression Design 4 - Chapter 7 使用内建功能「Clone」来达成Path的影分身之术 本章所介绍的是便利且快速的内建工具Clone ? 本章所介绍的是便利且 ...
- 零元学Expression Design 4 - Chapter 5 教你如何用自制笔刷在5分钟内做出设计感效果
原文:零元学Expression Design 4 - Chapter 5 教你如何用自制笔刷在5分钟内做出设计感效果 本章将教你如何运用笔刷与简单线条,只要5分钟,就能做出设计感效果 ? 本章将教你 ...
- 零元学Expression Design 4 - Chapter 4 教你如何自制超炫笔刷
原文:零元学Expression Design 4 - Chapter 4 教你如何自制超炫笔刷 在Chapter 2 有稍微讲过Design内建笔刷的用法,本章将教大家如何自制独一无二的笔刷,并且重 ...
- 零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果
原文:零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果 本章将教大家如何活用「Text On Path」,做出文绕图 ...
- 零元学Expression Design 4 - Chapter 2 熟悉Design并且快速设计出Silverlight网页
原文:零元学Expression Design 4 - Chapter 2 熟悉Design并且快速设计出Silverlight网页 本章将用带大家熟悉Design 4并制作简易的网页版面,也会让你了 ...
随机推荐
- Tor (洋葱头)torbrowser
Tor是什么 Tor是互联网上用于保护您隐私最有力的工具之一,但是时至今日仍有许多人往往认为Tor是一个终端加密工具.事实上,Tor是用来匿名浏览网页和邮件发送(并非是邮件内容加密)的.今天,我们要讨 ...
- 面试无忧之Zookeeper总结心得
为什么需要分布式系统 l 单机系统已经无法满足业务需要 l 高性能硬件价格昂贵 分布式系统带来哪些问题 l 集群中节点数据一致性问题 l 集群产生分区 l 负载问题 l 幂等性问题 l 可用性问题 l ...
- 谈谈android缓存文件
##内部存储 总是可用的 这里的文件默认是只能被你的app所访问的. 当用户卸载你的app的时候,系统会把internal里面的相关文件都清除干净. Internal是在你想确保不被用户与其他app所 ...
- redis举例调用两种方式方式
在以下的代码演示样例中.将给出两种最为经常使用的Redis命令操作方式,既普通调用方式和基于管线的调用方式. 注:在阅读代码时请留意凝视. 1 #include <stdio.h> ...
- for循环中setTimeout，var与let的不同
先看下面两段代码 for (let i = 0; i < 5; i++) { setTimeout(function () { console.log(i) }, 2000) } for (va ...
- shp数据和tab数据的两点区别
作者:朱金灿 来源:http://blog.csdn.net/clever101 shp是ArcGIS的矢量格式,tab是Mapinfo的矢量格式.shp数据和tab数据有两点区别:一是shp数据的f ...
- Linq知识小总结
一.投影操作符 Select Select操作符对单个序列或集合中的值进行投影. 返回 IEnumerable<类名> //查询语法 var query = from e in db.Em ...
- CUDA页锁定内存（Pinned Memory）
对CUDA架构而言,主机端的内存被分为两种,一种是可分页内存(pageable memroy)和页锁定内存(page-lock或 pinned).可分页内存是由操作系统API malloc()在主机上 ...
- 《深入浅出WPF》笔记——资源篇
原文:<深入浅出WPF>笔记--资源篇 前面的记录有的地方已经用到了资源,本文就来详细的记录一下WPF中的资源.我们平时的“资源”一词是指“资财之源”,是创造人类社会财富的源泉.在计算机程 ...
- CUDA查询和选取设备信息
CUDA查询设备信息 CUDA C中的cudaGetDeviceProperties函数可以很方便的获取到设备的信息,函数原型是: cudaError_t CUDARTAPI cudaGetDevic ...