可能會奇怪為什麼有來一個第2號版本,其實,這是改進版本,而這個改進版本實現起來更加容易,更加方便,但是問題也是很明顯的,因為會加上一個100多KB的DLL,對於網頁遊戲來說,任何1KB都是寶貴的資源, 就為了這個小效果而平白無故增加XAP的容量,也驗證了有得必有失道理,魚與熊掌應該如何取捨呢,先來看看這個實現方式吧。
前面的建立方式幾乎是一樣的,但是不需要增加那兩個Grid的了,而是直接用一個整個大小的Rect來裁切掉LayoutRoot,
當然了,如果喜歡可以使用Border或者其他的容器做底,現在添加一個圖片作為圖示的底圖,然後在Asset裡找到「Pie」這個控制項。
你可以在提示資訊中知道,要用這個控制項需要Microsoft.Expression.Drawing.dll,而這個就是罪魁禍首,它會無情的進入最後發佈的XAP當中,好了,我們先不糾結這個問題,先往下繼續進行。
添加到控制項中:
然後將外邊邊距擴展出來,這樣才不會讓扇形的圓弧漏在外面,順便我們填充一個半透明的黑色。
我們將Margin都設成了-15,在Pie控制項中,StartAngle是開始的角度,我簡單設置了120,已經和前面的有所不同。
現在製作故事板動畫,方式和原來差不多。
這是一個簡單的動畫,在0秒的時候設置StartAngle為0,在第2秒的時候設置為360,如果你需要各種不同時間長度的,可以做一些調整。
上一篇沒有寫點擊代碼,這次補上,可以依據自己的需求改造,如果我們對UserControl程式設計的話,可以重寫滑鼠的點擊事件。
public partial class SkillIcon : UserControl
{
public SkillIcon()
{
InitializeComponent();
}
protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
{
ANI_CoolDown.Begin();
base. OnMouseLeftButtonDown(e);
}
}
其實就是執行一下Begin()
在下面的運行效果中,幾乎和第一種完全一樣,這裡就需要做一個對比和取捨,到底是為了方便而犧牲大小,還是為了減少100KB(實際壓縮可能只有50KB)而犧牲製作效率呢。 其實每種方法都可以,只要能夠實現我們的想法。
原始程式碼下載位址如下:點擊直接下載