此间唯有是技巧完成.,那里唯有是技巧完成.

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

其一效能来自于三星(Samsung)S5的充电界面,版权归Samsung全数,那里仅仅是技巧完成.

其一效果来自于SamsungS5的充电界面,版权归三星全体,这里仅仅是技巧落成.

电池背景

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

Clip的中间,是3个Path形状.具体画法就不多说了,在此之前写过.有趣味的同窗看那里:http://www.cnblogs.com/tsliwei/p/5609035.html

图片 3

电池背景

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

Clip的中间,是二个Path形状.具体画法就不多说了,在此在此以前写过.有趣味的校友看那里:http://www.cnblogs.com/tsliwei/p/5609035.html

图片 4

意味着电量的液体效果

总体液体分两部分,下边是波浪,下边是矩形.进程值实际控制的是矩形的高度.多个控件放到StackPanel中,让上边的矩形往上顶.最后给波浪底部Margin值为-1,使其看起来没有间隙.

图片 5

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

图片 6

贝塞尔曲线有六个点,源点终点和八个控制点.(此括号里的可以不看:上图案的并不确切,因为控制点并不一定在曲线上).通过三个控制点决定曲线的路径.

鲜明上图那小编就是个波浪形.使用点动画PointAnimation控制五个点光景移动就有了波浪的动态效果.注意五个卡通时间毫无一样,否则看起来动画太假.五个时刻错开一点点就好了.

图片 7

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

图片 8

意味着电量的液体效果

整整液体分两有的,下面是波浪,上面是矩形.进度值实际控制的是矩形的中度.七个控件放到StackPanel中,让下边的矩形往上顶.末了给波浪尾部Margin值为-1,使其看起来没有间隙.

图片 9

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

图片 10

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

旗帜显明上图那作者就是个波浪形.使用点动画PointAnimation控制多少个点前后运动就有了波浪的动态效果.注意多个卡通时间毫无一样,否则看起来动画太假.五个时刻错开一点点就好了.

图片 11

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

图片 12

气泡效果

此处的气泡效果就是个典型的粒子效果,而且是最不难易行的那种,并不涉及到怎么复杂的公式计算.

简易介绍下原理:那里的气泡能够看成是圆依据一定的速度不断的上升(改变Y轴坐标).所以规定几个速率,规定2个距离,使用帧动画CompositionTarget.Rendering,在每一帧都在Y轴上加那几个速率在一帧移动的距离.然后判断又没达成规定的距离.即使达到,移除这一个圈子,否则继续上涨.

气泡可以分成多少个部分:

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

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

3.显示屏底边的小气泡,个头不大,移动速度较快,移动距离较远.

新建1个Class,用来表示气泡音讯

图片 13

里头五个根性子质,3个是速率,三个是气泡需求活动的距离.那多个属性决定了血泡的活动轨迹.第八天性子是用来判断气泡是否做到了沉重,第拾个天性是拉长八个对气泡的引用,那样便于在后台控制气泡.

概念八个汇集,用来存放在三部分的血泡音信.

在帧渲染事件内,遍历多少个集合.让集合里的逐个气泡都进化移动(Canvas.SetTop),判断气泡是还是不是曾经移动了指定的距离,是的话就在页面移除气泡,集合也移除该气泡消息.判断集合的Count是否自愧不如规定个个数,假设低于,就向页面添加气泡,集合添加气泡消息.

气泡效果

此地的血泡效果就是个典型的粒子效果,而且是最简易的这种,并不关乎到哪些复杂的公式总括.

简单介绍下原理:那里的血泡可以视作是圆依照一定的进程不断的上升(改变Y轴坐标).所以规定1个速率,规定1个相差,使用帧动画CompositionTarget.Rendering,在每一帧都在Y轴上加这一个速率在一帧移动的距离.然后判断又没达到规定的距离.若是达到,移除那一个圈子,否则继续上涨.

气泡可以分为多少个部分:

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

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

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

新建三个Class,用来代表气泡音信

图片 14

个中多少个紧要性质,二个是速率,一个是气泡需求活动的距离.那三个属性决定了血泡的移位轨迹.第一个属性是用来判定气泡是或不是成就了重任,第⑩个属性是添加1个对气泡的引用,那样有利于在后台控制气泡.

概念多个汇聚,用来存放在三局地的血泡新闻.

在帧渲染事件内,遍历三个集合.让集合里的每种气泡都向上移动(Canvas.SetTop),判断气泡是还是不是早就移动了钦定的距离,是的话就在页面移除气泡,集合也移除该气泡消息.判断集合的Count是否自愧不如规定个个数,如若低于,就向页面添加气泡,集合添加气泡音信.

画气泡

为了赏心悦目,小编要好画了个气泡的模子,用在了大气泡上.小气泡直接用的椭圆,因为即接纳模型,因为太小,也看不出来.实际上大气泡也有个别看得出来.不过既然写了,如故介绍下吧.

图片 15

第贰那一个气泡就是个View博克斯.方便缩放.

概略是个正圆,Fill给了个渐变画刷,向外不断深化,在最外面0.85-1的有个别是最深的.多少个点的Lacrosse都以20,B都以10,青古铜色部分G依次减小,分别是240,150,100.

图片 16

右上面的月牙是个帕特h,给了个半径是10的模糊效果.Fill是半晶莹剔透的浅荧光色.月牙的画法就是多个弧线,起源和终端相同,半径不一样.

图片 17

左上角的亮点就是三个椭圆,和月牙一样.半径是10的歪曲效果.Fill是半晶莹剔透的青古铜色.

 

2016-12-19更新:

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

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

画气泡

为了美观,作者自个儿画了个气泡的模型,用在了汪洋泡上.小气泡直接用的扁圆形,因为即利用模型,因为太小,也看不出来.实际上大气泡也不怎么看得出来.但是既然写了,依然介绍下吧.

图片 18

先是那个气泡就是个ViewBox.方便缩放.

大致是个正圆,Fill给了个渐变画刷,向外不断强化,在最外面0.85-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

源码下载: IPhone电池充电效果.rar

相关文章