WPF实现三星手机充电界面

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

先上效果图

图片 1

本条功能来自于三星S5的充电界面,版权归三星所有,这里唯有是技巧实现.

电池背景

因为电池内部有好多少个部分,所以本例用了一个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的局部是最深的.多少个点的R都是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

发表评论

电子邮件地址不会被公开。 必填项已用*标注