此只有是技巧实现.这里只是技术实现.

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

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

先上效益图

先期上功能图

365体育网投 1

365体育网投 2

这个效果来于三星球S5的充电界面,版权归三星所有,这里只有是技巧实现.

斯作用来于三星星S5的充电界面,版权归三星所有,这里仅是技巧实现.

电池背景

盖电池里发生一些独片,所以本例用了一个Grid来开背景,用Clip属性剪切出一个电池的概况,这样不但显示出一个电池的大概,还可以避水波和气泡跑显示Grid的外面.

Clip的中,是一个Path形状.具体画法就非多说了,以前写过.有趣味之同班圈这里:http://www.cnblogs.com/tsliwei/p/5609035.html

365体育网投 3

电池背景

因为电池里发生某些个组成部分,所以本例用了一个Grid来做背景,用Clip属性剪切出一个电池的概貌,这样不仅显得有一个电池的大概,还好免水波和气泡跑显示Grid的外面.

Clip的内,是一个Path形状.具体画法就无多说了,以前写过.有趣味之同窗看这里:http://www.cnblogs.com/tsliwei/p/5609035.html

365体育网投 4

意味着电量的液体效果

全方位液体分点儿部分,上面是波浪,下面是矩形.进度值实际控制的凡矩形的高度.两独控件放到StackPanel中,让脚的矩形往上顶.最后让波浪底部Margin值为-1,使该拘禁起没有间隙.

365体育网投 5

浪是用贝塞尔曲线实现之,首先介绍下贝塞尔曲线

365体育网投 6

贝塞尔曲线有4只点,起点终点和少数独控制点.(此括号里的可无看:上画画的连无标准,因为控制点并不一定在曲线上).通过简单只控制点决定曲线的路径.

明白达到图立即本身即是只波浪形.使用点动画PointAnimation控制两个点前后运动即生出矣波浪的动态效果.注意少单卡通时间不要同,否则扣起动画最假.两独时间去一点点不怕吓了.

365体育网投 7

浪部分宽是50,高度是5

365体育网投 8

表示电量的液体效果

万事液体分点儿局部,上面是波浪,下面是矩形.进度值实际控制的凡矩形的高度.两独控件放到StackPanel中,让脚的矩形往上顶.最后给波浪底部Margin值为-1,使该拘禁起没有间隙.

365体育网投 9

浪是用贝塞尔曲线实现之,首先介绍下贝塞尔曲线

365体育网投 10

贝塞尔曲线有4只点,起点终点和少数独操点.(此括号里的得免看:上画的连无标准,因为控制点并不一定在曲线上).通过简单独控制点决定曲线的里程径.

众目睽睽达到图这本身即是独波浪形.使用点动画PointAnimation控制两个点前后运动虽有了波浪的动态效果.注意少单卡通时间不要同,否则扣起动画最假.两独时刻去一点点虽好了.

365体育网投 11

浪部分宽是50,高度是5

365体育网投 12

气泡效果

此地的血泡效果就是个典型的粒子效果,而且是最最简易的那种,并无关乎到什么复杂的公式计算.

简短介绍下原理:这里的气泡可以视作是健全按照一定之速不断的升高(改变Y轴坐标).所以规定一个速率,规定一个离开,使用帧动画CompositionTarget.Rendering,在列一样幅都以Y轴上加斯速率在同等帧移动的距离.然后判断又从不达成规定之距离.如果达到,移除这个圈子,否则继续上升.

气泡可以分为三单部分:

1.电池里的气泡.大小适宜,移动速度极其缓慢,移动距离太短.

2.屏幕底边的大气泡,个头比较深,移动速度比较缓慢,移动距离较短.

3.屏幕底边的小气泡,个头最小,移动速度比较快,移动距离较远.

新建一个Class,用来表示气泡信息

365体育网投 13

内有数只至关重要性质,一个凡速率,一个凡气泡需要走的距离.这点儿单特性决定了血泡的移动轨迹.第三只属性是故来判断气泡是勿是成功了沉重,第四个属性是添加一个针对气泡的援,这样好于后台控制气泡.

概念三独集聚,用来存放在三组成部分的血泡信息.

在帧渲染事件外,遍历三个集聚合.让集合里的每个气泡都提高走(Canvas.SetTop),判断气泡是匪是一度走了点名的离,是的口舌就是以页面移除气泡,集合也移除该气泡信息.判断集合的Count是休是仅次于规定个个数,如果低于,就向页面上加气泡,集合添加气泡信息.

气泡效果

此间的血泡效果就算是独独立的粒子效果,而且是无比简单易行的那种,并无涉及到什么复杂的公式计算.

简短介绍下原理:这里的血泡可以视作是两全按照一定的速度持续的升高(改变Y轴坐标).所以规定一个速率,规定一个相距,使用帧动画CompositionTarget.Rendering,在每一样幅都当Y轴上加以斯速率在同一轴移动的距离.然后判断又不曾达到规定的距离.如果达到,移除这个圈子,否则继续上升.

气泡可以分成三独组成部分:

1.电池里的气泡.大小适宜,移动速度最好缓慢,移动距离最短.

2.屏幕底边的大气泡,个头比较老,移动速度较迟缓,移动距离比短.

3.屏幕底边的小气泡,个头最小,移动速度较快,移动距离比远.

新建一个Class,用来代表气泡信息

365体育网投 14

其间有数单第一性质,一个是速率,一个凡是气泡需要活动的距离.这点儿个属性决定了血泡的移动轨迹.第三单特性是因此来判定气泡是未是到位了重任,第四独特性是添加一个针对性气泡的援,这样方便在后台控制气泡.

概念三只集,用来存放三片段的气泡信息.

在帧渲染事件外,遍历三独集合.让集合里的每个气泡都向上移动(Canvas.SetTop),判断气泡是匪是一度倒了指定的去,是的语句就以页面移除气泡,集合也移除该气泡信息.判断集合的Count是勿是仅次于规定个个数,如果低于,就往页面上加气泡,集合添加气泡信息.

画气泡

以美观,我自己画了单气泡的型,用当了大气泡上.小气泡直接用底椭圆,因为就是以模型,因为极度小,也看不出来.实际上大气泡也粗看得出来.不过既然写了,还是介绍下吧.

365体育网投 15

首先这个气泡便是单ViewBox.方便缩放.

轮廓是个正圆,Fill给了只渐变画刷,向外不断深化,在无比外侧0.85-1的一对是最充分的.老三个点之R都是20,B都是10,绿色部分G依次减多少,分别是240,150,100.

365体育网投 16

右下的月牙是单Path,给了只半径是10之模糊效果.Fill是半透明的白色.月牙的画法就是零星个弧线,起点和极相同,半径不同.

365体育网投 17

左上角的优点就是是有限个椭圆,和月牙一样.半径是10之歪曲效果.Fill是半透明的白色.

 

2016-12-19更新:

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

源码365体育网投下载: 三星手机电池充电效果.rar

画气泡

为美丽,我要好画了只气泡的模子,用在了汪洋泡上.小气泡直接用的扁圆形,因为尽管祭模型,因为太小,也看不出来.实际上大气泡也有点看得出来.不过既然写了,还是介绍下吧.

365体育网投 18

先是这气泡便是单ViewBox.方便缩放.

大概是独正圆,Fill给了个渐变画刷,向他不断加剧,在极端外0.85-1之片段是极老的.叔独点的R都是20,B都是10,绿色部分G依次减多少,分别是240,150,100.

365体育网投 19

右边下的月牙是个Path,给了个半径是10底歪曲效果.Fill是半晶莹剔透底白色.月牙的画法就是个别独弧线,起点与终端相同,半径不同.

365体育网投 20

左上角的长处就是是有限独椭圆,和月牙一样.半径是10的混淆效果.Fill是半透明的白色.

 

2016-12-19更新:

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

源码下载: 三星手机电池充电效果.rar

相关文章