記得在WP7上玩一個(gè)游戲有段動(dòng)畫(huà)很有趣，是背景在進(jìn)行晝夜交替，一會(huì)兒白天太陽(yáng)出來(lái)白天了，一會(huì)兒月亮蹦出來(lái)夜晚了，在以前做C++程序的時(shí)候曾經(jīng)實(shí)現(xiàn)過(guò)類似的效果，今天早上移植了一下到Silverlight當(dāng)中效果還是不錯(cuò)，當(dāng)然了，有了Blend神器，就完全不用通過(guò)代碼的方式實(shí)現(xiàn)，真的方便了很多。

　　以前的效果預(yù)覽：

　　由于條件所限定，本篇中實(shí)現(xiàn)的效果僅僅為一個(gè)引子，更細(xì)的細(xì)節(jié)，還需要自行制作，請(qǐng)注意，本篇的程序尺寸為600x400的標(biāo)準(zhǔn)。

　　為了方便起見(jiàn)，就不用Blend來(lái)畫(huà)太陽(yáng)和月亮了，直接使用了兩張圖片：

　　加入工程后，打開(kāi)MainPage控件，添加兩個(gè)Rectangle，分別來(lái)表示天空和海面：

　　上面的兩個(gè)矩形都填充了漸變顏色，暫時(shí)表示一下。

　　添加月亮進(jìn)來(lái)，移動(dòng)到中間

　　下面是一個(gè)小的布局技巧，為了避免月亮隨著布局而發(fā)生怪異的變化，把寬高定死，并且設(shè)定為絕對(duì)中間對(duì)齊

　　然后太陽(yáng)也是這么添加到界面中，現(xiàn)在將海移動(dòng)到前面來(lái)，為了在后面的動(dòng)畫(huà)中擋住太陽(yáng)和月亮：

　　那么現(xiàn)在開(kāi)始制作動(dòng)畫(huà)了，新建一個(gè)故事板動(dòng)畫(huà)，名字為ANI_Loop，然后為太陽(yáng)和月亮添加關(guān)鍵幀，并且移動(dòng)到海面之下：

　　現(xiàn)在把月亮移動(dòng)上來(lái)，畢竟一天之際在于午夜時(shí)分么。

　　在2秒的地方添加一個(gè)關(guān)鍵幀，把月亮拉到海面以下：

　　下面就是把太陽(yáng)升起來(lái)：

　　好了，現(xiàn)在形成一個(gè)交替循環(huán)，選擇ANI_Loop把自動(dòng)回放選上，把播放測(cè)試設(shè)為Forever

　　現(xiàn)在可以播放一下，看看是不是循環(huán)的出來(lái)下去呢，為了增加一些動(dòng)感，我決定加一個(gè)緩沖效果，現(xiàn)在選擇所有的幀，看好，可是所有幀哦。

　　選擇Back的第三個(gè)緩沖效果。

　　現(xiàn)在播放起來(lái)看看，是否很有趣了呢，太陽(yáng)和月亮真的就是“蹦”出來(lái)的，當(dāng)然了，你可以嘗試其余的緩沖效果，看看是否能形成更有趣的感覺(jué)。

　　不過(guò)大家肯定不會(huì)就此滿意，因?yàn)檫@天空海面實(shí)在太丑了，而且太陽(yáng)和月亮出來(lái)也沒(méi)有變化，現(xiàn)在下面就開(kāi)始完成這個(gè)問(wèn)題：

　　現(xiàn)在把時(shí)間軸移動(dòng)到開(kāi)始，開(kāi)始調(diào)天空和海面的顏色，大家可以依據(jù)自己的想法調(diào)整，直到自己滿意，此時(shí)可以用月亮做參照。

　　同樣，再將第2秒，即清晨的顏色調(diào)出來(lái)，此事不需要關(guān)閉動(dòng)畫(huà)，在Silverlight里Color是可以作為動(dòng)畫(huà)的的類型之一。

　　以及在最后一幀的白天設(shè)置出來(lái)。

　　有的時(shí)候你可能需要美術(shù)設(shè)計(jì)師的支持，才能得到最佳的表現(xiàn)效果，現(xiàn)在播放一下，看看是否不錯(cuò)呢，日月交替，晝夜交替，如果你想拉長(zhǎng)時(shí)間，只需要把關(guān)鍵幀調(diào)整即可。

　　我們?cè)谙旅婕右幌滦〖?xì)節(jié)，讓整個(gè)的效果看起來(lái)更加真實(shí)：月亮的泛光、海面、小星星的制作

　　為了不產(chǎn)生混亂，現(xiàn)在將動(dòng)畫(huà)的編輯模式關(guān)閉，點(diǎn)擊界面上方的小紅色按鈕關(guān)閉。

　　選擇月亮，為它添加一個(gè)投影的Effect：

　　參數(shù)設(shè)置如下：

　　月亮看起來(lái)更加真實(shí)了，而海面的話，需要一張海面的波紋圖片，添加到海面的Rectangle的下面，并將海面的透明度降低：

　　關(guān)于星星的制作會(huì)用上另外一個(gè)Effect效果——模糊，畫(huà)一個(gè)小圓圈，5x5就夠了，然后添加模糊效果，將參數(shù)設(shè)置如下：

　　我在旁邊放了一個(gè)小參照，看看是不是很像呢：）

　　當(dāng)然了這些細(xì)節(jié)將會(huì)增加更多的設(shè)計(jì)和編碼時(shí)間，例如白天星星是不會(huì)出現(xiàn)的、波紋只是不動(dòng)肯定不會(huì)好看、甚至太陽(yáng)和月亮的在海面上的投影，這些細(xì)節(jié)都決定這個(gè)場(chǎng)景的真實(shí)性，我相信各位能夠做的更好。

　　最后不要忘記在構(gòu)造函數(shù)中添加一個(gè)Begin，否則這個(gè)動(dòng)畫(huà)不會(huì)自動(dòng)的運(yùn)行。

　　本篇工程源代碼下載地址如下：點(diǎn)擊直接下載

NET技術(shù)：Silverlight 游戲開(kāi)發(fā)小技巧：晝夜交替動(dòng)畫(huà)，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。