快速入门系列一：在窗口中加入GIF动画支持

       一段时间以来，大家都在使用各种办法把GIF加载到DirectUI风格的窗口中。使用的办法也是多种多样，或者使用GDI+加载显示，或者使用std_image.c（扩展板，原始出处好像是一个QQ群里的大牛加的，再次致谢），表现出来一般是做一个单独的GifUI（比如GifButton、GifList）等。我觉得这么做很不爽，应用起来也是诸多限制。比如我想在ButtonUI的不同状态显示不同的Gif，或者想用Gif做Layout的背景，这些都是没有好的实现方法的。于是某一天我下定决心要把这个功能实现，经过两周时间，我研究了Gif图片格式，重构了MDui里的图片加载和绘制管理，上边这些都不再是阻碍了。

       使用方法也非常简单，你可以把Gif图片当做普通的png、jpg、bmp等那样使用，而且不影响图片的其他绘制属性"source,corner,dest等"。也就是说在MDui（玛德界面库）的所有UI的属性里，如果这个属性支持图片，那么你就可以用Gif。一个典型的Gif使用范例Xml写法是如下

<Button default="Button" font="2" name="uiDemo_B_GifButton" text="GIF按钮演示" tooltip="点击后会显示/隐藏另一个按钮" height="128" align="centerbottom" normalimage="file='Images/MD_Normal.gif'image='gif' corner='2,2,2,2' " hotimage="file='Images/MD_Hot.gif'image='gif' corner='2,2,2,2' exdata='#F0F00000' "pushedimage="file='Images/MD_Push.gif'image='gif' corner='2,2,2,2' exdata='#B0303030'"disabledimage="file='Images/MD_Disable.gif'image='gif' corner='2,2,2,2' exdata='#F0F00000' "></Button><VerticalLayout bkimage="file='Images/MD_Default.gif' corner='2,2,2,2' image='gif' exdata='#800000FF'" bordercolor="#F0636363" bordersize="0" inset="5,5,5,5"/>

如上的一个支持四态变化使用不同Gif来表达的按钮，和一个使用'Images/MD_Default.gif'做动态背景的纵向布局UI。

image属性支持Gif的使用方法上额外多了两个参数 “image”和“exdata”，其中image参数是标识这个图片是Gif动态图（后续开发会支持更多动态图类型，也都是使用这个属性来标识，GIF格式的图片对应的值是"gif"），exdata参数是Gif播放时额外设置的背景颜色（格式跟一般的bkcolor颜色格式一致）。在2015-01-07发布的MDuiSystem版本里，我去掉了Gif图片内设置的背景颜色，而改用这个颜色来配置背景，这样就支持了Gif播放时的背景颜色的透明通道。

So，使用玛德界面库给你的界面设计支持Gif就是这么简单。配置好这些以后，Gif会像普通的Png图片一样跟随UI的大小做拉伸，做九宫格绘图(corner='2,2,2,2')，做镂空(hole='true')等，你不用再做任何额外的工作了。在异形半透明窗口中，你甚至可以使用这个Gif功能来做一个具有动态背景的异形窗口，是不是有点拉风。如下是两个Demo的截图：

缺点：Gif图片颜色只有256，所以视觉效果不如动态的PNG序列帧；如果GIF图片处理不好，且你不想要背景（MDui默认会把Gif内的背景做成全透明，也就是木有了），这时候画质不好的Gif会有毛边（等将来我支持了APNG这个就不是问题了）；如果使用GIF图片做了Layout容器的背景图，而且你在这个Layout上放了很多UI，那么每一帧GIF绘制都会导致其所有子UI的重绘，这回导致CPU利用率的升高，所以你要把握好这个度。在如下地址（http://code.taobao.org/svn/mduiproject/trunk/MToolBox/Bin/MDui_Demo）你可以下载到MDui的最新Demo，里边包含两个Gif的使用Demo，一个是动态异型窗口，一个是半透明的QQ表情显示，这两个的CPU和内存占用率都是可以接受的。

广告时间：玛德界面库，满足你的各种想象，帮你实现程序界面的各种野望。

下载地址：网页

玛德界面库：“http://code.taobao.org/p/mduiproject/src/”；

玛德界面编辑器：“http://code.taobao.org/p/mduidesigner/src/”；

下载地址：SVN

玛德界面库：“http://code.taobao.org/p/mduiproject/src/”；

玛德界面编辑器：“http://code.taobao.org/p/mduidesigner/src/”；

联系方式：MDui玛德界面官方交流QQ群 371989312。

附件里是两个Gif相关的Demo，可以直接下载。

下载玛德界面库动态异形窗口

下载玛德界面库Gif使用Demo