Silverlight 游戏开发小技巧:动感弹出动画

玩Silverlight的朋友一定对自带控件ChildWindow印象深刻,Show的时候仿佛从远处弹了出来,这个效果制作起来并不复杂,下面就将介绍这个小技巧,本篇并非是一个新鲜的技巧,而是一般的故事板结合变换放缩实现。
0_thumb[2]Silverlight 游戏开发小技巧:动感弹出动画 做法也是很简单,在这里做一个抛砖引玉的小节吧:)
首先准备一个控件,这时为了更好的进行操作和控制,下面就是新建了Card控件,果断的放上了鄙人的自画像。
1_thumb[2]0_thumb[2]Silverlight 游戏开发小技巧:动感弹出动画 现在做一个放缩动画,新建一个故事板动画:
2_thumb[2]1_thumb[2]0_thumb[2]Silverlight 游戏开发小技巧:动感弹出动画 只要添加两个关键在0和0.5秒的位置即可:
3_thumb[1]2_thumb[2]1_thumb[2]0_thumb[2]Silverlight 游戏开发小技巧:动感弹出动画 下面选择开始点的关键帧位置的时间轴,将放缩设置为0:
4_thumb[1]3_thumb[1]2_thumb[2]1_thumb[2]0_thumb[2]Silverlight 游戏开发小技巧:动感弹出动画 此时可以播放看一下效果,你会发现,图片从小到大,但是弹出的感觉没有,没关系,下面使用Easing(缓冲)的Elastic Out,当选择一个关键帧的时候就会出现下面的界面,选定之后将Oscillations为2和Springiness为1,现在播放一下是否有点意思了呢。
5_thumb[1]4_thumb[1]3_thumb[1]2_thumb[2]1_thumb[2]0_thumb[2]Silverlight 游戏开发小技巧:动感弹出动画 现在到MainPage中,然后在Asset下面的Project标签找到刚才创建的控件,如果没有的话,需要编译一下(Ctrl+Alt+B)。
6_thumb[1]5_thumb[1]4_thumb[1]3_thumb[1]2_thumb[2]1_thumb[2]0_thumb[2]Silverlight 游戏开发小技巧:动感弹出动画 然后进行一些布局,按具体照个人想法来设计,我加了一个按钮用来触发动画播放。
7_thumb[2]6_thumb[1]5_thumb[1]4_thumb[1]3_thumb[1]2_thumb[2]1_thumb[2]0_thumb[2]Silverlight 游戏开发小技巧:动感弹出动画 按钮事件不需要在后台来写,只需要选定按钮,在右上的Properties标签下面选择事件分类,双击Click事件就会自动增加事件到后台代码:
10_thumb[2]7_thumb[2]6_thumb[1]5_thumb[1]4_thumb[1]3_thumb[1]2_thumb[2]1_thumb[2]0_thumb[2]Silverlight 游戏开发小技巧:动感弹出动画 自动会出现这个Click事件,现在为这个事件增加对应动画的播放行为即可。
11_thumb[2]10_thumb[2]7_thumb[2]6_thumb[1]5_thumb[1]4_thumb[1]3_thumb[1]2_thumb[2]1_thumb[2]0_thumb[2]Silverlight 游戏开发小技巧:动感弹出动画 具体效果可以预览后面的效果,也可以下载代码查看,本篇较为简单,但是这个小细节却能够为游戏或者应用锦上添花,它可以在窗口、按钮、物体等多个地方应用,如果结合之前的一些例如动感菜单的效果,是不是会更加有趣了呢:)
本篇工程源代码下载地址如下:点击直接下载
Tags: 

延伸阅读

最新评论

发表评论