羡慕FLEX，WPF的界面效果？
现在不用羡慕了，有了clayui以及界面编辑系统，可以很方便的为界面添加互动动画效果，clayui是用纯C++编写的，可以用于任何支持C++的系统。
clayui现在支持windows，wince，android ，linux，并且提供了纯软件渲染，Directx3D，opengl es，三种渲染方式。
这次放出的clayui编辑系统，以及稍候放出的 windows-纯软件渲染 版本的开发库是完全免费的，可用于任何商业或非商业应用。
如果对clayui开发库或者编辑系统有任何问题，可以加入QQ群：174738354 来讨论，请注明：clayui。clayui编辑系统和开发库的更新也会首先在QQ群里发布。
好，不多说了，下面来体验下clayui的界面编辑系统。
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个动画对象，利用等待时间来完成连续动画。
好的，这次先介绍到这里，后面会陆续放出关于添加编辑皮肤，布局，消息响应的介绍，下次见：）
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。