`
yangyou230
  • 浏览: 1639616 次
文章分类
社区版块
存档分类

我就是要做UI

 
阅读更多
其实,我只是想做一个UI,一个大家都能用,而且用得很开心的UI......我们,自己的UI......

以下是广告词,没办法,俗是俗了点,但总得有个
羡慕FLEX,WPF的界面效果?

现在不用羡慕了,有了clayui以及界面编辑系统,可以很方便的为界面添加互动动画效果,clayui是用纯C++编写的,可以用于任何支持C++的系统。

clayui现在支持windows,wince,android ,linux,并且提供了纯软件渲染,Directx3D,opengl es,三种渲染方式。

这次放出的clayui编辑系统,以及windows-纯软件渲染 版本的开发库是完全免费的,可用于任何商业或非商业应用。


如果对clayui开发库或者编辑系统有任何问题,或者想讨论UI技术的,可以加入:174738354 来讨论,请注明:clayui。clayui编辑系统和开发库的更新也会首先在里发布。


以下为教程,介绍了编辑系统的基本操作,以及展示如何制作一个山寨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. 添加消息响应函数,对各种界面消息进行处理

先看一下最终效果:


下面开始一步一步进行讲解,上一篇已经介绍过的操作这里就只简单说下要点:


1. 首先,打开clayui界面设计器,点皮肤库标签,打开皮肤文件:皮肤.cncskin;点布局库标签,打开布局文件:布局001.cnclayoutedit

2. 点击添加,添加一个窗体,取名为:testwin,

然后选中刚创建的testwin,点击控件标签,再点击勾选框,为testwin添加一个子窗体,

选中勾选框,在左侧的属性栏里将标识修改为:back,

将属性栏往下拉,找到“是否使用布局”,勾上,然后将布局名选为“flexwin",

此时,back有了一个”flexwin"的布局,现在可以在窗体设计区,调整back的高宽,使back与testwin完全重合,如下图:


确保back是选中的情况下,可以在属性栏的最下面,修改“文字”以及“水平对齐”属性,来调整标题文字。

在属性栏里找到“对齐方式”属性,将对齐方式修改为“中心对齐”,然后将“冻结”打勾,此时,back将不能被选中,只能选中testwin,而当你调整"testwin"的大小时,会发现back的尺寸会随着"testwin"的改变而改变,这就是“中心对齐”的效果。其他的对齐效果,大家可以自己操作体会一下。效果如下图:


3. 点击控件标签,选中testwin,添加2个文本,

1个下拉框,修改标识为“年龄”

1个编辑框,修改标识为“姓名”

2个勾选框,分别修改标识为“确定”,“取消”,排列如下:


编辑框的布局选择editbox,下拉框的布局选择combox,勾选框布局选择check1

选中文本后,可以直接键盘输入文字,

为了让文字的效果更好,可以给文字添加阴影:先选中文本,在左侧的属性栏里找到滤镜,选择“阴影”,目前只有阴影这一个滤镜,半径设为4,最大为5,x,y偏移设为4,刚开始阴影是透明的,需要点一下颜色,出现颜色修改滚动条,调节a,也就是透明度,为125%,颜色参数可以依照自己的喜好设置,如下图:


另外利用阴影滤镜还可以达到文字描边的效果,如下图:


4. 现在为界面添加一个互动动画效果,选中testwin,或者testwin的任何一个子窗口,然后点击动画层标签,可以看到动画层里只有有一个INIT,并且处于选中状态,

这里说明一下,在clayui里,动画都需要有一个消息来触发,而每个窗体创建时,都会自动生成一个动画层,也就是INIT,意思就是初始化完毕后会触发的动画,在第一篇教程里,我们的动画都是创建在初始化的动画层里,所以测试的时候,窗体创建完毕就会立即播放动画。

好的,那么,现在我们为确定按钮添加一个鼠标滑进,鼠标滑出的动画,

首先还是确保testwin以及其任何一个子窗体处于选中状态,然后在动画层标签里,选择“触发消息”为:onmousein,“消息类型”为:子FRAME消息,参数不填,“目标窗体”选为:确定,然后点“增加”,此时可以看到动画层里增加了一栏:onmousein%确定,同样为“确定”按钮添加一个onmouseout消息,如下图:


动画层其实也可以看做是一个关键桢,现在可以点击刚创建的动画层,会发现窗体编辑区里发生了变化:窗体编辑区里除了testwin之外,其他子窗体都没有了,这是因为我们只是创建一个“空白关键桢”而已。

好的,现在我们来构思下动画:当鼠标入”确定“按钮时,让按钮有一个放大的动画效果,而当鼠标滑出时,让按钮有一个缩小的动画效果。

还是点击动画层里的INIT,切换回INIT层,在窗体编辑区里选中”确定“按钮,在”添加到动画层“下边的下拉框里选择onmousein%确定,然后点击”添加到动画层“,再在下拉框里选择 onmouseout%确定,然后点击”添加到动画层“,现在,点击动画层列表里的onmousein%确定onmouseout%确定,会发现窗体编辑区的testwin里出现了确定按钮,如下图:


现在动画层里选中 onmousein%确定 ,然后在窗体编辑区里选中“确定”按钮,按住shift 拖出一个动画对象,选中动画对象,在属性栏里将x缩放系数,y缩放系数修改为1.2,1.2,持续时间改为2000,缩放缓动方式改为弹性,并将忽略位移,忽略旋转,忽略颜色打上勾,如下图:


现在点一下测试看一下,将鼠标移动到“确定”按钮上,“确定”按钮会有一个弹性的放大动画,这样,界面就有了那么一点交互的感觉了。

下面再加上鼠标滑出的动画,在动画层里选中 onmouseout%确定,然后在窗体编辑区里选中“确定”按钮,按住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载入了皮肤,布局文件,接在路径名后面的参数是皮肤和布局的名称,名称可以在编辑器里看到,如下图:

m_rootwin里设置了绘图区的大小,为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) ,代码如下:

这时候可以点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)函数

好的,那么前面是从CLAYUI_BFRAME派生了一个CTestWin,并作为了主窗口,所以为CTestWin添加一个UserAction(CLAYUI_MSGINFO *msginfo, int x, int y, DWORD msg)函数,如下


代码很简单,可以看出是响应了LCLICK消息,

CLAYUI_FRAME* frame = msginfo->GetFrame(this); 这句是得到消息的来源窗口,然后利用窗口的标识来判断是哪个子窗口发来的消息,这里判断是否是“取消”按钮发送的消息,如果是,就结束整个程序。

然后,我们用代码来为testwin加上一个初始动画,演示下使用代码来创建动画效果。先为CTestWin重载LoadFromMem(BYTE *filebuffer, DWORD filesize, BOOL isMemMgr)函数,如下:


当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的各种功能。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics