WPF實現三星手機充電界面

GitHub地址:https://github.com/ptddqr/wpf-samsung-phone-s5-charging-ui/tree/master

先上效果圖

這個效果來自於三星S5的充電界面,版權歸三星全部,這裏僅僅是技術實現.

電池背景

由於電池內部有好幾個部分,因此本例用了一個Grid來作背景,用Clip屬性剪切出一個電池的輪廓,這樣不只顯示出一個電池的輪廓,還能夠避免水波和睦泡跑顯示Grid的外面.

Clip的內部,是一個Path形狀.具體畫法就很少說了,之前寫過.有興趣的同窗看這裏:http://www.cnblogs.com/tsliwei/p/5609035.html

表示電量的液體效果

整個液體分兩部分,上面是波浪,下面是矩形.進度值實際控制的是矩形的高度.兩個控件放到StackPanel中,讓下面的矩形往上頂.最後給波浪底部Margin值爲-1,使其看起來沒有間隙.

波浪是用貝塞爾曲線實現的,首先介紹下貝塞爾曲線

貝塞爾曲線有4個點,起點終點和兩個控制點.(此括號裏的能夠不看:上圖畫的並不許確,由於控制點並不必定在曲線上).經過兩個控制點決定曲線的路徑.

顯然上圖這自己就是個波浪形.使用點動畫PointAnimation控制兩個點上下運動就有了波浪的動態效果.注意兩個動畫時間不要同樣,不然看起來動畫太假.兩個時間錯開一點點就行了.

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

氣泡效果

這裏的氣泡效果就是個典型的粒子效果,並且是最簡單的那種,並不涉及到什麼複雜的公式計算.

簡單介紹下原理:這裏的氣泡能夠當作是圓按照必定的速度不斷的上升(改變Y軸座標).因此規定一個速率,規定一個距離,使用幀動畫CompositionTarget.Rendering,在每一幀都在Y軸上加這個速率在一幀移動的距離.而後判斷又沒達到規定的距離.若是達到,移除這個圓圈,不然繼續上升.

氣泡能夠分紅三個部分:

1.電池內部的氣泡.大小適中,移動速度最慢,移動距離最短.

2.屏幕底部的大氣泡,個頭比較大,移動速度較慢,移動距離較短.

3.屏幕底部的小氣泡,個頭最小,移動速度較快,移動距離較遠.

新建一個Class,用來表示氣泡信息

其中兩個重要屬性,一個是速率,一個是氣泡須要移動的距離.這兩個屬性決定了氣泡的運動軌跡.第三個屬性是用來判斷氣泡是否是完成了使命,第四個屬性是添加一個對氣泡的引用,這樣方便在後臺控制氣泡.

定義三個集合,用來存放三部分的氣泡信息.

在幀渲染事件內,遍歷三個集合.讓集合裏的每一個氣泡都向上移動(Canvas.SetTop),判斷氣泡是否是已經移動了指定的距離,是的話就在頁面移除氣泡,集合也移除該氣泡信息.判斷集合的Count是否是小於規定個個數,若是小於,就向頁面添加氣泡,集合添加氣泡信息.

畫氣泡

爲了美觀,我本身畫了個氣泡的模型,用在了大氣泡上.小氣泡直接用的橢圓,由於即便用模型,由於過小,也看不出來.實際上大氣泡也不怎麼看得出來.不過既然寫了,仍是介紹下吧.

首先這個氣泡就是個ViewBox.方便縮放.

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

右下邊的月牙是個Path,給了個半徑是10的模糊效果.Fill是半透明的白色.月牙的畫法就是兩個弧線,起點和終點相同,半徑不一樣.

左上角的亮點就是兩個橢圓,和月牙同樣.半徑是10的模糊效果.Fill是半透明的白色.

 

2016-12-19更新:

發佈到GitHub,地址:https://github.com/ptddqr/wpf-samsung-phone-s5-charging-ui/tree/master

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