WPF星空效果

2021-09-19 22:00:02 字數 1252 閱讀 4723

原文:

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實現的資源占有率不會飆公升,而是幀數明顯降低.(也可能是我電腦環境的原因)

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

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

2018-01-31更新:

基於canvas的不是粗暴重新整理的那個版本優化.當然沒有質的改變,只是優化了一點點.主要是在星星物件上新增對連線的引用列表.迴圈列表,而不是去迴圈線的容器,邏輯簡單了,少層迴圈.大概100個星減少5%的cup消耗.

WPF星空效果

原文 wpf星空效果 前陣子看到ay的蜘蛛網效果和知乎的登入頁背景,覺得效果很酷.自己也想寫乙個.於是寫著寫著就變成這樣了.少女夢幻的趕腳有木有.我這有著一顆少女心的摳腳大漢 分為兩個部分 1.星星無休止的漫遊.2.星星之間的連線.星星和連線非別放到兩個容器裡,以便分開操作.星星把星星的運動分解為x...

vue實現動態星空效果

在此之前,要先安裝 less less loader webpack.base.conf.js index.html doctype html utf 8 viewport content width device width,initial scale 1.0 vue notes title bo...

flash 呼叫 指令碼 Flash指令碼 星空效果

flash 呼叫 指令碼 creating a starfield effect is easy to begin,download the sample files here.1.create a small star shape,and convert it to a movie clip.gi...