`

使用clayui实现具有动态切换效果的Cover Flow

 
阅读更多
预览,一共有12种效果,这里贴上其中的3种:




工程下载

使用鼠标左键拖拽,鼠标右键切换FLOW,切换的时候,我想起了正在热播的大片:变形金刚,不知道大家有没有这个感觉。

这2个星期真是忙得昏天暗地,先是帮淘奇桌面改善了一下界面,增强了用户体验,有兴趣看效果的可以到这里下载试试看。然后又有一个android的需求,于是将clayui移植到了android下,当然,android有自己的界面体系,而且已经很完善,效果也很好,基本是没必要用clayui的,这里clayui主要是用在android里的opengl es开发里,使用cayui的界面框架,利用opengl es来渲染界面,使得opengl es程序能很方便的制作界面。

好的,那么这次clayui给大家带来了Cover Flow效果,clayui使用自己的窗口体系封装了一个CLAYUI_FrameFlow类,作为一个Cover Flow的容器,使用这个容器,可以很方便的创建各种各样自定义的Cover Flow效果,另外,由于cover flow里一般是多个图片的切换,所以这次clayui里增加了一个D3D的皮肤接口,使用D3D来渲染窗口的皮肤,也就是这些图片了。

首先是初始化,在InitClayui函数里,除了常规的clayui的初始化外,关于Cover Flow的初始化如下:

//CMCFlow是一个自定义的CLAYUI_FrameFlow子类
CMCFlow* flow = new CMCFlow();
flow->Init(mainframe, g_graphics.m_draw, 0);
mainframe->AddCustomFrame(0, "flow", 0, 0, 100, 100, 100, flow);

//设置图片文件夹路径
flow->SetPath(szBuf);

//设置Cover Flow总共显示的图片个数,从-20到20,一共41张图片。
flow->SetFlowInfo(1, -20, 20);

//设置图片高宽
flow->SetFlowItemWH(g_picwidth * 2, g_picheight * 2);

//设置窗口按Z排序
flow->SetFrameFlags(CLAYUI_USE_Z_SORT, 1);

然后是设置Cover Flow里图片排列的规律,这个应该是Cover Flow里最核心的了,在ChangeFlow函数里,ChangeFlow里一共设置了12种排列方式,下面以其中一种来讲解下:

//先是清除老的排列方式

flow->ClearPrjLine();
float z = CLAYUI_Get3DZ();
float zadd = 120;

//创建一个排列方式
CLAYUI_FL_PrjLine* prjline = new CLAYUI_FL_PrjLine;

//添加坐标的排列
AddToPrjLine(prjline, -g_picwidth, cheight, z, -20, 0);
AddToPrjLine(prjline, g_picwidth + 50, cheight, z, -19, 1);
AddToPrjLine(prjline, g_picwidth + 200, 0, z - zadd * 10, -9, 0);
AddToPrjLine(prjline, cwidth, cheight, z - zadd * 19, 0, 1);
AddToPrjLine(prjline, g_picwidth + 400, cheight * 2, z - zadd * 10, 10, 0);
AddToPrjLine(prjline, cwidth * 2 - g_picwidth - 50, cheight, z, 19, 0);
AddToPrjLine(prjline, cwidth * 2 + g_picwidth, cheight, z, 20, 0);

flow->AddPrjLine_Pos(prjline);

//添加角度的排列
CLAYUI_FL_PrjLine* prjangle = new CLAYUI_FL_PrjLine;
prjangle->AddPos(0, 0, -90, -5, 0);
prjangle->AddPos(0, 0, 0, 0, 0);
prjangle->AddPos(0, 0, 90, 5, 0);

flow->AddPrjLine_Angle(prjangle);

//将Cover Flow从老的排列切换到新的排列
flow->ExcAnimation();

CLAYUI_FL_PrjLine是一个将Flow里所有子窗口从Cover Flow的坐标系映射到3D坐标系下的类,Cover Flow的坐标系是一个一维的坐标系,从负无穷到正无穷,每个子窗口之间按间距1排列,AddToPrjLine(prjline, -g_picwidth, cheight, z, -20, 0)这句表示Cover Flow坐标系下坐标为-20的子窗口在3D里坐标为(-g_picwidth, cheight, z),AddToPrjLine最后一个参数0表示这个坐标是贝塞尔曲线还是直线,如果为1(贝塞尔曲线)的话,则需提供3个点的坐标映射。这里只需要提供几个关键点的映射,其余的坐标会由插值得到。角度映射也是一样的,prjangle->AddPos(0, 0, -90, -5, 0)这句表示Cover Flow坐标系下坐标为-5的子窗口的角度为-90。

设置完Cover Flow的图片排列规律后,然后就是需要让整个Cover Flow能平滑的移动,上面已经说过了,Cover Flow只是一个一维的坐标系,所以只需要移动它的X坐标,那么整个Cover Flow就会按照排列规律自动移动了,下面的代码演示了让Cover Flow往前移动5个单位:

float x, y, z;
CMCFlow* flow = (CMCFlow*)mainframe->GetChildFrame("flow");
//得到当前坐标
flow->GetTrans(x, y, z);
//设置往前5个单位
flow->MoveTo(x + 5, y, z);

在演示里,是使用鼠标拖拽的,大家可以在消息响应函数MsgProc里看到,当接收到WM_MOUSEMOVE消息时,有如下代码:

float fx, fy, fz;
flow->GetTrans(fx, fy, fz);
fx += (x - g_oldpt.x) * 0.01;
flow->MoveTo(fx, fy, fz);

每当鼠标移动x - g_oldpt.x个像素时,Cover Flow的X坐标就前进(x - g_oldpt.x) * 0.01个单位,这样就实现拖拽了。

当Cover Flow切换时,会有一个动画切换的效果,这个的实现在CMCFlow类的ExcAnimation函数里,利用clayui的动画对象给每个子窗口加一个动画就可以了。

好了,Cover Flow的几个要点都介绍完了,大家可以试着在工程里修改,创建自己的Cover Flow。


分享到:
评论

相关推荐

    C#实现窗口切换特效源码

    C#实现窗口切换特效源码 这次clayui给大家带来了比较实用的东西,C#版目前只有13种特效,如果大家对 这个比较喜欢的话,请推荐一下,让更多的人能分享到这个,我也会继续更新添 加更多特效。 先说明一下,因为本人...

    C#窗口切换源代码

    C#实现窗口切换特效源码,作者:clayui。这次给大家带来了13种特效C#窗体切换代码,如果大家对 这个比较喜欢的话,请推荐一下,让更多的人能分享到,我也会继续更新添加更多特效。 先说明一下,因为本人对C#也不是...

    C#窗口切换特效源代码

    C#实现窗口切换特效源码,作者:clayui。这次给大家带来了13种特效C#窗体切换代码,如果大家对  这个比较喜欢的话,请推荐一下,让更多的人能分享到,我也会继续更新添加更多特效。  先说明一下,因为本人对C#也...

    C# form切换特效

    多达13种的C#窗口切换特效,希望大家能够喜欢

    仿苹果工具栏 图标倒影

    使用clayui开发的仿苹果工具栏,完美解决图标毛边(黑边),放大镜动态效果,图标倒影

    我自己封装的界面库11

    请下载最新版本^ ^ http://download.csdn.net/source/1523928 ------------------------------------------------------------------------------------------ 好吧,让MFC见鬼去吧~~

Global site tag (gtag.js) - Google Analytics