今年年初入手了一部诺基亚新款WP8手机——Lumia 620 经典蓝,用起来感觉很不错,很流畅、界面很清新
到现在,用了大概有大半年时间了,一直很好奇WP8中磁贴动态翻转的实现算法——使用过WP8手机的朋友都知道,这个功能很有3D的效果,看起来感觉很不错
但是,它到底是如何实现的呢?
今儿,我就来和大家一起剖析一下它的实现细节
WP8中磁贴动态翻转功能细节:
(1)将当前图标逐渐缩小(这个缩小的倍率很讲究)
(2)当前图标缩小到一定程度——基本上看不太清楚的时候——就变换另外一张图标
(3)将另外一张图标逐渐放大,直至和原图标大小一致为止
(4)停顿一会儿,继续(1)、(2)、(3)的操作
由此,可见这个看似有3D效果的磁贴翻转功能也就是使用2D技术实现的——毕竟是在一个平面上——但是这个过程比较快,人的肉眼有记忆推迟特点,因此看起来很连贯,就像是将一张图360°翻转过来一样(其实和看视频的原理差不多)
使用过WP8手机的朋友应该都知道"天气通"这个应用吧,它可以产生磁贴放到WP8手机桌面中,并能实现翻转功能,我也就借用这个应用的图标来模拟
下面来看看,我模拟的程序的实现效果:
怎么样,还不错吧?呵呵^_^
…………
功能细节大家知道了,可是我们如何用win32纯c语言来实现呢?
OK,我的对策是"对症下药":
<1>首先必须实现缩放位图的功能,这个可以使用StretchBlt这个方法(熟悉Win32的应该知道这个函数吧),它可以按照指定的大小来缩放这个位图
<2>其次,所谓"逐渐缩放"、"停顿一会儿"——当然第一时间想到的就是计时器和Sleep这个函数来实现
使用到的技术主要就是这两个,下面着重讲解一下具体的代码细节:
<1>变量浏览
//全局变量(用来控制每一次缩放的大小,注意:只是缩放位图的高度、宽度不变)
int height[] = {144, 88, 32, 10, 75, 137, 200};
//回调函数中的静态局部变量
static HBITMAP hBmp[2]; //存放正反面位图句柄
static SIZE sBmp, sClient; //位图大小、客户区大小(用于缩放)
static POINT ptBmp; //位图位置(保证始终居中显示)
static int curIndex, isFirst; //当前索引(height数组)、是否为正面(用于交换位图)
<2>WndProc中的实现细节:
case WM_CREATE:
//加载位图
hInstance = ((LPCREATESTRUCT)lParam)->hInstance;
hBmp[0] = LoadBitmap(hInstance, MAKEINTRESOURCE(IDB_BITMAP1));
hBmp[1] = LoadBitmap(hInstance, MAKEINTRESOURCE(IDB_BITMAP2));
GetObject(hBmp[0], sizeof(BITMAP), &bmp);
sBmp.cx = bmp.bmWidth;
sBmp.cy = bmp.bmHeight;
//设置计时器
SetTimer(hwnd, ID_TIMER, 120, NULL);
return 0;
case WM_SIZE:
//获取客户区大小
sClient.cx = LOWORD(lParam);
sClient.cy = HIWORD(lParam);
//修改位图当前位置坐标
ptBmp.x = (sClient.cx - sBmp.cx) / 2;
ptBmp.y = (sClient.cy - sBmp.cy) / 2;
return 0;
case WM_PAINT:
//按照一定比例缩放位图
hdc = BeginPaint(hwnd, &ps);
hdcMem = CreateCompatibleDC(hdc);
SelectObject(hdcMem, hBmp[isFirst]);
SetStretchBltMode(hdc, COLORONCOLOR);
StretchBlt(hdc, ptBmp.x, ptBmp.y, sBmp.cx, sBmp.cy, hdcMem, 0, 0, 200, 200, SRCCOPY);
DeleteDC(hdcMem);
EndPaint(hwnd, &ps);
return 0;
case WM_TIMER:
//修改当前显示的位图高度
sBmp.cy = height[curIndex];
//如果位图高度变为最小(也就是几乎看不太清的程序),就交换位图
if(sBmp.cy == height[3])
{
isFirst = !(isFirst & 1);
}
//如果位图高度之前是原始大小,那么应该停顿一会儿,这里停顿当前线程1秒
else if(sBmp.cy == height[0])
{
Sleep(1000);
}
//修改位图显示位置,保证居中显示
ptBmp.y = (sClient.cy - sBmp.cy) / 2;
//索引下一个高度(height)
curIndex = (curIndex + 1) % NUM;
//重绘
InvalidateRect(hwnd, NULL, TRUE);
return 0;
转载请说明出处:
http://blog.csdn.net/crocodile__/article/details/10486095
点击下载源代码以及相关资源
分享到:
相关推荐
本资源包含源代码、位图资源、可执行程序 程序用C语言实现了WP8中磁贴动态翻转的功能 主要用于我的博文的资源下载,博文地址: http://blog.csdn.net/crocodile__/article/details/10486095
WP8动态磁贴示例源码 功能介绍: windows phone 8动态磁贴,实现flip, ironic, cycle三种磁贴的动态创建 对研究windowsphone8的很有帮助。
WP8动态磁贴示例源码,可以用来学习和参考。
一款非常实用的动态仿win8磁贴效果 , 仿win8上下翻页的效果
android win8动态磁贴源码 android win8 动态磁贴 源码 安卓 metro 风格动态磁铁源码. AndroidMetro.apk 请 先安装测试.
基于jquery的动画技术,效果类是win8界面的动态磁贴。
自定义imageview 实现点击磁铁效果,
简单实现,适合学习借鉴 /* *使用方法 * 原理: * 1.一个磁贴(Tile)包含多个磁贴项目(TileItem) * 2.TileItem其实封装的图片和坐标 * 3.当调用Tile的构造方法时就会启动计时(间隔时间后开始滚动图片) *...
Android仿WIN8磁贴效果.rar
易语言win8磁贴源码,win8磁贴
模仿win8磁贴效果很炫的菜单界面 点击其中一个菜单 其余菜单飞走
仿win8磁贴 Android源码,效果很赞
Android 按钮点击WIN8 磁贴效果.zip
易语言win8磁贴源码例程程序结合易语言OPenGL支持库,调用易语言模块OPenGL扩展模块.ec模仿实现win8磁贴效果。 点评:易语言win8磁贴源码是易语言OPenGL支持库的应用例程。
Android例子源码WIN8系统 磁贴点击下沉倾斜效果源码,超炫!
仿win8磁贴响应式图片展示html5模板_黑色 灰色 仿win8 仿windows8 metro界面 磁贴 动画 导航 个性 仿win8磁贴响应式图片展示html5模板_黑色 灰色 仿win8 仿windows8 metro界面 磁贴 动画 导航 个性
win8磁贴设计旅游网wap站模板_酒店预定 旅游 wap 手机 仿win8 磁贴 商城_html网站模板_网页源码移.rar
适用于初学者,简单介绍如何将磁贴固定到开始桌面上,简单学习磁贴固定
win8磁贴格子图片展示html5模板,多种风格模板,全套模板,DIV CSS布局,包含主页、作品集、博客、关于我们、联系等网站模板页面。
win8磁贴设计旅游网wap站模板_酒店预定 旅游 wap 手机 仿win8 磁贴 商城.zipwin8磁贴设计旅游网wap站模板_酒店预定 旅游 wap 手机 仿win8 磁贴 商城.zip