使用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。