- 類(lèi)型：編程工具大小：19.2M語(yǔ)言：多國(guó)語(yǔ)言[中文] 評(píng)分：6.6
- 標(biāo)簽：
這次我們將使用Projection完成一些有趣的RPG游戲中常用的特效：升級(jí)和傳送點(diǎn)特效，我們不需要請(qǐng)?zhí)匦熤谱鲝?fù)雜絢麗的特效，而是只需要他們提供關(guān)鍵的幾張圖片或者設(shè)計(jì)樣式，如果了您有本領(lǐng)教會(huì)他們使用Blend來(lái)做特效，那就太好了，好了，閑話不說(shuō)，在Silverlight中制作下面的這種效果簡(jiǎn)直是手到擒來(lái)。
這個(gè)拍攝的角度效果不是很合適，但是大概能夠看清楚，這時(shí)一個(gè)升級(jí)的特效動(dòng)畫(huà)，我們今天將會(huì)完成這個(gè)效果，就像下面這樣
雖說(shuō)用Blend做這樣的Silverlight特效易如反掌，但是讀者還是要了解一下Projection的基礎(chǔ)知識(shí)，在前面兩篇當(dāng)中已經(jīng)做了詳細(xì)的例子，如果需要補(bǔ)課的請(qǐng)?jiān)倏匆槐椤?/p>
首先你需要一個(gè)工程，然后建立一個(gè)控件名字暫時(shí)叫Effect_Levelup，現(xiàn)在預(yù)備一個(gè)角色的參照，按照下面的位置放置，原因是你需要以原點(diǎn)定位：
為了操作起來(lái)方便，建議將LayoutRoot轉(zhuǎn)換成為Canvas控件，為什么要將角色這么放置，需要了解Silverlight的容器概念，控件的位置定位是按照左上角定位，這和屏幕的關(guān)系是一樣，所以這樣做的做法是讓未來(lái)的控件直接和角色的中心點(diǎn)對(duì)齊（Center）。
下面就是考驗(yàn)美術(shù)設(shè)計(jì)能力的時(shí)候了，我們的目標(biāo)效果是下面的樣子：
不要被這些東西嚇壞，其實(shí)做起來(lái)一點(diǎn)都不難，我們這里只是使用來(lái)的Projection的3D旋轉(zhuǎn)，其他的只是使用簡(jiǎn)單的位移而已。
我們先將這個(gè)圈圈畫(huà)出來(lái)：
這個(gè)圈只是填充了一個(gè)紫色，然后使用了柔化特效，你可以在Effect屬性中點(diǎn)擊設(shè)置
下面我們?cè)趶?fù)制一個(gè)這個(gè)圈，但是去掉模糊特效，并且將顏色填充
顏色設(shè)置請(qǐng)參看右邊，你可能有趣的發(fā)現(xiàn)并不是填充色造成的這個(gè)效果，而是Stroke，建議做一些嘗試吧。
然后我們?cè)佼?huà)幾個(gè)內(nèi)圈
這些內(nèi)圈可以使用上面的畫(huà)成一個(gè)貌似閃光的圓環(huán)，在這些上面做一些妝點(diǎn)。
裝飾一些漂亮的發(fā)光球，你需要復(fù)制一個(gè)中心環(huán)，用中心漸變填充，將顏色色值的A調(diào)成透明，幾個(gè)復(fù)合顏色下來(lái)就能夠得到一個(gè)“小亮點(diǎn)”，下一步將他們組合就能夠有我們所期望的效果。
好了，現(xiàn)在將剛才畫(huà)的圈圈全部組合起來(lái)成為一個(gè)Grid：
下一步繼續(xù)將組合的Grid再組合到一個(gè)新的Grid中，為什么這么做呢，因?yàn)橐儞Q透視感覺(jué)，在后面的動(dòng)畫(huà)中的旋轉(zhuǎn)做準(zhǔn)備
到這一步大家似乎能夠看出有點(diǎn)眉目了，關(guān)于前后的漸變不透明，也是通過(guò)不透明Mask的填充得到
加入幾根光柱讓效果更加顯著：
只需要用Ellipse即可，我們用不上太復(fù)雜的Path，最后為了讓這個(gè)升級(jí)動(dòng)畫(huà)更豐富一點(diǎn)，加入幾個(gè)套圈。
這幾個(gè)套圈的制作方法幾乎和前面的沒(méi)什么區(qū)別，這里主要是再次為大家講解有關(guān)三維旋轉(zhuǎn)的例子。
為了更好的操作，現(xiàn)在將他們合并到一個(gè)容器當(dāng)中，
下面就是調(diào)動(dòng)畫(huà)的事件了，我計(jì)劃將在第二個(gè)部分做詳細(xì)的講解，這里是一個(gè)完成版本的圖片，請(qǐng)參看吧
這個(gè)動(dòng)畫(huà)做起來(lái)并不難，難就在對(duì)這些控件之間的關(guān)系理解，最后，我們把角色的參照?qǐng)D給刪除掉，然后生成工程，在MainPage里加入這個(gè)控件，看看效果。
我們前面把特效放置在左上0,0點(diǎn)，并且使用Canvas作為容器，所以才會(huì)產(chǎn)生內(nèi)容不會(huì)變形控件。
然后我們?cè)贛ainpage里簡(jiǎn)單的寫(xiě)一些邏輯和代碼，請(qǐng)注意此事我已經(jīng)將中間的升級(jí)按鈕命名為btn_levelup，特效動(dòng)畫(huà)命名為effect_Levelup，升級(jí)特效的控件中的故事板動(dòng)畫(huà)名字為ANI_Show
Code Snippet這段代碼只是點(diǎn)擊的時(shí)候就會(huì)觸發(fā)動(dòng)畫(huà)播放。
具體效果，請(qǐng)參看下面的直接實(shí)例，關(guān)于傳送點(diǎn)的特效制作，咱們明天再說(shuō)：）
源代碼下載地址如下：
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
喜歡 
頂
難過(guò)
囧
圍觀
無(wú)聊
