WPF实现三星手机充电界面

作者: 手机游戏下载网站  发布:2019-10-10

GitHub地址:

先上效果图

手机游戏下载网站 1

其一功用来自于三星S5的充电分界面,版权归Samsung全数,这里独有是本领完成.

电瓶背景

因为电瓶内部有好几个部分,所以本例用了三个Grid来做背景,用Clip属性剪切出八个电瓶的概略,那样不但显示出一个电瓶的轮廓,还足以幸免水波和气泡跑展现Grid的外面.

Clip的中间,是二个Path形状.具体画法就没多少说了,此前写过.风乐趣的同校看这里:

手机游戏下载网站 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的有个别是最深的.几个点的福特Explorer都以20,B都是10,蓝绿部分G依次减小,分别是240,150,100.

手机游戏下载网站 9

右上边的月牙是个Path,给了个半径是10的混淆效果.Fill是半晶莹剔透的浅豆沙色.月牙的画法正是多个弧线,源点和终端同样,半径分裂.

手机游戏下载网站 10

左上角的独到之处正是四个椭圆,和月牙同样.半径是10的模糊效果.Fill是半晶莹剔透的青灰.

 

2016-12-19更新:

发布到GitHub,地址:

源码下载: 苹果手提式无线电话机电瓶充电效果.rar

本文由银河网站登录发布于手机游戏下载网站,转载请注明出处:WPF实现三星手机充电界面

关键词:

上一篇:都有哪些功能
下一篇:没有了