先上效果图
这个效果来自于三星S5的充电界面,当然有些细节差别,主要看思路.本文目的是技术交流,不要将效果直接运用于商业产品和项目.
电池背景
因为电池内部有好几个部分,所以本例用了一个Grid来做背景,用Clip属性剪切出一个电池的轮廓,这样不仅显示出一个电池的轮廓,还可以避免水波和气泡跑显示Grid的外面.
Clip的内部,是一个Path形状.具体画法就不多说了,以前写过.有兴趣的同学看这里:http://www.easck.com/tsliwei/p/5609035.html
表示电量的液体效果
整个液体分两部分,上面是波浪,下面是矩形.进度值实际控制的是矩形的高度.两个控件放到StackPanel中,让下面的矩形往上顶.最后给波浪底部Margin值为-1,使其看起来没有间隙.
波浪是用贝塞尔曲线实现的,首先介绍下贝塞尔曲线
贝塞尔曲线有4个点,起点终点和两个控制点.(此括号里的可以不看:上图画的并不准确,因为控制点并不一定在曲线上).通过两个控制点决定曲线的路径.
显然上图这本身就是个波浪形.使用点动画PointAnimation控制两个点上下运动就有了波浪的动态效果.注意两个动画时间不要一样,否则看起来动画太假.两个时间错开一点点就好了.
波浪部分宽度是50,高度是5
气泡效果
这里的气泡效果就是个典型的粒子效果,而且是最简单的那种,并不涉及到什么复杂的公式计算.
简单介绍下原理:这里的气泡可以看成是圆按照一定的速度不断的上升(改变Y轴坐标).所以规定一个速率,规定一个距离,使用帧动画CompositionTarget.Rendering,在每一帧都在Y轴上加这个速率在一帧移动的距离.然后判断又没达到规定的距离.如果达到,移除这个圆圈,否则继续上升.
气泡可以分成三个部分:
