先上效果圖

這個(gè)效果來(lái)自于三星S5的充電界面,當(dāng)然有些細(xì)節(jié)差別,主要看思路.本文目的是技術(shù)交流,不要將效果直接運(yùn)用于商業(yè)產(chǎn)品和項(xiàng)目.

電池背景

因?yàn)殡姵貎?nèi)部有好幾個(gè)部分,所以本例用了一個(gè)Grid來(lái)做背景,用Clip屬性剪切出一個(gè)電池的輪廓,這樣不僅顯示出一個(gè)電池的輪廓,還可以避免水波和氣泡跑顯示Grid的外面.

Clip的內(nèi)部,是一個(gè)Path形狀.具體畫(huà)法就不多說(shuō)了,以前寫(xiě)過(guò).有興趣的同學(xué)看這里:http://www.cnblogs.com/tsliwei/p/5609035.html

表示電量的液體效果

整個(gè)液體分兩部分,上面是波浪,下面是矩形.進(jìn)度值實(shí)際控制的是矩形的高度.兩個(gè)控件放到StackPanel中,讓下面的矩形往上頂.最后給波浪底部Margin值為-1,使其看起來(lái)沒(méi)有間隙.

波浪是用貝塞爾曲線實(shí)現(xiàn)的,首先介紹下貝塞爾曲線

貝塞爾曲線有4個(gè)點(diǎn),起點(diǎn)終點(diǎn)和兩個(gè)控制點(diǎn).(此括號(hào)里的可以不看:上圖畫(huà)的并不準(zhǔn)確,因?yàn)榭刂泣c(diǎn)并不一定在曲線上).通過(guò)兩個(gè)控制點(diǎn)決定曲線的路徑.

顯然上圖這本身就是個(gè)波浪形.使用點(diǎn)動(dòng)畫(huà)PointAnimation控制兩個(gè)點(diǎn)上下運(yùn)動(dòng)就有了波浪的動(dòng)態(tài)效果.注意兩個(gè)動(dòng)畫(huà)時(shí)間不要一樣,否則看起來(lái)動(dòng)畫(huà)太假.兩個(gè)時(shí)間錯(cuò)開(kāi)一點(diǎn)點(diǎn)就好了.

波浪部分寬度是50,高度是5

氣泡效果

這里的氣泡效果就是個(gè)典型的粒子效果,而且是最簡(jiǎn)單的那種,并不涉及到什么復(fù)雜的公式計(jì)算.

簡(jiǎn)單介紹下原理:這里的氣泡可以看成是圓按照一定的速度不斷的上升(改變Y軸坐標(biāo)).所以規(guī)定一個(gè)速率,規(guī)定一個(gè)距離,使用幀動(dòng)畫(huà)CompositionTarget.Rendering,在每一幀都在Y軸上加這個(gè)速率在一幀移動(dòng)的距離.然后判斷又沒(méi)達(dá)到規(guī)定的距離.如果達(dá)到,移除這個(gè)圓圈,否則繼續(xù)上升.

氣泡可以分成三個(gè)部分:

1.電池內(nèi)部的氣泡.大小適中,移動(dòng)速度最慢,移動(dòng)距離最短.

2.屏幕底部的大氣泡,個(gè)頭比較大,移動(dòng)速度較慢,移動(dòng)距離較短.

3.屏幕底部的小氣泡,個(gè)頭最小,移動(dòng)速度較快,移動(dòng)距離較遠(yuǎn).

新建一個(gè)Class,用來(lái)表示氣泡信息

其中兩個(gè)重要屬性,一個(gè)是速率,一個(gè)是氣泡需要移動(dòng)的距離.這兩個(gè)屬性決定了氣泡的運(yùn)動(dòng)軌跡.第三個(gè)屬性是用來(lái)判斷氣泡是不是完成了使命,第四個(gè)屬性是添加一個(gè)對(duì)氣泡的引用,這樣方便在后臺(tái)控制氣泡.

定義三個(gè)集合,用來(lái)存放三部分的氣泡信息.

在幀渲染事件內(nèi),遍歷三個(gè)集合.讓集合里的每個(gè)氣泡都向上移動(dòng)(Canvas.SetTop),判斷氣泡是不是已經(jīng)移動(dòng)了指定的距離,是的話就在頁(yè)面移除氣泡,集合也移除該氣泡信息.判斷集合的Count是不是小于規(guī)定個(gè)個(gè)數(shù),如果小于,就向頁(yè)面添加氣泡,集合添加氣泡信息.

畫(huà)氣泡

為了美觀,我自己畫(huà)了個(gè)氣泡的模型,用在了大氣泡上.小氣泡直接用的橢圓,因?yàn)榧词褂媚Ｐ?因?yàn)樘?也看不出來(lái).實(shí)際上大氣泡也不怎么看得出來(lái).不過(guò)既然寫(xiě)了,還是介紹下吧.畫(huà)的并不是很好看.還請(qǐng)見(jiàn)諒.

首先這個(gè)氣泡就是個(gè)ViewBox.方便縮放.

輪廓是個(gè)正圓,Fill給了個(gè)漸變畫(huà)刷,向外不斷加深,在最外圈0.85-1的部分是最深的.三個(gè)點(diǎn)的R都是20,B都是10,綠色部分G依次減小,分別是240,150,100.

右下邊的月牙是個(gè)Path,給了個(gè)半徑是10的模糊效果.Fill是半透明的白色.月牙的畫(huà)法就是兩個(gè)弧線,起點(diǎn)和終點(diǎn)相同,半徑不同.

左上角的亮點(diǎn)就是兩個(gè)橢圓,和月牙一樣.半徑是10的模糊效果.Fill是半透明的白色.

源碼下載:三星手機(jī)電池充電效果.rar

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論