以下是广告词，没办法，俗是俗了点，但总得有个
羡慕FLEX，WPF的界面效果？
现在不用羡慕了，有了clayui以及界面编辑系统，可以很方便的为界面添加互动动画效果，clayui是用纯C++编写的，可以用于任何支持C++的系统。
clayui现在支持windows，wince，android ，linux，并且提供了纯软件渲染，Directx3D，opengl es，三种渲染方式。
这次放出的clayui编辑系统，以及windows-纯软件渲染 版本的开发库是完全免费的，可用于任何商业或非商业应用。
如果对clayui开发库或者编辑系统有任何问题，或者想讨论UI技术的，可以加入QQ群：174738354 来讨论，请注明：clayui。clayui编辑系统和开发库的更新也会首先在QQ群里发布。
以下为教程，介绍了编辑系统的基本操作，以及展示如何制作一个山寨flex的界面，并将其导入到一个MFC的对话框工程里。
排版很渣，请大家将就，实在是排版苦手，哪位大哥能介绍个排版利器orz
好，不多说了，直奔主题吧，内容比较多，也比较枯燥，但是效果是很棒的。
1. 首先启动 clayui界面设计器 ，点击皮肤库标签，在皮肤栏里点击“打开”，载入 “皮肤.cncskin”，如下图：
2. 然后点击布局库标签栏，在布局栏里点击“打开”，载入 “布局.cnclayoutedit” ，如下图：
3. 点击“窗体设计”，如下图：
4. 点击“清空并打开”，载入 “2D动画”文件夹下的 “1.平移.cncwork”，如下图：
5. 准备工作完毕，现在点击“测试”按钮，如果一切顺利的话，将会看到如下图所示的场景：
这是一个平移动画的演示，可以点击下方的“线性”，“平方”等按钮观看动画效果。
clayui编辑器目录里有“2D动画”，“3D动画”，“基本控件”，“遮罩特效”4个目录，里面都是一些基本的例子，可以重复第4-5步来打开并测试每个例子。
接下来介绍一下编辑系统的基本操作
1. 启动编辑器，载入皮肤与布局后，点击左上角的添加按钮，如下图，添加一个窗体：
2. 现在在窗体设计标签下的编辑区，会有一个红色方框，以及一些小方框，如下图：
可以使用鼠标左键来拖动这个窗体，如果左边的标签栏是属性，就可以看到在拖动过程中，X，Y属性是在不断变化的
上图里的1-9数字边的小方框都是拖拽点，其中1，3，6，8是改变窗体的高宽，5，7是缩放，4是旋转。
使用鼠标右键可以拖动编辑区，滚轴缩放编辑区。
3. 新创建的窗体是空的，什么都没有，现在我们为这个窗体添加一个皮肤，点击“皮肤库”标签，如下图：
先确保编辑区的窗体处于选中状态，图形列表选择“rect.swf"，下面的下拉框里再选”rectfill"，将是否绑定皮肤大小勾上，然后点击“添加皮肤到当前窗口”，如果操作正确，就可以看到编辑区的窗体上已经添加了一个皮肤。
这里提示一下，由于编辑区可以存在多个窗体，所以在进行参数编辑之前，一定要选中一个窗体，作为当前编辑窗体。
4. 为刚创建的窗体添加子窗口，点击“控件”标签，如下图所示：
同前面一样，确保编辑区窗体处于选中状态，然后点击控件栏里的”勾选框“，可以看到编辑区的窗体里出现了一个小方框，这个就是一个勾选框控件，同样也是处 于”裸体“状态中......，如果添加错了，可以选中子窗体，点键盘上的"delete"按键删除掉。
5. 为刚创建的勾选框添加一个布局，让它成为真正的”勾选框“，先选中刚创建的”勾选框“子窗体，点击属性标签，如下图：
将属性列表往下拖，直到出现上图里的”是否使用布局“，勾选上这个，然后在布局名列表里选择"check1"，这时，可以看到编辑区里勾选框的样子变成了一个”按钮“，”按钮“？为什么不是”勾选框“呢？
在clayui里，布局就相当于是窗体的衣服，你可以给一个“勾选框”换上editbox，combox等其他的衣服，但特定的控件，只有在特定的布局下 才能发挥其功能，如果一个勾选框上穿的是combox的衣服，那它是变不成一个combox的。只有穿上符合勾选框特定条件的布局，才能发挥勾选框的功 能，关于布局的细节，会在后面慢慢介绍。
在这里因为勾选框本身就是一个按钮，所以它穿上”按钮“的衣服，就能发挥按钮的作用，当然，你也可以在布局名里选择”check2"，这是一个勾选框的布局，这时，它就成为一个真正的“勾选框”了。
可以点击“测试”，试试效果。
6. 修改窗体属性，在左边属性标签栏里，可以修改当前选中的窗体的各种信息，需要注意的是，直接在编辑框里输入数值后，不会立即生效，需要点一下属性标签栏其他的地方，让编辑框失去焦点后，才会生效果。
修改窗体颜色是在透明度一栏里，点击后，出现滚动条，可以实时调节颜色，如下图：
按钮，勾选框，文本，编辑框，单选框这几个控件上的文字属性，在属性栏的最下方调整，如下图：
文字颜色受到窗体颜色的影响，如上图，文字本来是黑色的，但是窗体的色调变了，文字颜色也会随之改变。
7. 接下来介绍一下动画的创建方式，选中刚创建的勾选框，按住键盘上的shift键，然后拖动勾选框，会拖出来一个蓝色方框包裹的勾选框，松开shift键，此时，左边的属性栏会切换成动画属性，如下图：
这时，可以点“测试”看下效果，可以看到勾选框有一个很快的平移动画，并且移动到了蓝色方框所在位置，可以随意调整下蓝色方框的坐标，然后“测试”看效果。
蓝色方框是一个动画对象，代表动画结束时勾选框的状态，选中动画对象后，左侧属性栏里的x，y坐标，缩放系数，透明度，Z旋转角度即代表动画结束时的窗体的基本状态。
将属性栏往下拖，可以设置各种缓动效果，如下图：
有时候可能只想缩放或者旋转，不想要位移，这时可以将忽略位移勾上，这时就不会发生平移动画了。
8：连续动画。如果有同学用过FLASH的，可能会觉得这里的动画对象就相当于FLASH里的关键桢，但FLASH里可以建立多个关键桢，来达到连续的动画效果，当然，clayui里也支持。
还是接着刚才的，使用shift拖出3个动画对象，如下图：
然后选中第一个动画对象，将持续时间修改为2000，选中第二个动画对象，将动画标识修改为 frame0ai1 ,并将持续时间修改为2000，等待时间修改为2000，选中第三个动画对象，将动画标识修改为 frame0ai2 ,并将持续时间修改为2000，等待时间修改为4000，如下图：
可以看到，clayui是用3个动画对象，利用等待时间来完成连续动画。
下面介绍利用clayui制作界面的整个工作流程，包含以下内容：
1. 使用clayui编辑系统制作一个简单的界面，
2. 添加鼠标消息响应，并制作对应的互动动画效果
3. 输出界面文件，皮肤文件，布局文件
4. 建立一个MFC的对话框工程，使用clayui开发库里提供的函数导入界面文件，皮肤与布局，并将界面显示在MFC的对话框里
5. 添加消息响应函数，对各种界面消息进行处理
先看一下最终效果：
下面开始一步一步进行讲解，上一篇已经介绍过的操作这里就只简单说下要点：
皮肤.cncskin；点布局库标签，打开布局文件：布局001.cnclayoutedit
2. 点击添加，添加一个窗体，取名为：testwin，
然后选中刚创建的testwin，点击控件标签，再点击勾选框，为testwin添加一个子窗体，
勾选框，在左侧的属性栏里将标识修改为：back，
将属性栏往下拉，找到“是否使用布局”，勾上，然后将布局名选为“flexwin"，
此时，back有了一个”flexwin"的布局，现在可以在窗体设计区，调整back的高宽，使back与testwin完全重合，如下图：
确保back是选中的情况下，可以在属性栏的最下面，修改“文字”以及“水平对齐”属性，来调整标题文字。
在属性栏里找到“对齐方式”属性，将对齐方式修改为“中心对齐”，然后将“冻结”打勾，此时，back将不能被选中，只能选中testwin，而当你调整"testwin"的大小时，会发现back的尺寸会随着"testwin"的改变而改变，这就是“中心对齐”的效果。其他的对齐效果，大家可以自己操作体会一下。效果如下图：
3. 点击控件标签，选中testwin，添加2个文本，
1个下拉框，修改标识为“年龄”
修改标识为“姓名”
修改标识为“确定”，“取消”，排列如下：
编辑框的布局选择editbox，下拉框的布局选择combox，勾选框布局选择check1
选中文本后，可以直接键盘输入文字，
为了让文字的效果更好，可以给文字添加阴影：先选中文本，在左侧的属性栏里找到滤镜，选择“阴影”，目前只有阴影这一个滤镜，半径设为4，最大为5，x，y偏移设为4，刚开始阴影是透明的，需要点一下颜色，出现颜色修改滚动条，调节a，也就是透明度，为125%，颜色参数可以依照自己的喜好设置，如下图：
另外利用阴影滤镜还可以达到文字描边的效果，如下图：
4. 现在为界面添加一个互动动画效果，选中testwin，或者testwin的任何一个子窗口，然后点击动画层标签，可以看到动画层里只有有一个INIT，并且处于选中状态，
在clayui里，动画都需要有一个消息来触发，而每个窗体创建时，都会自动生成一个动画层，也就是INIT，意思就是初始化完毕后会触发的动画，在第一篇教程里，我们的动画都是创建在初始化的动画层里，所以测试的时候，窗体创建完毕就会立即播放动画。
好的，那么，现在我们为确定按钮添加一个鼠标滑进，鼠标滑出的动画，
选择“触发消息”为：onmousein，“消息类型”为：子FRAME消息，参数不填，“目标窗体”选为：确定，然后点“增加”，此时可以看到动画层里增加了一栏：onmousein%确定，同样为“确定”按钮添加一个onmouseout消息，如下图：
动画层其实也可以看做是一个关键桢，现在可以点击刚创建的动画层，会发现窗体编辑区里发生了变化：窗体编辑区里除了testwin之外，其他子窗体都没有了，这是因为我们只是创建一个“空白关键桢”而已。
滑入”确定“按钮时，让按钮有一个放大的动画效果，而当鼠标滑出时，让按钮有一个缩小的动画效果。
”添加到动画层“，再在下拉框里选择 onm ouseout%确定，然后点击”添加到动画层“，现在，点击动画层列表里的onmousein%确定，onmouseout%确定，会发现窗体编辑区的testwin里出现了确定按钮，如下图：
现在动画层里选中 onm ousein%确定 ，然后在窗体编辑区里选中“确定”按钮，按住shift 拖出一个动画对象，选中动画对象，在属性栏里将x缩放系数，y缩放系数修改为1.2，1.2，持续时间改为2000，缩放缓动方式改为弹性，并将忽略位移，忽略旋转，忽略颜色打上勾，如下图：
现在点一下测试看一下，将鼠标移动到“确定”按钮上，“确定”按钮会有一个弹性的放大动画，这样，界面就有了那么一点交互的感觉了。
然后在窗体编辑区里选中“确定”按钮，按住shift 拖出一个动画对象，选中动画对象，在属性栏里将x缩放系数，y缩放系数修改为1，1，持续时间改为2000，缩放缓动方式改为弹性，并将忽略位移，忽略旋转，忽略颜色打上勾
现在可以再点测试，将鼠标移动到“确定”按钮上，然后再移出，“确定”按钮会有一个放大缩小的交互动画效果，界面变得更加动感了。
此时可以保存下testwin窗体，保存的时候会出现一个选择框，选择要保存的窗体，由于现在只有testwin一个窗体，直接点OK，然后点保存就可以了，如下图：
按照相同的方式，可以为取消也添加一个这样的动画效果。
下面再实现一个点击“确定”后的动画效果：点击确定后，窗体上的控件都以动画方式分散开，并且渐渐变得透明。
先选中testwin，然后将动画层里的 “触发消息“ 选为LCLICK（左键点击消息），”消息类型“选为”子FRAME消息“，”目标窗体“选为 确定 ，点”增加“，动画层会增加一个 LCLICK%确定 的动画层，
选中动画层里的INIT，切换到INIT层，然后在窗体编辑区选中”姓名“，将”添加到动画层“下的下拉框选为”LCLICK%确定“，然后点”添加到动画层“，将”姓名“添加到 LCLICK%确定 这个动画层，依次将”年龄“，编辑框，下拉框，确定，取消，都添加到 LCLICK%确定 动画层，然后分别为子窗体添加动画对象，将动画对象的alpha值修改0%，并修改等待时间为别为：0，100，200，300，400，500，按照以下方式排列，如下图：
现在可以点测试，点确定按钮，如果参数无误的话，将会看到所有控件依次向左飞出，并渐渐消失。
5. 将做好的窗体，皮肤，布局输出成clayui可以读取的资源文件
点输出，然后选择testwin，OK后填写文件名与后缀，这里对文件名与后缀没有硬性规定，可以随便写，我这里就输出成testwin.ci文件，如下图：
输出皮肤文件：点皮肤库标签，点”导出皮肤“，保存文件名填写fui1.cncskinex，如下图：
输出布局文件：点布局库标签，点”导出布局库“，保存成 fui1.cnclayout，如下图：
操作无误的话，最后会得到testwin.ci，fui1.cncskinex，fui1.cnclayout，这三个文件
下面介绍如何在VC里使用clayui导入界面，并显示：
1. 新建一个MFC对话框工程，工程名为：Clayui_demo1，在工程里加入clayui的include和lib路径，将clayui_ext文件夹复制到工程目录，并将clayui_ext目录下的所有文件添加到工程里
clayui_ext下的类和函数是一些辅助类与函数，帮助你快速创建初始化clayui，以及减少一些代码量
为工程添加RTTI支持，并选择Debug MultiThreaded DLL（debug模式），或者MultiThreaded DLL（ Release模式），如下图：
在stdafx里加上：#include "clayui_ext/config_clayui.h"
LINK里添加：clayui_D.lib imm32.lib
2. 在CClayui_demo1Dlg里添加如下变量：
CClayuiManager负责clayui的初始化，以及销毁
CClayuiRootWin负责管理clayui的窗口，绘图区，消息循环
3. 在CClayui_demo1Dlg::OnInitDialog()里添加如下代码：
这里可以看到，m_clayuimgr载入了皮肤，布局文件，接在路径名后面的参数是皮肤和布局的名称，名称可以在编辑器里看到，如下图：
里设置了绘图区的大小，为800，600，后面的islayeredwindow如果设为1，会将当前的MFC窗口变成一个layeredwindow，效果会更好
注意：设成layeredwindow时，需要将MFC的对话框的Border设为NONE，如下图：
后面的看代码就很明白了，先创建一个clayui的窗口，然后载入我们刚做好的testwin.ci界面文件，然后将窗口指针传给m_rootwin.
CTestWin是一个派生自CLAYUI_BFRAME的自定义类。
4. 为CClayui_demo1Dlg添加一个WM_TIMER消息处理函数，并重载PreTranslateMessage(MSG* pMsg) ，代码如下：
void CClayui_demo1Dlg::OnTimer(UINT nIDEvent)
{
// TODO: Add your message handler code here and/or call default
m_rootwin.Step(GetSafeHwnd());
CDialog::OnTimer(nIDEvent);
}
BOOL CClayui_demo1Dlg::PreTranslateMessage(MSG* pMsg)
{
// TODO: Add your specialized code here and/or call the base class
m_rootwin.HandleMessage(this, pMsg->message, pMsg->lParam, pMsg->wParam);
return CDialog::PreTranslateMessage(pMsg);
}这时候可以点f5来运行一下程序，别忘记将clayui_d.dll，clayui.dll，testwin.ci，fui1.cnclayout，fui1.cncskinex与执行程序放到一个目录，如果没有意外的话，将会出现刚才做好的界面，将鼠标移动到“确定”按钮上试试，并点击“确定”按钮试试，是不是有动感效果呢？
5. 添加消息处理函数，clayui的消息处理函数与MFC类似，在MFC里是重载PreTranslateMessage函数，那么在clayui里则是重载UserAction(CLAYUI_MSGINFO *msginfo, int x, int y, DWORD msg)函数
UserAction(CLAYUI_MSGINFO *msginfo, int x, int y, DWORD msg)函数，如下
void CTestWin::UserAction(CLAYUI_MSGINFO *msginfo, int x, int y, DWORD msg)
{
if(msg == CLAYUI_LCLICK)
{
CLAYUI_FRAME* frame = msginfo->GetFrame(this);
if(FrameNamecmp(frame, "取消"))
{
CClayui_demo1Dlg* dlg = (CClayui_demo1Dlg*)AfxGetApp()->m_pMainWnd;
dlg->m_rootwin.m_isquit = TRUE;
PostQuitMessage(0);
}
}
}代码很简单，可以看出是响应了LCLICK消息，
CLAYUI_FRAME* frame = msginfo->GetFrame(this); 这句是得到消息的来源窗口，然后利用窗口的标识来判断是哪个子窗口发来的消息，这里判断是否是“取消”按钮发送的消息，如果是，就结束整个程序。
然后，我们用代码来为testwin加上一个初始动画，演示下使用代码来创建动画效果。先为CTestWin重载LoadFromMem(BYTE *filebuffer, DWORD filesize, BOOL isMemMgr)函数，如下：
void CTestWin::LoadFromMem(BYTE *filebuffer, DWORD filesize, BOOL isMemMgr)
{
CLAYUI_BFRAME::LoadFromMem(filebuffer, filesize, isMemMgr);
AlphaTo(0);
ScaleTo(0, 0, 1);
SetScaleAnimation("twscale", this, 1000, 0, 1, 1, this, 0);
SetAlphaAnimation("twalpha", this, 1000, 0, 100, this, 0);
}当CTestWin加载完布局后，会调用LoadFromMem函数
LoadFromMem函数里，先将窗口的透明值设为0，x，y缩放系数设为0，然后为CTestWin添加缩放动画与alpha动画，让CTestWin有一个渐显，放大的动态效果。
在config_clayui.h里还有其他的SetXXXAnimation系列的函数，这里说明一下里面的参数：
CLAYUI_BFRAME* parent：这个是指动画对象创建以后，会放到哪个窗口里管理，如果parent被销毁了，动画对象也会被销毁。
CLAYUI_FRAME* target：目标窗口，这里注意一下，parent和target可以是2个毫不相干的窗口，parent只是管理动画，而目标窗口是发生动画的窗口。
short isdie：动画播放完毕后，是否销毁目标窗口
short isendmsg：动画播放完毕后，是否发送一个动画播放完毕的消息CLAYUIMSG_ANIMATIONEND给target的父窗口，这里再说明下，target的父窗口是target->GetParent()，与传给动画的parent参数没有任何关系。
short loopmode：动画的循环方式：0-只播放一次，1-循环，2-定格在最后一桢
好的，这次就讲解到这里了，下次会继续介绍clayui的各种功能。