用纯C语言来实现WP8中磁贴动态翻转的功能

本文由BlueCoder编写   转载请说明出处：

http://blog.csdn.net/crocodile__/article/details/10486095

我的邮箱：bluecoder@yeah.net    欢迎大家和我交流编程心得

我的微博：BlueCoder_黎小华    欢迎光临^_^

今年年初入手了一部诺基亚新款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;

 

 

点击下载源代码以及相关资源