Silverlight 游戲開(kāi)發(fā)技能冷卻效果小技巧

Microsoft Silverlight5.1.41212.0 多語(yǔ)中文版

• 類型：編程工具大小：19.2M語(yǔ)言：多國(guó)語(yǔ)言[中文] 評(píng)分：6.6
• 標(biāo)簽：

立即下載

到目前為止，大家都非常推崇魔獸的技能冷卻效果，就是這樣的，我記得群里還對(duì)這個(gè)效果展開(kāi)過(guò)探討，其實(shí)實(shí)現(xiàn)起來(lái)并不難，關(guān)鍵是思路是否正確，這部分我得謝謝豬笨無(wú)罪，是他先想出的解決方案，他不愿意寫(xiě)博客，也就只好我來(lái)代勞了，哈哈，后面提供源代碼和預(yù)覽，不要錯(cuò)過(guò)。

那么我們開(kāi)始制作，第一步建立工程，如果你是在自己的項(xiàng)目中應(yīng)用，直接進(jìn)入第二步創(chuàng)建圖標(biāo)，

把一張圖標(biāo)文件放進(jìn)來(lái)，這樣看起來(lái)更加直觀，此時(shí)將SkillIcon控件的寬和高都設(shè)定成64x64，這里非常重要，我設(shè)定為64寬高是為了方便展示，你需要依據(jù)自己的ICON尺寸做修改。

然后中間切分LayoutRoot，

添加兩個(gè)Grid到控件LayoutRoot中，各自為一半，效果如下，為了方便演示，我填充了顏色做區(qū)分

設(shè)置兩個(gè)Rectangle分別對(duì)齊到兩個(gè)Grid上，大小位置都是一樣，然后分別使用Make Clipping Path對(duì)自己對(duì)應(yīng)的Gird裁剪。

此時(shí)你會(huì)發(fā)現(xiàn)，這時(shí)所有內(nèi)部的對(duì)象都是被裁剪的效果，然后我們可以利用這個(gè)特點(diǎn)制作冷卻的動(dòng)畫(huà)。

現(xiàn)在可以向兩個(gè)Grid添加一個(gè)Rectangle，將Rectangle的填充顏色設(shè)置成為黑色，不透明度為30%，并且將LayoutRoot的背景設(shè)置為圖像畫(huà)筆，將圖標(biāo)圖像加入。

其實(shí)這里有個(gè)細(xì)節(jié)，Rectangle的填充色其實(shí)可以直接帶上透明效果，只是將ARGB的A修改即可，按照我們的實(shí)際測(cè)試，不透明度盡量減少，而使用顏色的A值性能消耗更少。

上面的圖中就是一個(gè)Grid當(dāng)中加了Rectangle，請(qǐng)注意Rectangle的參數(shù)，只需要將邊距設(shè)置為-32即可，大小是圖標(biāo)本身的2倍，因?yàn)槲覀円�利用它的旋轉(zhuǎn)產(chǎn)生冷卻效果。

第二個(gè)Rectangle的對(duì)齊方式和第一個(gè)有所不同，都做好了以后，就可以做動(dòng)畫(huà)了。

在那之前，需要將旋轉(zhuǎn)的中心點(diǎn)設(shè)置的圖標(biāo)控件的中心位置，由于是分別左邊和靠右邊，就需要分別處理，

先選擇右邊的Rectangle，將變換中的中心點(diǎn)為之設(shè)置為0，0.5，然后旋轉(zhuǎn)一下看看，是否有感覺(jué)了呢？

好了，做一個(gè)故事板動(dòng)畫(huà)，然后在指定的時(shí)間上，讓這個(gè)矩形旋轉(zhuǎn)180度

在左邊的矩形上制作一個(gè)動(dòng)畫(huà)，也是旋轉(zhuǎn)180度，但是需要注意的是，這個(gè)動(dòng)畫(huà)要在第一個(gè)播放完畢之后播放，所以關(guān)鍵幀的位置請(qǐng)留意。

在調(diào)動(dòng)畫(huà)的時(shí)候，我們可能還要做一些細(xì)致的工作，比如顯示和消失的關(guān)系，旋轉(zhuǎn)之后的容錯(cuò)問(wèn)題，所以最后的時(shí)間線可能是這樣的：

好了，一個(gè)動(dòng)畫(huà)出來(lái)了，然后我們看看效果