WPF星空效果

標籤：.com   解釋   com   模糊效果   mat   電腦   log   ble   files   

效果

前陣子看到ay的蜘蛛網效果和知乎的登入頁背景,覺得效果很酷.自己也想寫一個.於是寫著寫著就變成這樣了.少女夢幻的趕腳有木有.我這有著一顆少女心的摳腳大漢

實現思路

分為兩個部分:

1.星星無休止的漫遊.

2.星星之間的連線.

星星和連線非別放到兩個容器裡,以便分開操作.

星星

把星星的運動分解為X軸和Y軸兩個不相干的運動,分別操作.操作就是隨機產生一個速度,隨機產生一個時間.運動完之後再隨機產生一個速度,隨機產生一個時間......無限迴圈.

星星的旋轉也是同樣的道理.

連線

首先解釋下連線的規則.兩個星星之間連線,每個星星都有一個連線的勢力範圍,就是寬度乘以連線倍率,這個連線倍率可以在表單設定.當兩個勢力範圍有交集的時候,就連線.

例:星1寬度5,星2寬度10,連線倍率是3,那麼這兩個星星的距離小於5*3+10*3=45時就連線,大於45時斷開.如果連線倍率設定為4,則兩個星星減的距離小於5*4+10*4=60時連線,大於60時斷開.

實現與資源佔有率

星星運動的實現有兩種:

1.基於Grid和TranslateTransform.用DoubleAnimation動畫控制星星的位移.

2.基於Canvas.通過幀動畫控制Canvas的X,Y.

連線的實現也有兩種:

1.簡單粗暴.在每一幀都清空連線容器.然後雙層迴圈星星,重新串連所有星星(符合連線規則的).

2.在每一幀迴圈連線,判斷連線規則.符合就改變此連線的X1,Y1,X2,Y2.而不去重新new連線.不符合規則的就移除.然後依然是雙層迴圈星星,看符合規則的兩個星星間有沒有連線,沒有的就new一個.

眾所周知,WPF做這種動畫資源佔有率還是比較高的,寫了這麼多實現,也是因為這個.

大體上還是基於Canvas的實現佔用資源稍低.但也有個問題,如果給星星再加一個模糊效果的話,基於Canvas實現的資源佔有率不會飆升,而是幀數明顯降低.(也可能是我電腦環境的原因)

並不能說那種實現好與壞,可能具體運行環境不一樣,參數設定不一樣,每種實現都有不同的表現.

然後關於資源佔有率問題,以我目前的水平,就只能到這了.博友們自己取捨吧.

 

源碼下載:星空效果的兩種實現.zip

WPF星空效果