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