此地只有是本事实现.

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

先上效果图

图片 1

本条意义来自于三星S5的充电分界面,版权归三星(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的有的是最深的.八个点的福睿斯都是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

相关文章