一起谈.NET技术,Silverlight 游戏开发小技巧:动感小菜单
网页应用受限于自身的浏览器范畴,不能把华丽效果完全展示,正是因为如此,在网页上诞生了无数绚丽的设计,虽然动感程度和桌面应用无法比拟,但是在UI上却下足了功夫,用户体验可以说无以伦比,比如说小小的菜单,在桌面游戏还停留在四态按钮的时候,网页应用都已经入动感时代了,这次,使用Silverlight实现一个小菜单,体验一下动感吧
当鼠标移入的时候,目标的图标就会放大,形成一个阶梯的效果,要实现这个效果,将需要使用自定义控件和StackPanel的知识。
现在在一个Silverlight工程中添加新控件,用来制作小圆圈图标,你需要准备一些ICON作为资源,我这里使用了Silverlight 游戏开发小技巧:实现街霸4的选人界面的资源。
为了方便控制,把UserContorl的大小设定为64x64,在LayoutRoot里面添加一个Image控件,起名为IconImage,这个我们会在自定义属性中控制图片的来源:
IconCard.cs中代码写成如下:
{
public IconCard()
{
// Required to initialize variables
InitializeComponent();
}
private int _iconindex = 1;
public int IconIndex
{
get { return _iconindex; }
set
{
_iconindex = value;
var uri = new Uri("/AppleMenu;component/Res/" + value + ".png", UriKind.Relative);
IconImage.Source = new System.Windows.Media.Imaging.BitmapImage(uri);
}
}
}
这个可以使用IconIndex来设置具体显示哪一个图片Icon,同时这个属性可以为将来的选定事件做索引。
当然了,如果你进行了编译,可以在Blend中选定控件,找到扩展属性直接修改:
现在在MainPage中添加一个StackPanel命名为Group1,并将显示方式修改成为“水平”,里面添加一些刚才做制作的图标控件,
上面的Group2是另外一个效果,暂时不需要管他,自定义的控件在Asset(资产)的Project(项目)中查找,如果没有,则需要编译一下Crrl+Alt+B
添加到StackPanel方法也很简单,双击或者拖动都可以,
好了,现在转入到后台中写代码吧,在Blend或VS中打开MainPage.cs,MainPage构造函数中添加如下代码:
{
var c = Group1.Children[i] as IconCard;
if (c == null)
continue;
c.IconIndex = i;
c.RenderTransformOrigin = new Point(0.5, 0.5);
c.RenderTransform = new ScaleTransform() { ScaleX = 1, ScaleY = 1 };
}
这段代码的意思是,从Group1这个控件中取得一个元素,转换元素成为IconCard控件,如果为null就不是,否则就可以制定一个索引给它,而它的索引属性会帮我们更改,这个操作你可以参照上面的内容在Blend里完成,而后面的代码是指定变换的中心点为整个控件的(50%,50%)位置,并且指定一个放缩变换给它,不要着急我们后面会用上。
现在给Group1添加一个鼠标的移动事件和鼠标离开事件。
Group1.MouseLeave += new MouseEventHandler(Group1_MouseLeave);
并且在鼠标移动和离开事件写入如下的代码:
{
for (int i = 0; i < Group1.Children.Count; i++)
{
var c = Group1.Children[i] as IconCard;
if (c == null)
continue;
(c.RenderTransform as ScaleTransform).ScaleX = 1;
(c.RenderTransform as ScaleTransform).ScaleY = 1;
}
}
void Group1_MouseMove(object sender, MouseEventArgs e)
{
var pt = e.GetPosition(Group1);
int offest = (int)pt.X / 64;
if (offest >= Group1.Children.Count)
offest = Group1.Children.Count - 1;
else
if (offest < 0)
offest = 0;
double size = 1.5;
for (int i = offest; i < Group1.Children.Count; i++)
{
var c = Group1.Children[i] as IconCard;
if (c == null)
continue;
(c.RenderTransform as ScaleTransform).ScaleX = size;
(c.RenderTransform as ScaleTransform).ScaleY = size;
size -= 0.25;
if (size <= 1)
size = 1;
}
size = 1.5;
for (int i = offest; i >=0; i--)
{
var c = Group1.Children[i] as IconCard;
if (c == null)
continue;
(c.RenderTransform as ScaleTransform).ScaleX = size;
(c.RenderTransform as ScaleTransform).ScaleY = size;
size -= 0.25;
if (size <= 1)
size = 1;
}
}
这段代码虽然写的有点啰嗦,但是看起来并不困难,通过鼠标的X坐标位置取得偏移点,计算出偏移位置上是第几个控件,然后倒退和前进的方式设置其他控件的大小,这样就能出来一个类似波浪的效果。
现在已经完毕,在下面的DEMO中,会看到最终效果,以及用类似方式做出来的旋转效果:)
本篇工程源代码下载地址如下:点击直接下载
一起谈.NET技术,Silverlight 游戏开发小技巧:动感小菜单相关推荐
- Silverlight 游戏开发小技巧:角色升级特效
这次我们将使用Projection完成一些有趣的RPG游戏中常用的特效:升级和传送点特效,我们不需要请特效师制作复杂绚丽的特效,而是只需要他们提供关键的几张图片或者设计样式,如果了您有本领教会他们使用 ...
- Silverlight 游戏开发小技巧:动感小菜单2
Silverlight 游戏开发小技巧:动感小菜单2 动感小菜单其实是想模仿Apple的菜单按钮设计制作,但是画虎不成反类犬,看起来有点别扭,昨天各位园友提了这方面的建议,感觉太硬如果加入动画可能更好 ...
- Silverlight 游戏开发小技巧:轨迹跟随效果
Silverlight 游戏开发小技巧:轨迹跟随效果 我们通常在游戏中有各种各样的粒子效果,其中有一种就是跟随鼠标发生的轨迹动画,在鼠标经过的地方会产生一些特效,这种方式我们在粒子当中经常使用,本篇使 ...
- Silverlight 游戏开发小技巧:实现街霸4的选人界面
Silverlight 游戏开发小技巧:实现街霸4的选人界面 上一篇只是一个引子,用来说明Projection的基本操作,游戏研发都是用这些小的基本功能慢慢组合出来,其实这一篇仍然是Projectio ...
- Silverlight 游戏开发小技巧:扇形排列元素
Silverlight 游戏开发小技巧:扇形排列元素 斗地主风靡了大江南北,在春晚都做免费性推广,棋牌游戏平台几乎将其作为标配,但是牌类游戏总是一成不变的样子--横向排列,如果扇形排列应该更加符合真实 ...
- 视频教程-Layabox3D游戏开发入门-微信3D小游戏案例 -微信开发
Layabox3D游戏开发入门-微信3D小游戏案例 有多年Unity程序开发经验,有策划和美术设计的经验.愿意在csdn这个平台和大家一起分享! 金龙 ¥29.00 立即订阅 扫码下载「CSDN程序员 ...
- Silverlight 游戏开发小技巧:星球大战字幕效果
各位科幻迷可能对星球大战的字幕效果印象深刻,这个电影字幕表现手法曾经风靡大小美国影片,甚至超人影片和电视也曾经用此来做开场和结尾字幕,今天我就将这个效果在blend里面制作技巧告诉大家,下面是星球大战 ...
- Silverlight 游戏开发:可重用的拖拽控件
游戏中有各种各样的拖拽需求,大到窗口,小到图标,在游戏界面操作中,点击和拖拽占据了用户操作的大部分行为,如何做好一个拖拽控件至关重要,做一个可重用的拖拽控件更加重要,我的这些实现方法可能比较另类,但只 ...
- 增强现实技术与游戏开发
你还在为连输排位怒删王者荣耀后的无聊而担心吗?你还在为无法真实体验吃鸡的快乐而深感遗憾吗?你还在为无法得到现实的关爱而精神空虚吗?而AR确实可以能帮助你解决这一类技术. 增强现实技术(Augmente ...
最新文章
- orm框架有哪些_java技术哪些是必学的?
- python面试-马哥教育官网-专业Linux培训班,Python培训机构
- v 3437 powered by ipb_奔驰V系改装订制版 目前最安全的商务车_凤凰网汽车
- Nginx(五):动静分离
- linux安装gcc运行时库,Linux安装gcc-6.1.0
- Redisson 实现分布式锁
- Sqlserver常用函数例子说明
- 阿里云搭建图片服务器,图片资源服务器搭建
- 米家扫地机器人怎么加水_时隔两年半终于更新 贵了500元的小米米家扫地机器人1S值得买吗?...
- 【漏扫工具】AWVS12使用介绍
- 电子书阅读软件的功能
- 机器学习的四种学习方法
- 基于WDF的驱动开发
- 设计一个小型的物联网应用系统_点赞 | 面向能源物联网的智能传感芯片设计与应用...
- pandas中怎么把第一列删掉_pandas删除某一列的方法
- 5G产业(一):5G超低延时噱头?
- Drag and drop拖放框架
- JVM垃圾清理机制详解 ✨ 每日积累
- Monorail学习笔记
- [喵咪大数据]Hive2搭建和基本操作
热门文章
- 雷军旗下金山云冲刺IPO:3年营收74亿,小米系贡献23%,CEO王育林仅持股2.1%
- 阿里达摩院青橙奖再颁发!10名大陆青年科学家各获100万,最小获奖者28岁
- 深入分析 java 8 编程语言规范:Threads and Locks
- 【CSS练习】IT修真院--练习4-移动端界面
- javascript:12种JavaScript MVC框架之比较
- 在Nginx和Apache服务器配置https
- Java 深、浅克隆
- php 超长用省略号代替
- Qt 使用#define+qDebug()输出调试信息
- IE6-IE9兼容性问题列表及解决办法_补遗漏之一:button的type默认值改变为submit了。...