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

爱博体育,先上效果图

先上效果图

爱博体育 1

爱博体育 2

那些效果来自于SamsungS5的充电界面,版权归Samsung全数,那里仅仅是技能落成.

其一职能来自于三星(Samsung)S5的充电分界面,版权归Samsung全数,这里唯有是本事达成.

电池背景

因为电池内部有几许个部分,所以本例用了一个Grid来做背景,用Clip属性剪切出三个电池的概况,那样不光显示出一个电池的概略,还足以免止水波和气泡跑呈现Grid的外面.

Clip的中间,是二个帕特h形状.具体画法就不多说了,从前写过.风乐趣的同学看那里:http://www.cnblogs.com/tsliwei/p/5609035.html

爱博体育 3

电池背景

因为电池内部有好几个部分,所以本例用了1个Grid来做背景,用Clip属性剪切出三个电池的概略,那样不仅显得出3个电池的概况,还足以幸免水波和气泡跑突显Grid的外面.

Clip的当中,是三个Path形状.具体画法就不多说了,从前写过.有意思味的同学看那里:http://www.cnblogs.com/tsliwei/p/5609035.html

爱博体育 4

代表电量的液体效果

整整液体分两片段,上边是波浪,上边是矩形.进度值实际调整的是矩形的高度.多少个控件放到StackPanel中,让上面包车型地铁矩形往上顶.最后给波浪头部Margin值为-一,使其看起来未有间隙.

爱博体育 5

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

爱博体育 6

贝塞尔曲线有5个点,源点终点和七个调节点.(此括号里的能够不看:上画画的并不标准,因为调节点并不一定在曲线上).通过四个调控点决定曲线的路线.

强烈上海体育场合那小编正是个波浪形.使用点动画PointAnimation调节三个点上下移动就有了波浪的动态效果.注意多个卡通时间毫无同样,不然看起来动画太假.四个时辰错开一丢丢就好了.

爱博体育 7

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

爱博体育 8

代表电量的液体效果

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

爱博体育 9

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

爱博体育 10

贝塞尔曲线有5个点,起源终点和七个调控点.(此括号里的能够不看:上画画的并不可靠赖,因为调整点并不一定在曲线上).通过多少个调节点决定曲线的路线.

领悟上图那本人正是个波浪形.使用点动画PointAnimation调整七个点前后运动就有了波浪的动态效果.注意四个卡通时间毫无同样,不然看起来动画太假.多个小时错开一丢丢就好了.

爱博体育 11

波浪部分宽度是50,高度是伍

爱博体育 12

气泡效果

此地的气泡效果正是个标准的粒子效果,而且是最简易的那种,并不涉及到何以复杂的公式总计.

简介下原理:那里的血泡能够看成是圆根据一定的快慢不断的进步(改动Y轴坐标).所以规定二个速率,规定三个相差,使用帧动画CompositionTarget.Rendering,在每一帧都在Y轴上加这几个速率在一帧移动的距离.然后判别又没达到规定的距离.纵然达到,移除这些圈子,不然继续上升.

气泡能够分为七个部分:

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

2.显示屏底边的大气泡,个头一点都一点都不小,移动速度极慢,移动距离相当的短.

三.荧屏底边的小气泡,个头相当的小,移动速度非常的慢,移动距离较远.

新建3个Class,用来代表气泡消息

爱博体育 13

内部三个不可缺少性质,1个是速率,1个是气泡要求活动的距离.那三个属性决定了血泡的移位轨迹.第多个性情是用来决断气泡是还是不是产生了沉重,第多个特性是增进1个对气泡的引用,那样方便在后台调整气泡.

概念三个汇集,用来存放叁片段的血泡音讯.

在帧渲染事件内,遍历四个集合.让群集里的各种气泡都发展移动(Canvas.SetTop),推断气泡是否现已移动了点名的相距,是的话就在页面移除气泡,集结也移除该气泡消息.决断集合的Count是否小于规定个个数,假如低于,就向页面增添气泡,群集增加气泡音信.

气泡效果

此处的血泡效果正是个标准的粒子效果,而且是最简易的那种,并不关乎到怎么复杂的公式总结.

简单易行介绍下原理:那里的气泡能够当作是圆依据一定的快慢不断的回升(改造Y轴坐标).所以规定四个速率,规定2个离开,使用帧动画CompositionTarget.Rendering,在每1帧都在Y轴上加这几个速率在一帧移动的距离.然后判定又没达到规定的标准规定的距离.如若达到,移除这几个圈子,不然继续上涨.

气泡能够分成三个部分:

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

2.荧屏底边的大气泡,个头一点都不小,移动速度异常慢,移动距离很短.

三.显示器底边的小气泡,个头矮小,移动速度比较快,移动距离较远.

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

爱博体育 14

个中七个重要性质,四个是速率,二个是气泡需求活动的距离.那八个个性决定了血泡的活动轨迹.第柒个属性是用来判断气泡是否做到了重任,第肆个属性是增多1个对气泡的引用,那样便于在后台调整气泡.

概念多个聚众,用来存放在叁有些的气泡音信.

在帧渲染事件内,遍历多个群集.让集结里的种种气泡都发展移动(Canvas.SetTop),推断气泡是还是不是已经移动了点名的距离,是的话就在页面移除气泡,集结也移除该气泡音讯.决断集合的Count是否低于规定个个数,假若低于,就向页面增添气泡,集结增加气泡消息.

画气泡

为了美丽,笔者自身画了个气泡的模型,用在了多量泡上.小气泡直接用的椭圆,因为即采纳模型,因为太小,也看不出来.实际上海大学气泡也稍微看得出来.可是既然写了,依旧介绍下吧.

爱博体育 15

首先那几个气泡正是个View博克斯.方便缩放.

大致是个正圆,Fill给了个渐变画刷,向外不断强化,在最外面0.捌五-1的壹部分是最深的.多个点的Evoque都是20,B都是10,海水绿部分G依次减小,分别是240,150,拾0.

爱博体育 16

右下面的月牙是个Path,给了个半径是10的模糊效果.Fill是半透明的北京蓝.月牙的画法就是两个弧线,起点和终极同样,半径分歧.

爱博体育 17

左上角的独到之处正是四个椭圆,和月牙相同.半径是十的混淆效果.Fill是半透明的灰色.

 

2016-12-19更新:

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

源码下载: 三星手提式有线电话机电池充电效果.rar

画气泡

为了美貌,作者要好画了个气泡的模子,用在了汪洋泡上.小气泡直接用的椭圆,因为即利用模型,因为太小,也看不出来.实际上大气泡也不怎么看得出来.可是既然写了,依旧介绍下吧.

爱博体育 18

率先那一个气泡正是个ViewBox.方便缩放.

大致是个正圆,Fill给了个渐变画刷,向外不断深化,在最外面0.八伍-一的1部分是最深的.多少个点的智跑都以20,B都以10,海水绿部分G依次减小,分别是240,150,100.

爱博体育 19

右上面的月牙是个Path,给了个半径是10的混淆效果.Fill是半晶莹剔透的原野绿.月牙的画法便是四个弧线,源点和终极一样,半径不一样.

爱博体育 20

左上角的独到之处就是多少个椭圆,和月牙同样.半径是10的歪曲效果.Fill是半透明的银白.

 

2016-12-19更新:

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

源码下载: 三星手提式有线电话机电池充电效果.rar

相关文章