《计算机图形学课程设计报告.pdf》由会员分享,可在线阅读,更多相关《计算机图形学课程设计报告.pdf(20页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、 计算机图形学课程设计报告 组 号:第 七 组 小组成员:宋 洁 邵 海 军 谷 文 海 冯 新 科 学 院:资源环境学院 专业班级:地 科 14-2 指导老师:向 *目录 1 实习目的.错误!未定义书签。2 课程设计题目.错误!未定义书签。题目要求及内容.错误!未定义书签。要求.错误!未定义书签。内容分析.错误!未定义书签。实习原理.错误!未定义书签。人机交互.错误!未定义书签。动画.错误!未定义书签。几何变换.错误!未定义书签。二维几何图形变换.错误!未定义书签。三维几何图形变换:.错误!未定义书签。3 主要流程图.错误!未定义书签。三维图形处理流程图.错误!未定义书签。二维几何画板流程图
2、.错误!未定义书签。4 主要源程序.错误!未定义书签。主要源程序.错误!未定义书签。键盘事件函数.错误!未定义书签。菜单.错误!未定义书签。创建菜单函数.错误!未定义书签。光照函数.错误!未定义书签。几何变换事件.错误!未定义书签。旋转事件.错误!未定义书签。移动事件.错误!未定义书签。放大事件.错误!未定义书签。缩小事件.错误!未定义书签。5 问题讨论.错误!未定义书签。1 实习目的 课程设计是信息与计算科学专业集中实践性环节之一,是学习完计算机图形学课程后进行的一次全面的综合练习。其目的是:(1)要达到理论与实际应用相结合,使学生能够根据数据对象的特性,学会数据组织的方法,能把现实世界中的
3、实际问题在计算机内部表示出来,并培养良好的程序设计技能。(2)在实践中认识为什么要学习数据结构,掌握数据结构、程序设计语言、程序设计技术之间的关系,是前面所学知识的综合和回顾。要求 (1)了解并掌握交互式图形系统的设计方法,具备初步的独立分析和设计能力;(2)初步掌握软件开发过程的问题分析、系统设计、程序编码、测试等基本方法和技能;(3)提高综合运用所学的理论知识和方法独立分析和解决问题的能;(4)训练用系统的观点和软件开发一般规范进行软件开发,培养软件工作者所应具备的科学的工作方法和作风;(5)培养学生团结协作,共同完成相关课题的能力。2 课程设计题目 人机交互系统三维图形处理及动画实现 题
4、目要求及内容 要求 创建三维立体图形,通过创建菜单及键盘、鼠标事件实现对图形的人机交互式处理。在理解直线、圆、区域填充、图形裁剪等理论知识的基础上,借助于程序设计语言 VC+和 OpenGL三维图形库进行小型图形应用软件或三维场景的开发。本课程课程设计注重图形交互处理的主要实现,包括如下几部分:三维立体图形人机交互的处理,主要内容包括以下几点:(1)创建菜单及键盘事件实现对图形的基本处理;(2)平移、缩放、旋转等计算机图形的几何变换;(3)图形的裁剪;(4)平面投影和透视投影;(5)消隐和光照处理;(6)动画的绘制及实现。附:二维图形的绘制 主要内容包括以下几点:(1)点、线、圆、多边形、Be
5、zier曲线等计算机基本图元的的绘制;(2)点、线、圆、多边形、Bezier曲线等计算机基本图元属性的设置。内容分析 定义三维齐次坐标结构和面的结构;定义各图形绕轴旋转的结构及各坐标轴的放缩结构;定义各个光源的属性及材质表面的属性;定义键盘输入及鼠标输入对应响应的事件;定义各菜单对应执行的响应事件;通过双缓存技术实现动画效果。实习原理 人机交互 人机交互主要包括鼠标输入、键盘输入以及创建菜单执行对应的处理事件,其基本原理如下:鼠标:1)检测鼠标 Clicks GLUT 为处理鼠标 clicks 事件提供了一个方法。函数 glutMouseFunc,这个函数一般在程序初始化阶段被调用。函数原型如
6、下:void glutMouseFunc(void(*func)(int button,int state,int x,int y);参数:func:处理鼠标 click 事件的函数的函数名。从上面可以看到到,处理鼠标 click 事件的函数,一定有 4 个参数。第一个参数表明哪个鼠标键被按下或松开,这个变量可以是下面的三个值中的一个:GLUT_LEFT_BUTTON GLUT_MIDDLE_BUTTON GLUT_RIGHT_BUTTON 第二个参数表明,函数被调用发生时,鼠标的状态,也就是是被按下,或松开,可能取值如下:GLUT_DOWN GLUT_UP 当函数被调用时,state 的值是
7、 GLUT_DOWN,那么程序可能会假定将会有个 GLUT_UP 事件,甚至鼠标移动到窗口外面,也如此。然而,如果程序调用glutMouseFunc传递 NULL作为参数,那么 GLUT 将不会改变鼠标的状态。剩下的两个参数(x,y)提供了鼠标当前的窗口坐标(以左上角为原点)。2)检测动作(motion)GLUT提供鼠标 motion检测能力。有两种 GLUT处理的 motion:active motion和 passive motion。Active motion 是指鼠标移动并且有一个鼠标键被按下。Passive motion 是指当鼠标移动时,并有没鼠标键按下。如果一个程序正在追踪鼠标,
8、那么鼠标移动期间,每一帧将产生一个结果。GLUT让我们可以指定两个不同的函数,一个追踪 passive motion,另一个追踪 active motion。它们的函数原型,如下:void glutMotionFunc(void(*func)(int x,int y);void glutPassiveMotionFunc(void(*func)(int x,int y);参数:Func:处理各自类型 motion 的函数名。处理 motion 的参数函数的参数(x,y)是鼠标在窗口的坐标。以左上角为原点。3)检测鼠标进入或离开窗口 GLUT还能检测鼠标鼠标离开,进入窗口区域。一个回调函数可以被
9、定义去处理这两个事件。GLUT 里,调用这个函数的是 glutEntryFunc,函数原型如下:void glutEntryFunc(void(*func)(int state));参数:Func:处理这些事件的函数名。上面函数的参数中,state有两个值:GLUT_LEFT GLUT_ENTERED 表明,是离开,还是进入窗口。键盘:当你按下一个键后,GLUT提供了两个函数为这个键盘消息注册回调。1)第一个是 glutKeyboardFunc。这个函数是告诉窗口系统,哪一个函数将会被调用来处理普通按键消息。普通键是指字母,数字,和其他可以用 ASCII代码表示的键。函数原型如下:void g
10、lutKeyboardFunc(void(*func)(unsigned char key,int x,int y);参数:func:处理普通按键消息的函数的名称。如果传递 NULL,则表示 GLUT 忽略普通按键消息。这个作为 glutKeyboardFunc 函数参数的函数需要有三个形参。第一个表示按下的键的 ASCII码,其余两个提供了,当键按下时当前的鼠标位置。鼠标位置是相对于当前客户窗口的左上角而言的。2)GLUT 提供函数 glutSpecialFunc 以便当有特殊键按下的消息时,你能注册你的函数。函数原型如下:void glutSpecialFunc(void(*func)(i
11、nt key,int x,int y);参数:func:处理特殊键按下消息的函数的名称。传递 NULL则表示 GLUT 忽略特殊键消息。菜单:弹出式菜单(像点鼠标右键出来的菜单那样的)也是 GLUT的一部分,虽然它不能实现我们经常看到的 windows 系统弹出式菜单的所有的功能,但是它也有很大的作用。给一个程序增加菜单提供了一个比键盘更简单的方法来和程序交互,选择不同选项,而不用去记那些按键。1)创建菜单:创建菜单函数 glutCreateMenu 的原型如下:int glutCreateMenu(void(*func)(int value);参数:func:为新建的菜单处理菜单事件的函数名
12、。这个函数的返回值是菜单的标识符(menu identifier)。2)菜 单 增 加 条 目:出 来 个 空 菜 单 也 没 什 么 用,使 用 的 函 数 是glutAddMenuEntry:void glutAddMenuEntry(char*name,int value);参数:name:菜单名称的字符串。value:当你选择菜单里的一项后,这个值就返回给上面的 glutCreateMenu里调用的函数。3)联接鼠标:必须指定菜单怎么出现,使用 GLUT你可以在按下一个鼠标按键后让菜单显示,函数是 glutAttachMenu:void glutAttachMenu(int butto
13、n);参数:button:一个整数,指定菜单和哪个鼠标键关联起来。botton 可以去下面的值;GLUT_LEFT_BUTTON GLUT_MIDDLE_BUTTON GLUT_RIGHT_BUTTON 用 glutAttachMenu 来在鼠标和菜单间建立关联,但我们有时候需要断开这种关联。完成这个工作的函数是 glutDetachMenu。函数原型如下:void glutDetachMenu(int button);参数:button:要断开的鼠标按键。Button 的取值和 glutAttachMenu 一样。最后,如果你想恢复被菜单使用了的资源,我们可以销毁(destroy)它,相应的
14、函数是 glutDestroyMenu,它的原型如下:void glutDestroyMenu(int menuIdentifier);参数:menuIdentifier:要销毁的菜单的标识符,它必须和函数 glutCreateMenu返回的值相同。4)子菜单的建立:和我们前面用的建立菜单的函数一样。建立菜单后我们把子菜单作为一个条目添加进去。使用函数 glutAddSubMenu 来完成这项工作:void glutAddSubMenu(char*entryName,int menuIndex);参数:entryName:子菜单名称。menuIndex:子菜单索引,这个就是我们调用 glutC
15、reateMenu 来创建子菜单返回的值。动画 计算机动画与实际的动画有些不同,实际的动画都是先画好,播放的时候直接显示出来,计算机动画则是一边画一边显示,通过双缓存技术将后台绘制好的图形与前台图形交换,这样循环反复,屏幕上便呈现出我们所看到的动画。计算机实现动画主要启动双缓冲功能,在主函数里启用双缓冲:glutInitDisplayMode(GLUT_RGB|GLUT_DOUBLE|GLUT_DEPTH);当每次绘制完成时,我们需要交换两个缓冲区,把绘制好的信息显示到屏幕。为了完成这一工作,我们在绘图函数里调用 glutSwapBuffers()便很好的实现了动画前台与后台的光滑交换显示,达
16、到了动画效果。几何变换 二维几何图形变换 对于几何变换主要通过与变换矩阵的矩阵运算改变顶点坐标(用齐次坐标)来实现:体放大。则总体缩小;否则,总若变换。:对整体图形进行伸缩处产生一个灭点。:在处产生一个灭点。:在:对图形做投影变换。:对图形进行平移变换。转、对称、错切等变换:对图形进行缩放、旋,10001000111*11ssyxyxsqyqpxpqpnmdcba 例如:(1)放缩:yxssS00 snmqdcpbaTsnmqdcpbayxHyx 1(2)旋转:(3)关于 x 轴对称:(4)关于原点对称:(5)沿 X轴方向的错切变换:三维几何图形变换:三维几何图形变换原理同二维几何图形变换,只
17、是采用的变换矩阵为 44矩阵,空间点x y z 采用四维齐次坐标 X Y Z 1表示。2、OpenGL 环境下的几何变换 基本变换函数:(1)平移矩阵构造函数为 glTranslate(tx,ty,tz),作用是把当前矩阵和一个表示移动物体的矩阵相乘。tx,ty,tz 指定这个移动物体的矩阵,它们可以是任意的实数值,后缀为 f(单精度浮点 float)或 d(双精度浮点 double),对于二维应用来说,tz=。(2)旋转矩阵构造函数为 glRotate(theta,vx,vy,vz),作用是把当前矩阵和一个表示旋转物体的矩阵相乘。theta,vx,vy,vz 指定这个旋转物体的矩阵,物体将绕
18、着(0,0,0)到(x,y,z)的直线以逆时针旋转,参数 theta 表示旋转的角度。向量 v=(vx,vy,vz)的分量可以是任意的实数值,该向量用于定义通过坐标原点的旋转轴的方向,后缀为 f(单精度浮点 float)或 d(双精度浮点 double),对于二维旋转来说,vx=,vy=,vz=。(3)缩放矩阵构造函数为 glScale(sx,sy,sz),作用是把当前矩阵和一个表示缩放物体的矩阵相乘。sx,sy,sz 指定这个缩放物体的矩阵,分别表示在x,y,z 方向上的缩放比例,它们可以是任意的实数值,当缩放参数为负值时,该函数为反射矩阵,缩放相对于原点进行,后缀为 f(单精度浮点 flo
19、at)或 d(双精度浮点 double)。假设当前矩阵为单位矩阵,然后先乘以一个表示旋转的矩阵 R,再乘以一个表示移动的矩阵 T,最后得到的矩阵再乘上每一个顶点的坐标矩阵 v。那么,经过变换得到的顶点坐标就是(RT)v)。由于矩阵乘法满足结合率,(RT)v)=R(Tv),换句话说,实际上是先进行移动,然后进行旋转。即:实际变换的顺序与代码中写的顺序是相反的。由于“先移动后旋转”和“先旋转后移动”得到的结果很可能不同,初学的时候需要特别注意这一点。由于模型变换都通过矩阵运算来实现,在进行变换前,应先设置当前操作的矩阵为“模型视图矩阵”。设置的方法是以 GL_MODELVIEW 为参数调用glMa
20、trixMode函数,像这样:cossinsincos yxyxyx1001 yxyxyx1001ycyxcyxyx101glMatrixMode(GL_MODELVIEW);该语句指定一个 44的建模矩阵作为当前矩阵。通常,我们需要在进行变换前把当前矩阵设置为单位矩阵。把当前矩阵设置为单位矩阵的函数为:glLoadIdentity();我们在进行矩阵操作时,有可能需要先保存某个矩阵,过一段时间再恢复它。当我们需要保存时,调用 glPushMatrix()函数,它相当于把当前矩阵压入堆栈。当需要恢复最近一次的保存时,调用 glPopMatrix()函数,它相当于从堆栈栈顶弹出一个矩阵为当前矩阵
21、。OpenGL规定堆栈的容量至少可以容纳32个矩阵,某些 OpenGL实现中,堆栈的容量实际上超过了 32个。因此不必过于担心矩阵的容量问题。通常,用这种先保存后恢复的措施,比先变换再逆变换要更方便,更快速。注意:模型视图矩阵和投影矩阵都有相应的堆栈。使用 glMatrixMode来指定当前操作的究竟是模型视图矩阵还是投影矩阵。OpenGL环境下三维图形变换相关函数:(1)glMatrixMode(GLenum mode)/设置当前矩阵类型(2)glLoadMatrixfd(const TYPE*m)/用指定的矩阵替换当前矩阵(3)glLoadIdentity(void)/用单位矩阵替换当前矩
22、阵(4)glMultMatrixfd(const TYPE*m)/用当前矩阵去乘*m 所指定的矩阵,并将结果存放与*m 中(5)glTranslatefd(TYPE x,TYPE y,TYPE z)/平移变换函数(6)glRotatefd(TYPE angle,TYPE x,TYPE y,TYPE z)/旋转变换函数(7)glScalefd(TYPE x,TYPE y,TYPE z)/缩放和反射变换函数(8)glPushMatrix(void);glPopMatrix(void);/堆栈操作函数 3 主要流程图 三维图形处理流程图 图 3-1 三维图形处理流程图 否 Y 是 程序开始 执行菜单
23、 绘制图形 几何变换 环境设置 视图设置 恢复 启动光照 XOY缩小 旋转 放大 XOZ关闭光照 移动 矩阵 重置当前矩阵 重置当前视点 键盘 顺时针旋转 逆时针旋转 y 重置当前矩阵 二维几何画板流程图 图 3-2 二维几何画板流程图 4 主要源程序 主要源程序 程序主要由绘制图形、创建菜单、添加光照、几何变换及视点等基本功能组成,程序实现由以下几个基本图形绘制程序:void myDisplay(void)是 程序开始 打开菜单 清除画板 绘图 颜色设置 清空颜色 绘制图形 重置颜色 glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);glPus
24、hMatrix();glTranslated(0,0,-60);立方体();球();月亮();路面();仓库();房子();太阳();行星();天桥();glPopMatrix();glFlush();glutSwapBuffers();视点设置:gluLookAt(-1,-1,1,-1,1,1,0,0,1);/XOZ 面 gluLookAt(-1,-1,1,-1,-1,0,0,1,0);/XOY 面 光照设置:glEnable(GL_LIGHTING);/启动光照 glDisable(GL_LIGHTING);/关闭光照 注册鼠标事件:glutMotionFunc(myMouseMotion
25、_旋转);glutMotionFunc(myMouseMotion_移动);glutMouseFunc(myMouse_放大);glutMouseFunc(myMouse_缩小);主函数:int main(int argc,char*argv)glutInit(&argc,argv);glutInitDisplayMode(GLUT_RGB|GLUT_DOUBLE|GLUT_DEPTH);glutInitWindowPosition(300,50);glutInitWindowSize(winWidth,winHeight);glutCreateWindow(计算机图形处理课程设计三维图形处理
26、);init();init1();glutDisplayFunc(&myDisplay);glutReshapeFunc(Reshape);createGLUTMenus();glutKeyboardFunc(keyboard);glutIdleFunc(&myAnimate);/设置全局空闲回调函数 glutMainLoop();return 0;图 4-1 三维图形处理运行初始图形 键盘事件函数 void keyboard(unsigned char key,int x,int y)switch(key)case y:year=(year+1)%360;if(year=2*(int)(ac
27、os/*180/PI)year=-year;glutPostRedisplay();break;case Y:year=(year-1)%360;if(year=-2*(int)(acos/*180/PI)year=-year;glutPostRedisplay();break;default:break;图 4-2 键盘事件运行图 菜单 创建菜单函数 void processMenuEvents(int option)switch(option)case 恢复:glutMouseFunc(NULL);glutMotionFunc(NULL);glDisable(GL_LIGHTING);in
28、it1();break;case 旋转:glutMouseFunc(NULL);glutMotionFunc(myMouseMotion_旋转);break;case 移动:glutMouseFunc(NULL);glutMotionFunc(myMouseMotion_移动);break;case 启动光照:glEnable(GL_LIGHTING);break;case 关闭光照:glDisable(GL_LIGHTING);break;case 放大:glutMotionFunc(NULL);glutMouseFunc(myMouse_放大);break;case 缩小:glutMoti
29、onFunc(NULL);glutMouseFunc(myMouse_缩小);break;case XOZ面:glLoadIdentity();gluLookAt(-1,-1,1,-1,1,1,0,0,1);break;case XOY面:glLoadIdentity();gluLookAt(-1,-1,1,-1,-1,0,0,1,0);break;default:break;void createGLUTMenus()int menu,submenu1,submenu2,submenu3;submenu1=glutCreateMenu(processMenuEvents);glutAddMe
30、nuEntry(启动光照,启动光照);glutAddMenuEntry(关闭光照,关闭光照);submenu2=glutCreateMenu(processMenuEvents);glutAddMenuEntry(旋转,旋转);glutAddMenuEntry(移动,移动);glutAddMenuEntry(放大,放大);glutAddMenuEntry(缩小,缩小);submenu3=glutCreateMenu(processMenuEvents);glutAddMenuEntry(XOZ面,XOZ面);glutAddMenuEntry(XOY面,XOY面);menu=glutCreate
31、Menu(processMenuEvents);glutAddSubMenu(环境设置,submenu1);glutAddSubMenu(几何变换,submenu2);glutAddSubMenu(视图设置,submenu3);glutAddMenuEntry(恢复,恢复);glutAttachMenu(GLUT_RIGHT_BUTTON);图 4-3 创建菜单运行图 光照函数 void init()GLfloat light1_ambient=,;GLfloat light1_diffuse=,;GLfloat light1_specular=,;GLfloat light1_positio
32、n=,;GLfloat light2_ambient=,;GLfloat light2_diffuse=,;GLfloat light2_specular=,;GLfloat light2_position=,;GLfloat light3_ambient=,;GLfloat light3_diffuse=,;GLfloat light3_specular=,;GLfloat light3_position=,;GLfloat spot0_direction=,;GLfloat spot3_direction=,;glLightfv(GL_LIGHT1,GL_AMBIENT,light1_am
33、bient);glLightfv(GL_LIGHT1,GL_DIFFUSE,light1_diffuse);glLightfv(GL_LIGHT1,GL_SPECULAR,light1_specular);glLightfv(GL_LIGHT1,GL_POSITION,light1_position);glLightf(GL_LIGHT1,GL_SPOT_CUTOFF,;glLightf(GL_LIGHT1,GL_SPOT_EXPONENT,;glLightfv(GL_LIGHT1,GL_SPOT_DIRECTION,spot0_direction);glLightfv(GL_LIGHT2,G
34、L_AMBIENT,light2_ambient);glLightfv(GL_LIGHT2,GL_DIFFUSE,light2_diffuse);glLightfv(GL_LIGHT2,GL_SPECULAR,light2_specular);glLightfv(GL_LIGHT2,GL_POSITION,light2_position);glLightf(GL_LIGHT2,GL_SPOT_CUTOFF,;glLightf(GL_LIGHT2,GL_SPOT_EXPONENT,;glLightfv(GL_LIGHT2,GL_SPOT_DIRECTION,spot0_direction);gl
35、Lightfv(GL_LIGHT3,GL_AMBIENT,light3_ambient);glLightfv(GL_LIGHT3,GL_DIFFUSE,light3_diffuse);glLightfv(GL_LIGHT3,GL_SPECULAR,light3_specular);glLightfv(GL_LIGHT3,GL_POSITION,light3_position);glLightf(GL_LIGHT3,GL_SPOT_CUTOFF,;glLightf(GL_LIGHT3,GL_SPOT_EXPONENT,;glLightfv(GL_LIGHT3,GL_SPOT_DIRECTION,
36、spot3_direction);/GLfloat mat_ambient=,;GLfloat mat_diffuse=,;GLfloat mat_specular=,;GLfloat mat_shininess=;glMaterialfv(GL_FRONT,GL_AMBIENT,mat_ambient);glMaterialfv(GL_FRONT,GL_DIFFUSE,mat_diffuse);glMaterialfv(GL_FRONT,GL_SPECULAR,mat_specular);glMaterialfv(GL_FRONT,GL_SHININESS,mat_shininess);/g
37、lEnable(GL_LIGHTING);/启动光照,菜单控制启动光照 glEnable(GL_LIGHT1);glEnable(GL_LIGHT2);glEnable(GL_LIGHT3);glDepthFunc(GL_LESS);glEnable(GL_DEPTH_TEST);glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);图 4-4 添加光照运行图 几何变换事件 旋转事件 void myMouseMotion_旋转(GLint x,GLint y)m_xRotate=cx-x;m_yRotate=cy-y;cx=x,cy=y;glMatr
38、ixMode(GL_MODELVIEW);glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);glRotated(3*m_xRotate+4*m_yRotate)/2,;图 4-5 旋转事件运行图 移动事件 void myMouseMotion_移动(GLint x,GLint y)tcx=x-cx,tcy=y-cy;glMatrixMode(GL_MODELVIEW);glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);glTranslatef(tcx,0,0);glTranslatef(0,0,-t
39、cy);cx=x,cy=y;缩小事件 void myMouse_缩小(int button,int state,int x,int y)glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);if(button=GLUT_LEFT_BUTTON&state=GLUT_DOWN)glScalef(i/,i/,i/;图 4-8 缩小事件运行图 5 问题讨论 绘制动画时出现图形闪烁,如何解决这一问题 通过组员讨论,发现在主函数中设置的初始显示模式为单缓冲模式(GLUT_SINGLE),图形绘制复杂时绘制相对缓慢,使用单缓冲模式,计算机一边绘制一边显示,导致人眼暂留在未绘制完成的残缺图像上,未看到完整图像,造成了屏幕闪烁。当修改为双缓存(GLUT_DOUBLE)时,并在每一个图形绘制子函数最后调用 glutSwapBuffers,当再次执行程序时屏幕闪烁却加强了,问题又出现在哪里呢 多次分析绘图函数,原来当每一个绘图子函数都调用 glutSwapBuffers 时导致每次绘制完成一个子图形时后面的图形还未开始绘制就将当前绘制完成的子图形显示出来,而当下一个子图形绘制完成时才开始显示图形,致使屏幕闪烁。最终将 glutSwapBuffers 只在绘图主函数(myDisplay(void))中调用时屏幕不再闪烁,顺畅的显示出来动画效果。
限制150内