WPF实现三星手机充电界面

先上效果图

这个效果来自于三星S5的充电界面,当然有些细节差别,主要看思路.本文目的是技术交流,不要将效果直接运用于商业产品和项目.

电池背景

因为电池内部有好几个部分,所以本例用了一个Grid来做背景,用Clip属性剪切出一个电池的轮廓,这样不仅显示出一个电池的轮廓,还可以避免水波和气泡跑显示Grid的外面.

Clip的内部,是一个Path形状.具体画法就不多说了,以前写过.有兴趣的同学看这里:http://www.cnblogs.com/tsliwei/p/5609035.html

表示电量的液体效果

整个液体分两部分,上面是波浪,下面是矩形.进度值实际控制的是矩形的高度.两个控件放到StackPanel中,让下面的矩形往上顶.最后给波浪底部Margin值为-1,使其看起来没有间隙.

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

贝塞尔曲线有4个点,起点终点和两个控制点.(此处可以不看:上图画的并不准确,因为控制点并不一定在曲线上).通过两个控制点决定曲线的路径.

显然上图这本身就是个波浪形.使用点动画PointAnimation控制两个点上下运动就有了波浪的动态效果.注意两个动画时间不要一样,否则看起来动画太假.两个时间错开一点点就好了.

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

气泡效果

这里的气泡效果就是个典型的粒子效果,而且是最简单的那种,并不涉及到什么复杂的公式计算.

简单介绍下原理:这里的气泡可以看成是圆按照一定的速度不断的上升(改变Y轴坐标).所以规定一个速率,规定一个距离,使用帧动画CompositionTarget.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

码字不易,欢迎转载,但请注明本文链接

推荐一个不错的Blend,Wpf,sl交流群

群号码:152049269

欢迎大神,萌新踊跃加入,交流探讨,共同进步!

时间: 2024-10-14 16:12:17

WPF实现三星手机充电界面的相关文章

Android5.1关机充电界面尺寸修改

Android5.1关机充电界面尺寸修改 因为项目的屏幕尺寸和一般的手机屏幕不一样,因此关机充电界面在设备上运行后严重变形,就需要自己修改这个界面了,废话不多说了,开打开打! 首先要说明这里是以Android 5.1的源码实现的,其它版本源码可能会有差异. 关机充电的界面和Android上层应用一样,是按照分辨率的不同有很多组图片的,但是和上层不同的是,在这里使用哪组图片是可以自己配置的,所以在修改之前一定要确定当前源码使用的是哪一组,否则千辛万苦修改了以后会发现,并没有什么卵用. 1.界面使用

用WPF写一个登录界面,我想在输入完密码后按回车就能够验证登陆,而不需要用鼠标单击登陆按钮

原文:用WPF写一个登录界面,我想在输入完密码后按回车就能够验证登陆,而不需要用鼠标单击登陆按钮 在wpf中,将按钮的IsDefault设置为true ???? 原文地址:https://www.cnblogs.com/lonelyxmas/p/9345580.html

使用WPF技术模拟手机界面

原文:使用WPF技术模拟手机界面 1. 前言 WPF(Windows Presentation Foundation),即"Windows呈现基础",它的目的非常明确,就是用来把数据"显示"给用户看的(说白了就是用来做UI的).接下来将会介绍一个小项目,用WPF来实现模拟手机界面设计. 2. 实现的功能 本项目模拟手机界面,实现了如下几个功能: 滑动解锁 顶部状态栏显示 查看系统时间 附有背景以及应用图标的界面及切换 点击日历图标跳转到显示日历的界面 点击锁屏图标进

WPF据说是微软界面开发的无二之选

windows以前的界面用C语言写,后来有了很多种选择了..MFC,winFrom等等.... 现在微软想要搞多平台统一了哇,win10桌面.平板.手机都是一个系统,还能应用通用. 有幸在工作中学习到wpf,在比较了玩具winFrom之后我不得不承认,wpf很厉害. 据说开发web和手机端界面的silverlight也是一种显示技术,而且是wpf的子集(mini版). 然后我就要慢慢来学习wpf了.. hello world

WPF/WinFrom的一些界面控件

DevExpressTelerikMahApps.MetroModern UI for WPFModernWPFExtended WPF Toolkit? Community EditionModern UI (Metro) Charts for Windows 8, WPF, SilverlightWPF ToolkitFluent.RibboniOpenWorksCSkin其他WPF ExtensionsWPF Themes DevExpress 功能齐全,界面美观:囊括了桌面.APP.WE

wpf 水波进度条 用户控件

之前看公司web前端做了个 圆形的水波纹 进度条,就想用wpf 做一个,奈何自己太菜 一直做不出来,在看过 “普通的地球人” 的 “ WPF实现三星手机充电界面 博客之后 我也来照葫芦画个瓢. 废话不多说 先贴一下效果图 虽然样子 low 了些 但是基本满足我的需求了,下面是代码 前端 <UserControl x:Class="WaveProgress.UserControl.WaveProgressControl" xmlns="http://schemas.mic

一个简单WPF登陆界面,包含记住密码,自动登录等功能,简洁美观

简介:这是一个自己以前用WPF设计的登陆界面,属于一个实验性的界面窗体,如果用于产品还很有不足.但也是有一点学习价值.后台代码略有复杂,但基本上都有注释 分类,略有代码经验的一般都能看懂. 登陆界面外观:可以对登陆成功的信息,进行保存.包括记住密码,自动登陆等信息,默认显示上一次登陆成功的用户信息. 登陆界面保存的登陆信息: 可以删除不必要的登陆信息 登陆界面登陆Loading状态显示界面:登陆中显示遮罩层 在1.5秒左右的时间内可以取消登录状态 源码下载: 点击下载源码

在wpf中利用异步lambda编程,模拟数据库连接,防止界面假死

参考<图解C#>第20章异步编程第五节程序,解决在wpf中连接数据库,界面假死问题. public partial class MainWindow : Window { private bool isConnected = false; public MainWindow() { InitializeComponent(); startWorkButton.Click += async (sender, e) => { SetGuiValues(false, "正在连接数据库

关于WPF的2000千事 01--WPF是什么?

WPF (Windows Presentation Foundation)是一系列能够实现非常炫丽的图形化界面运行在Windows上的客户端的DotNet类库.WPF能运行在客户端也能很好的运用在web网站上. WPF运用3D矢量图形,旨在脱离屏幕分辨率,做到根据屏幕大小自适应.WPF用DirectX进行界面绘制,如果显卡支持硬件加速时,启用硬件加速的DirectX版本,否则用软件加速DirectX版本进行渲染. WPF是用于替代WinForm的一种技术. 国外的文章:https://wpf.2