WPF星空效果

原文: WPF星空效果

效果

前陣子看到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

2018-01-31更新:

基于Canvas的不是粗暴重新整理的那個版本優化.當然沒有質的改變,隻是優化了一點點.主要是在星星對象上添加對連線的引用清單.循環清單,而不是去循環線的容器,邏輯簡單了,少層循環.大概100個星減少5%的cup消耗.

優化後的源碼下載下傳:

StarrySkyBasedOnCanvasYOUHUA.zip