WPF完结苹果手提式无线电话机充电分界面葡萄娱乐官方

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

先上效果图

葡萄娱乐官方 1

这么些功效来自于SamsungS5的充电分界面,版权归三星(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的一部分是最深的.多个点的奥迪Q7都以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