clayui界面库系列教程之七：窗口的三维变换效果

预览：
      
      

       工程下载

       3D界面的工程为：CLAYUIEXP3，执行程序为：CLAYUIEXP3.exe

       例子里使用的字体是微软雅黑，如果你的机器上没有这个字体，那么所有的文字将不会被显示。三维变换现在暂不支持点阵字体的显示，所以这里使用了雅黑字体。

       这次进行3D界面展示的例子由以前的仿讯雷界面工程修改而来，下面我会以这个工程为例讲解如何使用clayui实现三维变换。

       好的，那么这次clayui的版本更新到0.1.0.5了，修改了一些BUG，增加了一个比较大的功能：所有窗口都支持3维变换了。

       首先介绍下clayui里的3维坐标系

       clayui的三维坐标系与D3D是差不多的，都是Z轴从屏幕向外，但clayui为了与窗口坐标系保持一致，也为了让同学们不为坐标转换而头疼，就让Y轴垂直向下了，并让绘图区域左上角的坐标是（0, 0, z), 然后把摄像机的up向量定为(0, -1, 0)，eye定在(0, 0, -1)这个平面上，那么，现在只需要设置eye的x，y，与绘图区的z值，就可以确定整个clayui三维系统的投影变换了。

       使用CLAYUI_Set3DLookat(float x, float y, float z)这个函数来设置eye的x, y，与绘图区的Z值

       使用CLAYUI_Get3DZ()来得到绘图区的Z值

       关于三维方面，就介绍到这里了，可能说得比较简单，不过这足够了，即使你没看懂，也没关系，因为clayui的三维系统是一个简化的三维系统，在下面的讲解里，你会看到，实现例子里的效果，是很简单的。
      
       好，现在来看一下例子里的三维变换，主窗口有一个水平翻转与垂直翻转的动画，这个动画属于旋转动画，所以，当然就要用到CLAYUI_ROTATE_ANIM这个类了。
       在MFC主对话框的OnInitDialog函数里
      
       ......

       m_bframe->AddCustomFrame(0, "exp3", 0, 0, 500, 400, 100, exp3frame);

       ......

       exp3frame->SetIs3D(1);                        //设置exp3frame支持窗口3D变换                
       exp3frame->MoveTo(100, 100, 1 * CLAYUI_Get3DZ());  

      
       提示：如果你设置了一个窗口支持窗口3D变换后，如果想让这个窗口与2维时保持一致，就将Z设为CLAYUI_Get3DZ()

       然后设置exp3frame的变换中心为窗口的中心点

       exp3frame->SetOri(250 << 16, 200 << 16, 0);

       接下来，为exp3frame加一个旋转动画就行了：

       CLAYUI_ROTATE_ANIM* rotate = new CLAYUI_ROTATE_ANIM();

       rotate->Init(0, 0, 0, 0, 180, 0, 600, m_bframe);
       rotate->SetTarget(exp3frame);
       rotate->SetIdname("rot0");
       m_bframe->AddAnimation(rotate);
       rotate->SetMoveType(CLAYUI_MOVETYPE::CLAYUI_MOVE_Linear,
            CLAYUI_MOVETYPE::CLAYUI_MOVE_EASEOUT);
       rotate->Play();

       因为是绕着Y轴旋转，所以设置yanglefrom为180，yangleto为0，这样就让窗口绕着Y轴从180度转到0度，形成一个水平翻转的动画，垂直翻转的动画就是绕着X轴旋转了，大家可以试着修改下看看效果。

       然后是属性窗口有一个3D盒的翻转效果。

       首先在CEXP3FRAME的LoadFromMem里，将xlframe设置为支持3D变换，并将变换中心设置到3D盒子的中心，3D盒的中心其实就是xlframe的中心点沿Z轴向里平移一段距离（xlframe本身宽度的一半）

       xlframe->SetIs3D(1);
       xlframe->SetOri((353 / 2) << 16,  (327 / 2) << 16, -(353 / 2) << 16);

       要达到3D盒翻转的效果，需要将当前窗口沿着变换中心的Y轴向里旋转90度，并把要显示的窗口沿变换中心从90度旋转到0度，首先是当前窗口：

       在“//销毁前一个xlframe”注释的下面，加上一个旋转动画：

      

      

 1             CLAYUI_ROTATE_ANIM *  rotate1  =  (CLAYUI_ROTATE_ANIM * )GetAnimation( " dier0 " );
 2               if (rotate1)
 3              {
 4                  rotate1 -> End();
 5                  rotate1 -> SetTarget(frame);
 6                  rotate1 -> Init( 0 ,  0 ,  0 ,  0 ,  0 ,  - 90 ,  1000 ,  this );
 7              }
 8               else
 9              {
10                  rotate1  =   new  CLAYUI_ROTATE_ANIM();
11                  rotate1 -> Init( 0 ,  0 ,  0 ,  0 ,  0 ,  - 90 ,  1000 ,  this );
12                  rotate1 -> SetTarget(frame);
13                  rotate1 -> SetIdname( " dier0 " );
14                  AddAnimation(rotate1);
15              }
16              rotate1 -> SetMoveType(CLAYUI_MOVETYPE::CLAYUI_MOVE_Sinusoidal, 
17                      CLAYUI_MOVETYPE::CLAYUI_MOVE_EASEOUT);
18              rotate1 -> SetFinishDelete( 1 );
19              rotate1 -> Play();

 
         这个旋转动画将窗口沿Y轴从0旋转到-90度。
     
         由于当前窗口在动画播放完之后需要被销毁，所以给旋转动画加上一个需要销毁的标志：rotate1->SetFinishDelete(1);，这样，让动画播放完之后，窗口就自动被销毁了。

         然后在创建新的属性窗口这里“if(file.Open(m_exepath + framename, CFile::modeRead))”下面，加上如下代码：

 1                 CLAYUI_ROTATE_ANIM *  rotate  =  (CLAYUI_ROTATE_ANIM * )GetAnimation( " r0 " );
 2                   if (rotate)
 3                  {
 4                      rotate -> SetTarget(xlframe);
 5                      rotate -> End();
 6                      rotate -> Init( 0 ,  0 ,  0 ,  0 ,  90 , 0 ,  1000 ,  this );
 7                  }
 8                   else
 9                  {
10                      rotate  =   new  CLAYUI_ROTATE_ANIM();
11                      rotate -> Init( 0 ,  0 ,  0 ,  0 ,  90 , 0 ,  1000 ,  this );
12                      rotate -> SetTarget(xlframe);
13                      rotate -> SetIdname( " r0 " );
14                      AddAnimation(rotate);
15                      
16                  }
17                  rotate -> SetMoveType(CLAYUI_MOVETYPE::CLAYUI_MOVE_Sinusoidal, 
18                          CLAYUI_MOVETYPE::CLAYUI_MOVE_EASEOUT);
19                  rotate -> Play();

         这个旋转动画将窗口从90度旋转到0度
        
         这样，就实现了例子里的3维变换效果了，是不是很简单呢。

         关于clayui里的3维变换，今天就简单介绍到这里了，以后会带给大家更多好看华丽的界面效果，请大家继续关注。