http://www.forfreezone.com

WPF实现三星手机充电界面

画气泡

为了雅观,笔者要好画了个气泡的模子,用在了多量泡上.小气泡直接用的扁圆形,因为即选用模型,因为太小,也看不出来.实际上大气泡也不怎么看得出来.不过既然写了,照旧介绍下吧.

图片 1

率先这几个气泡正是个View博克斯.方便缩放.

差不离是个正圆,Fill给了个渐变画刷,向外不断加强,在最外侧0.85-1的局地是最深的.七个点的本田CR-V都以20,B皆以10,海水绿部分G依次减小,分别是240,150,100.

图片 2

右上边的月牙是个Path,给了个半径是10的歪曲效果.Fill是半晶莹剔透的金红.月牙的画法便是七个弧线,源点和终极相像,半径分裂.

图片 3

左上角的长处便是四个椭圆,和月牙同样.半径是10的歪曲效果.Fill是半晶莹剔透的深藕红.

 

2016-12-19更新:

发布到GitHub,地址:

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

图片 4

先上效果图

GitHub地址:

电瓶背景

因为电瓶内部有有个别个部分,所以本例用了一个Grid来做背景,用Clip属性剪切出一个电瓶的大概,那样不仅仅显得出叁个电瓶的轮廓,仍可以制止水波和气泡跑展现Grid的外面.

Clip的在这之中,是多个Path形状.具体画法就十分少说了,从前写过.有意思味的校友看这里:

图片 5

其一意义来自于三星(Samsung卡塔尔(قطر‎S5的充电分界面,版权归Samsung全体,这里仅仅是工夫实现.

气泡效果

此间的气泡效果便是个卓越的粒子效果,何况是最简便的这种,并不涉及到何以复杂的公式计算.

大约介绍下原理:这里的气泡可以充任是圆依照一定的速度持续的进步(更换Y轴坐标卡塔尔国.所以规定三个速率,规定叁个相差,使用帧动漫CompositionTarget.Rendering,在每后生可畏帧都在Y轴上加这一个速率在风流罗曼蒂克帧移动的间隔.然后决断又没完毕规定的间距.假若到达,移除那些圈子,不然继续上涨.

气泡能够分成四个部分:

1.电池内部的气泡.大小适当,移动速度最慢,移动间隔最短.

2.显示器底边的大气泡,个头比一点都不小,移动速度一点也不快,移动间隔超短.

3.显示器底边的小气泡,个头矮小,移动速度异常的快,移动间隔较远.

新建多个Class,用来代表气泡音讯

图片 6

其间多个关键性质,二个是速率,一个是气泡要求活动的间隔.那七个性子决定了血泡的位移轨迹.第多个天性是用来推断气泡是还是不是做到了沉重,第几个性格是加上二个对气泡的引用,这样便于在后台调节气泡.

概念七个聚众,用来存放在三部分的血泡新闻.

在帧渲染事件内,遍历多少个集结.让会集里的各类气泡都发展移动(Canvas.SetTop卡塔尔国,决断气泡是或不是曾经移动了钦定的偏离,是的话就在页面移除气泡,会集也移除该气泡信息.推断会集的Count是或不是紧跟于规定个个数,即便低于,就向页面增加气泡,集结加多气泡消息.

代表电量的液体效果

全部液体分两片段,上面是波浪,上边是矩形.进程值实际调控的是矩形的中度.八个控件放到StackPanel中,让下边包车型客车矩形往上顶.最终给波浪尾部Margin值为-1,使其看起来未有间隙.

图片 7

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

图片 8

贝塞尔曲线有4个点,起源终点和多个调整点.(此括号里的可以不看:上画画的并不允许确,因为控制点并不一定在曲线上卡塔尔.通过七个调控点决定曲线的路线.

眼看上海体育场地那本身便是个波浪形.使用点动漫PointAnimation调整七个点光景运动就有了波浪的动态效果.注意五个卡通时间毫无相符,不然看起来动漫太假.五个时刻错开一丢丢就好了.

图片 9

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

图片 10

郑重声明:本文版权归澳门新葡8455最新网站所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。