时间:2021-05-20
先上效果图
这个效果来自于三星S5的充电界面,当然有些细节差别,主要看思路.本文目的是技术交流,不要将效果直接运用于商业产品和项目.
电池背景
因为电池内部有好几个部分,所以本例用了一个Grid来做背景,用Clip属性剪切出一个电池的轮廓,这样不仅显示出一个电池的轮廓,还可以避免水波和气泡跑显示Grid的外面.
Clip的内部,是一个Path形状.具体画法就不多说了,以前写过.有兴趣的同学看这里:http://positionTarget.Rendering,在每一帧都在Y轴上加这个速率在一帧移动的距离.然后判断又没达到规定的距离.如果达到,移除这个圆圈,否则继续上升.
气泡可以分成三个部分:
1.电池内部的气泡.大小适中,移动速度最慢,移动距离最短.
2.屏幕底部的大气泡,个头比较大,移动速度较慢,移动距离较短.
3.屏幕底部的小气泡,个头最小,移动速度较快,移动距离较远.
新建一个Class,用来表示气泡信息
其中两个重要属性,一个是速率,一个是气泡需要移动的距离.这两个属性决定了气泡的运动轨迹.第三个属性是用来判断气泡是不是完成了使命,第四个属性是添加一个对气泡的引用,这样方便在后台控制气泡.
定义三个集合,用来存放三部分的气泡信息.
在帧渲染事件内,遍历三个集合.让集合里的每个气泡都向上移动(Canvas.SetTop),判断气泡是不是已经移动了指定的距离,是的话就在页面移除气泡,集合也移除该气泡信息.判断集合的Count是不是小于规定个个数,如果小于,就向页面添加气泡,集合添加气泡信息.
画气泡
为了美观,我自己画了个气泡的模型,用在了大气泡上.小气泡直接用的椭圆,因为即使用模型,因为太小,也看不出来.实际上大气泡也不怎么看得出来.不过既然写了,还是介绍下吧.画的并不是很好看.还请见谅.
首先这个气泡就是个ViewBox.方便缩放.
轮廓是个正圆,Fill给了个渐变画刷,向外不断加深,在最外圈0.85-1的部分是最深的.三个点的R都是20,B都是10,绿色部分G依次减小,分别是240,150,100.
右下边的月牙是个Path,给了个半径是10的模糊效果.Fill是半透明的白色.月牙的画法就是两个弧线,起点和终点相同,半径不同.
左上角的亮点就是两个椭圆,和月牙一样.半径是10的模糊效果.Fill是半透明的白色.
源码下载:三星手机电池充电效果.rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
三星S10所支持无线反向充电技术,可以像无线充电器一样,为通过Qi认证的设备和一些三星可穿戴设备充电。无需数据线,只需将设备放在手机顶部即可充电。 三星Gal
三星Note7内置3500mAh的电池,并支持快速充电,另外相比过去的三星手机,三星Note7在充电接口上也有一定改变。那么三星Note7用的是USBType-
反向充电的功能,也可以在我们手机充电的时候使用,我们给手机充电,手机也可以给其他的一些设备充电。那么三星s19反向充电怎么设置呢,小编来告诉大家吧。三星s10反
USB给智能手机或其他移动设备充电的一种设备. 充电无忧可兼容多种设备,三星6000mAh移动电源作为便携式移动电源,可为多种USB设备充电,例如三星智能手机
三星手机怎么设置电池百分比?通过观察手机的电池百分比,能够更方便了解到手机剩余电量情况,好提醒我们充电,下面就给大家带来三星手机电量百分比设置教程。三星手机电量