您的位置:金沙手机版下载 > 金沙手机版下载 > WPF实现三星手机充电界面

WPF实现三星手机充电界面

2019-11-22 02:59

画气泡

为了美观,小编要好画了个气泡的模子,用在了大批量泡上.小气泡间接用的椭圆,因为即采纳模型,因为太小,也看不出来.实际上海大学气泡也稍稍看得出来.可是既然写了,仍然介绍下吧.

图片 1

率先那个气泡就是个ViewBox.方便缩放.

大致是个正圆,Fill给了个渐变画刷,向外不断加重,在最外面0.85-1的部分是最深的.三个点的法拉利488都以20,B都以10,铅色部分G依次减小,分别是240,150,100.

图片 2

右上面的月牙是个Path,给了个半径是10的歪曲效果.Fill是半透明的黄绿.月牙的画法正是四个弧线,源点和终极近似,半径分化.

图片 3

左上角的长处正是七个椭圆,和月牙同样.半径是10的混淆效果.Fill是半晶莹剔透的芙蓉红藤色.

 

2016-12-19更新:

发布到GitHub,地址:

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

气泡效果

那边的气泡效果便是个特出的粒子效果,而且是最简便的这种,并不涉及到何等复杂的公式总结.

总结介绍下原理:这里的气泡能够当作是圆依据一定的速度不断的上升(改换Y轴坐标).所以规定一个速率,规定三个离开,使用帧动漫CompositionTarget.Rendering,在每意气风发帧都在Y轴上加那几个速率在生龙活虎帧移动的间距.然后推断又没完毕规定的间距.假如达到,移除那些圈子,不然继续上涨.

气泡可以分为三个部分:

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

2.显示器底边的大气泡,个头超级大,移动速度超慢,移动间隔相当的短.

3.显示器底边的小气泡,个头小小的,移动速度相当的慢,移动间隔较远.

新建三个Class,用来代表气泡音信

图片 4

里头四个关键性质,两个是速率,三个是气泡要求活动的间隔.那多少个属性决定了血泡的位移轨迹.第六性子子是用来判别气泡是或不是产生了沉重,第几天性情是拉长二个对气泡的援用,那样方便在后台调节气泡.

概念七个聚众,用来存放在三有个别的气泡新闻.

在帧渲染事件内,遍历八个集结.让会集里的各类气泡都向上移动(Canvas.SetTop),判定气泡是还是不是早已移动了钦命的间距,是的话就在页面移除气泡,集结也移除该气泡音讯.决断集结的Count是或不是自愧弗如规定个个数,假使低于,就向页面加多气泡,集合加多气泡消息.

GitHub地址:

其大器晚成功能来自于三星(Samsung卡塔尔国S5的充电分界面,版权归Samsung全部,这里仅仅是技能达成.

表示电量的液体效果

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

图片 5

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

图片 6

贝塞尔曲线有4个点,起源终点和八个调整点.(此括号里的能够不看:上航海用教室案的并不正确,因为调整点并不一定在曲线上).通过七个调节点决定曲线的路径.

鲜明性上海教室那自个儿就是个波浪形.使用点动漫PointAnimation调节多个点光景移动就有了波浪的动态效果.注意五个卡通时间不要同样,不然看起来动漫太假.三个时间错开一丢丢就好了.

图片 7

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

图片 8

图片 9

电瓶背景

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

Clip的里边,是贰个Path形状.具体画法就非常的少说了,从前写过.风野趣的同班看这里:

图片 10

先上效果图

本文由金沙手机版下载发布于金沙手机版下载,转载请注明出处:WPF实现三星手机充电界面

关键词: