zoukankan      html  css  js  c++  java
  • Silverlight 游戏开发小技“.NET研究”巧:昼夜交替动画 狼人:

      记得在WP7上玩一个游戏有段动画很有趣,是背景在进行昼夜交替,一会儿白天太阳出来白天了,一会儿月亮蹦出来夜晚了,在以前做C++程序的时候曾经实现过类似的效果,今天早上移植了一下到Silverlight当中效果还是不错,当然了,有了Blend神器,就完全不用通过代码的方式实现,真的方便了很多。

      以前的效果预览:

    00  由于条件所限定,本篇中实现的效果仅仅为一个引子,更细的细节,还需要自行制作,请注意,本篇的程序尺寸为600x400的标准。

      为了方便起见,就不用Blend来画太阳和月亮了,直接使用了两张图片:

    1  加入工程后,打开MainPage控件,添加两个Rectangle,分别来表示天空和海面:

    2  上面的两个矩形都填充了渐变颜色,暂时表示一下。

      添加月亮进来,移动到中间

    3  下面是一个小的布局技巧,为了避免月亮随着布局而发生怪异的变化,把宽高定死,并且设定为绝对中间对齐

    4  然后太阳也是这么添加到界面中,现在将海移动到前面来,为了在后面的动画中挡住太阳和月亮:

    5  那么现在开始制作动画了,新建一个故事板动画,名字为ANI_Loop,然后为太阳和月亮添加关键帧,并且移动到海面之下:

    6  现在把月亮移动上来,毕竟一天之际在于午夜时分么。

    7  在2秒的地方添加一个关键帧,把月亮拉到海面以下:

    8  下面就是把太阳升起来:

    910  好了,现在形成一个交替循环,选择ANI_Loop把自动回放选上,把播放测试设为Forever

    11上海企业网站设计与制作th="559" height="335" />  现在可以播放一下,看看是不是循环的出来下去呢,为了增加一些动感,我决定加一个缓冲效果,现在选择所有的帧,看好,可是所有帧哦。

    12  选择Back的第三个缓冲效果。

    13  现在播放起来看看,是否很有趣了呢,太阳和月亮真的就是“蹦”出来的,当然了,你可以尝试其余的缓冲效果,看看是否能形成更有趣的感觉。

      不过大家肯定不会就此满意,因为这天空海面实在太丑了,而且太阳和月亮出来也没有变化,现在下面就开始完成这个问题:

    14  现在把时间轴移动到开始,开始调天空和海面的颜色,大家可以依据自己的想法调整,直到自己满意,此时可以用月亮做参照。

      同样,再将第2秒,即清晨的颜色调出来,此事不需要关闭动画,在Silverlight里Color是可以作为动画的的类型之一。

    15  以及在最后一帧的白天设置出来。

    16  有的时候你可能需要美术设计师的支持,才能得到最佳的表现效果,现在播放一下,看看是否不错呢,日月交替,昼夜交替,如果你想拉长时间,只需要把关键帧调整即可。

      我们在下面加一下小细节,让整个的效果看起来更加真实:月亮的泛光、海面、小星星的制作

      为了不产生混乱,现在将动画的编辑模式关闭,点击界面上方的小红色按钮关闭。

    17  选择月亮,为它添加一个投影的Effect:

    18  参数设置如下:

    19  月亮看起来更加真实了,而海面的话,需要一张海面的波纹图片,添加到海面的Rectangle的下面,并将海面的透明度降低:

    20  关于星星的制作会用上另外一个Effect效果——模糊,画一个小圆圈,5x5就够了,然后添加模糊效果,将参数设置如下:

    21  我在旁边放了一个小参照,看看是不是很像呢:)

      当然了这些细节将会增加更多的设计和编码时间,例如白天星星是不会出现的、波纹只是不动肯定不会好看、甚至太阳和月亮的在海面上的投影,这些细节都决定这个场景的真实性,我相信各位能够做的更好。

      最后不要忘记在构造函数中添加一个Begin,否则这个动画不会自动的运行。

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

  • 相关阅读:
    Android 开发 深入理解Handler、Looper、Messagequeue 转载
    Android 开发 Handler的基本使用
    Java 学习 注解
    Android 开发 AlarmManager 定时器
    Android 开发 框架系列 百度语音合成
    Android 开发 框架系列 Google的ORM框架 Room
    Android 开发 VectorDrawable 矢量图 (三)矢量图动画
    Android 开发 VectorDrawable 矢量图 (二)了解矢量图属性与绘制
    Android 开发 VectorDrawable 矢量图 (一)了解Android矢量图与获取矢量图
    Android 开发 知晓各种id信息 获取线程ID、activityID、内核ID
  • 原文地址:https://www.cnblogs.com/waw/p/2213574.html
Copyright © 2011-2022 走看看