Silverlight 游戏开发小技巧：动感小菜单2

动感小菜单其实是想模仿Apple的菜单按钮设计制作，但是画虎不成反类犬，看起来有点别扭，昨天各位园友提了这方面的建议，感觉太硬如果加入动画可能更好，非常感谢各位，而今天这篇的动感小菜单2，让按钮更加动感“柔”顺：）期望能做的更好吧。

我们可以直接借助昨天的工程，在上面的基础上修改，打开昨天的工程（Silverlight 游戏开发小技巧：动感小菜单）：

直接选定一个StackPanel的Group，然后按住Alt键复制一个，为了方便编程，这次我们将它制作成一个控件：

在结构里面直接选择刚才Copy的组，点击右键选择Make Into UserControl，中文版是制作成为自定义用户控件选项。

输入一个名字，OK，就会自动进入到这个控件的编辑界面，关于自定义控件，我想其他的Blend教程有详细介绍，这里只介绍技巧相关的内容。

现在我们进入到VS中编程，当然了，如果您喜欢在Blend里直接写也可以，我个人比较习惯在VS里编辑：）

你可以在工程中找到刚才制作的控件，选择对应的cs文件开始写代码吧。

首先，要设定IconCard的图像（请一定参看前一篇，本篇是在前一篇中进行的扩展）

在Group3Control的构造函数中写成这样：

Code Snippet

public Group3Control()
{
InitializeComponent();
for (int i = 0; i < Group3.Children.Count; i++)
{
var item = Group3.Children[i] as IconCard;
item.RenderTransformOrigin = new Point(0.5, 0.5);
item.RenderTransform = new ScaleTransform() { ScaleX = 1, ScaleY = 1 };
item.IconIndex = i;
}
}

前面看过的朋友应该不难理解，这时一个指定操作。

下面重写控件的MouseEnter和MouseLeave的函数。

Code Snippet

protected override void OnMouseMove(MouseEventArgs e)
{
foreach (var item in Group3.Children)
{
var t = item as IconCard;
if (t == null)
continue;
double x = e.GetPosition(t).X - t.ActualWidth / 2;
double y = e.GetPosition(t).Y - t.ActualHeight / 2;
double mine = Math.Sqrt(x * x + y * y);
double mineZoom = Zoom(1.2, mine, 72);
(t.RenderTransform as ScaleTransform).ScaleX = mineZoom;
(t.RenderTransform as ScaleTransform).ScaleY = mineZoom;
}
base.OnMouseLeave(e);
}
protected override void OnMouseLeave(MouseEventArgs e)
{
foreach (var item in Group3.Children)
{
var t = item as IconCard;
if (t == null)
continue;
(t.RenderTransform as ScaleTransform).ScaleX = 1;
(t.RenderTransform as ScaleTransform).ScaleY = 1;
}
base.OnMouseLeave(e);
}
double Zoom(double m, double d, double s)
{
if (d < s)
{
return (m * (d - s) * (d - s) / (s * s) + 1);
}
else
{
return 1.0;
}
}

具体意思是，当鼠标移入的时候，就会计算鼠标和控件的位置，并将所有的子元素遍历修改放缩，由于通过算法得出，可以很好的让小按钮达到“柔”顺的感觉：）

非常感谢路毅提供的算法，使得我能够更专注做关键的工作，特此感谢。本工程中有一段是注释掉的内容，就是他之前的实现效果，有兴趣的朋友可以把注释去掉，看看是什么样子。

本篇工程源代码下载地址如下：点击直接下载

本文作者：Nowpaper

推荐Silverlight游戏开发博客：深蓝色右手

posted on 2011-02-12 10:24 nowpaper 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/nowpaper/archive/2011/02/12/1951879.html

Silverlight 游戏开发小技巧：动感小菜单2相关推荐

一起谈.NET技术，Silverlight 游戏开发小技巧：动感小菜单
网页应用受限于自身的浏览器范畴,不能把华丽效果完全展示,正是因为如此,在网页上诞生了无数绚丽的设计,虽然动感程度和桌面应用无法比拟,但是在UI上却下足了功夫,用户体验可以说无以伦比,比如说小小的菜单, ...
Silverlight 游戏开发小技巧：轨迹跟随效果
Silverlight 游戏开发小技巧:轨迹跟随效果我们通常在游戏中有各种各样的粒子效果,其中有一种就是跟随鼠标发生的轨迹动画,在鼠标经过的地方会产生一些特效,这种方式我们在粒子当中经常使用,本篇使 ...
Silverlight 游戏开发小技巧：实现街霸4的选人界面
Silverlight 游戏开发小技巧:实现街霸4的选人界面上一篇只是一个引子,用来说明Projection的基本操作,游戏研发都是用这些小的基本功能慢慢组合出来,其实这一篇仍然是Projectio ...
Silverlight 游戏开发小技巧：扇形排列元素
Silverlight 游戏开发小技巧:扇形排列元素斗地主风靡了大江南北,在春晚都做免费性推广,棋牌游戏平台几乎将其作为标配,但是牌类游戏总是一成不变的样子--横向排列,如果扇形排列应该更加符合真实 ...
Silverlight 游戏开发小技巧：角色升级特效
这次我们将使用Projection完成一些有趣的RPG游戏中常用的特效:升级和传送点特效,我们不需要请特效师制作复杂绚丽的特效,而是只需要他们提供关键的几张图片或者设计样式,如果了您有本领教会他们使用 ...
视频教程-Layabox3D游戏开发入门-微信3D小游戏案例 -微信开发
Layabox3D游戏开发入门-微信3D小游戏案例有多年Unity程序开发经验,有策划和美术设计的经验.愿意在csdn这个平台和大家一起分享! 金龙 ¥29.00 立即订阅扫码下载「CSDN程序员 ...
Silverlight 游戏开发小技巧：星球大战字幕效果
各位科幻迷可能对星球大战的字幕效果印象深刻,这个电影字幕表现手法曾经风靡大小美国影片,甚至超人影片和电视也曾经用此来做开场和结尾字幕,今天我就将这个效果在blend里面制作技巧告诉大家,下面是星球大战 ...
关于手机（智能机）游戏开发的43条小诀窍
以下内容译自游戏开发工具GameMaker原作者,Markus Overmars的个人推特. 鉴于大家可能对此"小辈"不甚熟悉,所以小弟先从维基上翻译了他的部分简历: Markus ...
小技巧: 从开始菜单进行网络搜索
开始菜单的功能常常被忽视...... 只在寻找某个应用程序或进入控制面板的时候才想起它?事实上,它的本领可远不止这些. 今天小易就和大家分享的小技巧:从开始菜单进行网络搜索. 对 Windows 7 ...

Silverlight 游戏开发小技巧：动感小菜单2

Silverlight 游戏开发小技巧：动感小菜单2相关推荐

最新文章

热门文章