WPF仿三星手機(jī)充電界面實(shí)現(xiàn)代碼
先上效果圖
這個效果來自于三星S5的充電界面,當(dāng)然有些細(xì)節(jié)差別,主要看思路.本文目的是技術(shù)交流,不要將效果直接運(yùn)用于商業(yè)產(chǎn)品和項(xiàng)目.
電池背景
因?yàn)殡姵貎?nèi)部有好幾個部分,所以本例用了一個Grid來做背景,用Clip屬性剪切出一個電池的輪廓,這樣不僅顯示出一個電池的輪廓,還可以避免水波和氣泡跑顯示Grid的外面.
Clip的內(nèi)部,是一個Path形狀.具體畫法就不多說了,以前寫過.有興趣的同學(xué)看這里:http://www.cnblogs.com/tsliwei/p/5609035.html
表示電量的液體效果
整個液體分兩部分,上面是波浪,下面是矩形.進(jìn)度值實(shí)際控制的是矩形的高度.兩個控件放到StackPanel中,讓下面的矩形往上頂.最后給波浪底部Margin值為-1,使其看起來沒有間隙.
波浪是用貝塞爾曲線實(shí)現(xiàn)的,首先介紹下貝塞爾曲線
貝塞爾曲線有4個點(diǎn),起點(diǎn)終點(diǎn)和兩個控制點(diǎn).(此括號里的可以不看:上圖畫的并不準(zhǔn)確,因?yàn)榭刂泣c(diǎn)并不一定在曲線上).通過兩個控制點(diǎn)決定曲線的路徑.
顯然上圖這本身就是個波浪形.使用點(diǎn)動畫PointAnimation控制兩個點(diǎn)上下運(yùn)動就有了波浪的動態(tài)效果.注意兩個動畫時間不要一樣,否則看起來動畫太假.兩個時間錯開一點(diǎn)點(diǎn)就好了.
波浪部分寬度是50,高度是5
氣泡效果
這里的氣泡效果就是個典型的粒子效果,而且是最簡單的那種,并不涉及到什么復(fù)雜的公式計算.
簡單介紹下原理:這里的氣泡可以看成是圓按照一定的速度不斷的上升(改變Y軸坐標(biāo)).所以規(guī)定一個速率,規(guī)定一個距離,使用幀動畫CompositionTarget.Rendering,在每一幀都在Y軸上加這個速率在一幀移動的距離.然后判斷又沒達(dá)到規(guī)定的距離.如果達(dá)到,移除這個圓圈,否則繼續(xù)上升.
氣泡可以分成三個部分:
1.電池內(nèi)部的氣泡.大小適中,移動速度最慢,移動距離最短.
2.屏幕底部的大氣泡,個頭比較大,移動速度較慢,移動距離較短.
3.屏幕底部的小氣泡,個頭最小,移動速度較快,移動距離較遠(yuǎn).
新建一個Class,用來表示氣泡信息
其中兩個重要屬性,一個是速率,一個是氣泡需要移動的距離.這兩個屬性決定了氣泡的運(yùn)動軌跡.第三個屬性是用來判斷氣泡是不是完成了使命,第四個屬性是添加一個對氣泡的引用,這樣方便在后臺控制氣泡.
定義三個集合,用來存放三部分的氣泡信息.
在幀渲染事件內(nèi),遍歷三個集合.讓集合里的每個氣泡都向上移動(Canvas.SetTop),判斷氣泡是不是已經(jīng)移動了指定的距離,是的話就在頁面移除氣泡,集合也移除該氣泡信息.判斷集合的Count是不是小于規(guī)定個個數(shù),如果小于,就向頁面添加氣泡,集合添加氣泡信息.
畫氣泡
為了美觀,我自己畫了個氣泡的模型,用在了大氣泡上.小氣泡直接用的橢圓,因?yàn)榧词褂媚P?因?yàn)樘?也看不出來.實(shí)際上大氣泡也不怎么看得出來.不過既然寫了,還是介紹下吧.畫的并不是很好看.還請見諒.
首先這個氣泡就是個ViewBox.方便縮放.
輪廓是個正圓,Fill給了個漸變畫刷,向外不斷加深,在最外圈0.85-1的部分是最深的.三個點(diǎn)的R都是20,B都是10,綠色部分G依次減小,分別是240,150,100.
右下邊的月牙是個Path,給了個半徑是10的模糊效果.Fill是半透明的白色.月牙的畫法就是兩個弧線,起點(diǎn)和終點(diǎn)相同,半徑不同.
左上角的亮點(diǎn)就是兩個橢圓,和月牙一樣.半徑是10的模糊效果.Fill是半透明的白色.
源碼下載:三星手機(jī)電池充電效果.rar
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
C#的通用DbHelper類(支持?jǐn)?shù)據(jù)連接池)示例詳解
這篇文章主要介紹了C#的通用DbHelper類支持?jǐn)?shù)據(jù)連接池,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03C#實(shí)現(xiàn)漢字轉(zhuǎn)拼音或轉(zhuǎn)拼音首字母的方法
這篇文章主要介紹了C#實(shí)現(xiàn)漢字轉(zhuǎn)拼音或轉(zhuǎn)拼音首字母的方法,涉及C#操作數(shù)組、遍歷及正則匹配的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07C#實(shí)現(xiàn)的文件操作封裝類完整實(shí)例【刪除,移動,復(fù)制,重命名】
這篇文章主要介紹了C#實(shí)現(xiàn)的文件操作封裝類,結(jié)合完整實(shí)例形式分析了C#封裝文件的刪除,移動,復(fù)制,重命名等操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03結(jié)合.net框架在C#派生類中觸發(fā)基類事件及實(shí)現(xiàn)接口事件
這篇文章主要介紹了結(jié)合.net框架在C#派生類中觸發(fā)基類事件及實(shí)現(xiàn)接口事件,示例的事件編程中包括接口和類的繼承等面向?qū)ο蟮幕A(chǔ)知識,需要的朋友可以參考下2016-02-02基于C#調(diào)用c++Dll結(jié)構(gòu)體數(shù)組指針的問題詳解
下面小編就為大家分享一篇基于C#調(diào)用c++Dll結(jié)構(gòu)體數(shù)組指針的問題詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12解析c#操作excel后關(guān)閉excel.exe的方法
C#和Asp.net下excel進(jìn)程一被打開,有時就無法關(guān)閉,尤其是website.對關(guān)閉該進(jìn)程有過GC、release等方法,但這些方法并不是在所有情況下均適用2013-07-07