win10 uwp 螢火蟲效果

原文:

win10 uwp 螢火蟲效果

本文在nukepayload2指導下，使用他的思想用c#寫出來。

下面先讓大家看一下效果圖再告訴大家如何做

介面只需要很簡單兩句**，第一句**是命名引用，第二句**就是新增 win2d

xmlns:canvas="using:microsoft.graphics.canvas.ui.xaml"
x:name="canvas"
clearcolor="black"
update="canvas_onupdate"
draw="canvas_draw">
canvas:canvasanimatedcontrol>

這裡為何使用canvasanimatedcontrol而不是使用canvascontrol？因為需要進行更新，canvasanimatedcontrol提供了一些事件，這些事件可以用來做動畫。

在canvas_onupdate就寫更新所有螢火蟲的**，在canvas_draw就寫畫出螢火蟲的**。

於是開始建立螢火蟲的**，在建立之前，需要乙個隨機的類，這個類用於控制螢火蟲的呼吸和移動，都是隨機的。

在指定的範圍之內，隨機取乙個點，這個點作為目的的點。於是當前的值就開始移動向目的的點，移動的過程存在速度。

從這裡可以知道，這個類需要下面這些屬性

public double value public double to public double dalue public double ma public double mi ////// 加速度 ///public double po

其中dalue就是速度，從 value 到 to 的速度，這個速度在隨時可以被修改。

下面是這個類全部**

class ran
public
double value 
public
double to 
public
double dalue 
public
double ma 
public
double mi 
public
bool easingfunction 
////// 加速度
///public
double po 
public
void
time(timespan time)
else
}//減數
if (easingfunction && math.abs(value - to) < dalue*10
/*如果接近*/)
}int n = 1;
if (value > to)
value += n * dalue * time.totalseconds * 2;
if (n > 0 && value >= to)
if (n < 0 && value <= to)
}private
static random ran = new random();
}

下面就是主要的類fireflyparticle包含了位置和顏色，不同透明度，當然不透明度可以做呼吸效果，於是這些值都需要做隨機移動

class fireflyparticle
;_y = new ran(point.y, bound.height, 0)
;_radius = new ran(ran.next(2, 5), 5, 2)
;bound = bound;
}public
fireflyparticle()
public
void
time(timespan time)
public point point 
public rect bound
set}
public
double radius = 10;
public color centercolor = color.fromargb(255, 252, 203, 89);
public
double opcolor = 1;
private
static random ran = new random();
private ran _radius;
private ran _opcolor = new ran(1, 1, 0.001);
private ran _x;
private ran _y;
private rect _bound;
}

看到這，是不是覺得引數存在time無法理解？這裡的使用 time 是為了在效能比較差的電腦得到效果和效能比較好的一樣，雖然中途有一些沒有顯示的，但是計算結果相同，不會出現效能差的電腦，動畫速度和效能好的電腦不一樣。

下面就是更新所有的值，建立屬性fireflyparticle用於放所有的類，因為很簡單，我就不解釋。

private listfireflyparticle  = new list();
private
void
bpyaxxjwkqwknemobzpage_loaded(object sender, routedeventargs e)}}
private
void
canvas_onupdate(icanvasanimatedcontrol sender, canvasanimatedupdateeventargs args)
}

把所有的值都進行變化，就是在做動畫，但是移動距離不能太長，移動的演算法在上面的隨機類寫的，演算法很簡單，也不是關鍵，於是在這裡就不說了。

這裡的核心就是畫出來，如何在 win2d 畫出乙個點，把這個點高斯模糊。不知道大家知道 photoshop ，這裡用到了圖層，需要自己心中知道是什麼東西。現在的一般都是很多個合成，於是可以把乙個點作為乙個圖層，到時候把這些點合併就是上面給大家看到的圖。

如何在 win2d 使用圖層，主要的類是canvascommandlist用它就可以做出圖層，最好使用drawimage把他弄出來。

private
void
canvas_draw(icanvasanimatedcontrol sender, canvasanimateddraweventargs args)}}

如何對圖層做模糊？在win2d有很多效果，先嘗試把點畫出來，效果圖：

需要知道所有的效果都是可以直接畫出來，我用的方法很簡單，就直接寫**

class gloweffectgraph : idisposable
;blur.source = morphology;
}public gaussianblureffect blur = new gaussianblureffect();
public
void
dispose()
public
void
setup(icanvasimage canvas, double amount = 10)
}

如何要把圖層畫出來，那麼修改canvas_draw的**

private
void
canvas_draw(icanvasanimatedcontrol sender, canvasanimateddraweventargs args)}}
}}

這個效果我放在商業遊戲可以玩一下，**開源

參見：使用win2d實現螢火蟲粒子效果 - nukepayload2 -

win10 uwp 螢火蟲效果

螢火蟲效果

win10 uwp 繫結密碼

win10 uwp 重啟軟體

win10 uwp 螢火蟲效果

螢火蟲效果

win10 uwp 繫結密碼

win10 uwp 重啟軟體

相關推薦