此处仅仅是本事达成.

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

先上效果图

图片 1

其一功用来自于SamsungS5的充电分界面,版权归Samsung全体,这里仅仅是本事达成.

电瓶背景

因为电瓶内部有点个部分,所以本例用了叁个Grid来做背景,用Clip属性剪切出三个电瓶的大概,那样不仅仅突显出多个电瓶的轮廓,还足以制止水波和气泡跑展现Grid的外面.

Clip的个中,是叁个Path形状.具体画法就非常少说了,从前写过.有意思味的同室看这里:http://www.cnblogs.com/tsliwei/p/5609035.html

图片 2

意味着电量的液体效果

凡事液体分两有的,上边是波浪,上面是矩形.进度值实际调整的是矩形的中度.三个控件放到StackPanel中,让上面包车型客车矩形往上顶.最后给波浪尾巴部分Margin值为-1,使其看起来未有间隙.

图片 3

波浪是用贝塞尔曲线完成的,首先介绍下贝塞尔曲线

图片 4

贝塞尔曲线有4个点,起源终点和五个调整点.(此括号里的能够不看:上海体育场地案的并不标准,因为调整点并不一定在曲线上).通过多个调控点决定曲线的路线.

断定上海教室那自己正是个波浪形.使用点动画PointAnimation调节八个点上下移动就有了波浪的动态效果.注意多少个卡通时间不要同样,不然看起来动画太假.七个日子错开一小点就好了.

图片 5

波浪部分宽度是50,中度是5

图片 6

气泡效果

此地的气泡效果便是个规范的粒子效果,并且是最轻便易行的这种,并不涉及到何等复杂的公式计算.

简言之介绍下原理:这里的气泡能够用作是圆依照一定的速度持续的进步(退换Y轴坐标).所以规定二个速率,规定一个离开,使用帧动画CompositionTarget.Rendering,在每一帧都在Y轴上加这么些速率在一帧移动的距离.然后决断又没落成规定的距离.假如达到,移除这一个圈子,不然继续上涨.

气泡能够分为多少个部分:

1.电瓶内部的气泡.大小适当,移动速度最慢,移动距离最短.

2.显示器底边的大气泡,个头十分的大,移动速度相当的慢,移动距离十分的短.

3.荧屏底边的小气泡,个头小小的,移动速度十分的快,移动距离较远.

新建叁个Class,用来表示气泡音信

图片 7

中间三个至关心重视要性质,多个是速率,二个是气泡需求活动的距离.这两脾性子决定了血泡的移动轨迹.第八个属性是用来推断气泡是还是不是瓜熟蒂落了重任,第六本特性是加上一个对气泡的援引,那样有助于在后台调节气泡.

概念八个聚众,用来寄放在三有的的血泡音讯.

在帧渲染事件内,遍历多个会集.让集合里的每种气泡都进步移动(Canvas.SetTop),推断气泡是还是不是一度移动了点名的偏离,是的话就在页面移除气泡,集结也移除该气泡新闻.剖断集合的Count是还是不是低于规定个个数,若是低于,就向页面加多气泡,集结增多气泡音信.

画气泡

为了美貌,作者本身画了个气泡的模型,用在了汪洋泡上.小气泡直接用的扁圆形,因为即利用模型,因为太小,也看不出来.实际上海高校气泡也多少看得出来.但是既然写了,依然介绍下吧.

图片 8

第一这几个气泡正是个ViewBox.方便缩放.

差十分的少是个正圆,Fill给了个渐变画刷,向外不断加剧,在最外面0.85-1的部分是最深的.多少个点的Tiguan都以20,B都以10,土黑部分G依次减小,分别是240,150,100.

图片 9

右上面的月牙是个Path,给了个半径是10的混淆效果.Fill是半晶莹剔透的藏蓝色.月牙的画法便是八个弧线,源点和终端同样,半径分裂.

图片 10

左上角的亮点正是五个椭圆,和月牙一样.半径是10的混淆效果.Fill是半晶莹剔透的法国红.

 

2016-12-19更新:

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

源码下载: 苹果手提式有线电话机电瓶充电效果.rar

网站地图xml地图