s60主题特效制作(大刘)

【主题特效第一讲】：关于图标特效中的GridAppShellItem_default.kml 讲解和制作首先，我们先了解一下什么是kml文件：KML，是Keyhole 标记语言（Keyhole Markup Language）的缩写，是一种采用XML 语法与格式的语言，用于描述和保存地理信息（如点、线、图像、多边形和模型等）在这里用于S60平台主题特效的编写与控制。

控制特效的文件有很多，对于只能使用图标特效的小六来讲，用到的文件只有两个：c:\resource\effects\GridAppShellBackground_default.kml和GridAppShellItem_default.kml其中GridAppShellBackground_default.kml控制各种绚丽多彩的效果和PNG 图的调用，而GridAppShellItem_default.kml控制的是图标之间的平滑移动和图标自身的动态效果（放大、缩小、平移等等）这一帖讲的就是如何修改GridAppShellItem_default.kml的效果。

此文件可以用x-plore打开，文本编码是Utf-8，所以先在x-plore里按0把文本编码选为utf-8打开后我们可以看到满屏的代码……汗～<!-- This file describes apperance of listbox items. -->这是注释，不管他<container id="item" x="{item.x}" width="{item.width}"height="{item.height}">这个container的意思是容器的意思……<container id="icon" width="{item.width}" height="{item.height*0.7}"> <image id="image" src="{item.src}" width="{item.width}"height="{item.height}" /></container><container id="text" y="{item.height*0.7}" width="{item.width}" height="{item.height*0.3}"><image y="{-item.height*0.7}" id="image2" src="{item.src}"width="{item.width}" height="{item.height}" /></container>前面几行的意思大概就是给每个值指定一个id什么的，不管他，往下看<action on="DoItemJump"><animate targetNode="item" targetAttr="y" to="{item.y}" /></action><actionon="DoItemMove;DoItemDeselectMove;DoItemWrap;DoItemSelectWrap;D oItemDeselectWrap"><animate targetNode="item" targetAttr="y" from="{item.oldy}"to="{item.y}" dur="0.15s" ease="in"/></action>这几行是实现图标平滑效果的，也不需要修改<action on="DoItemSelectWrap;DoItemSelectWrap"><animate targetNode="item" targetAttr="y" from="{item.oldy}"to="{item.y}" dur="0.15s" ease="inout"/>从这行开始是图标环绕效果（就是在最上面的图标按上导航键后，图标的效果，下面和左右也一样）命令。

<animate targetNode="image" targetAttr="width" from="{item.width}" to="{item.width*1.2}" dur="0.4s" ease="out"/><animate targetNode="image" targetAttr="height" from="{item.height}" to="{item.height*1.2}" dur="0.4s" ease="out"/><animate targetNode="image" targetAttr="x" to="{-item.width*0.1}" dur="0.4s" ease="out"/><animate targetNode="image" targetAttr="y" to="{-item.height*0.1}" dur="0.4s" ease="out"/>这是选择框移出原位置后的第一个动作：放大。

这里先讲下位置的问题……我们以整个图标的高或宽为1个单位，以左上角为原点，建立一个直角坐标系。

其中向右为+向左为- 向下为+向上为-第一行是，图标右边缘从原来的宽度："{item.width}"变为"{item.width*1.2}"也就是右边缘向右拉伸到X轴1.2的位置上第二行是，图标下边缘从原来的高度"{item.height}"变为"{item.height*1.2}"也就是下边缘向下拉伸到Y轴1.2的位置上第三行是，图标左边缘从原来的宽度："{item.width}"变为"{-item.width*0.1}"也就是左边缘向左拉伸到X轴-0.1的位置上第四行是，图标上边缘从原来的高度"{item.height}"变为"{-item.height*0.1}"也就是上边缘向上拉伸到Y轴-0.1的位置上整体上的效果是四周向外拉伸，产生放大效果……我们继续往下看<animate targetNode="image" targetAttr="width"from="{item.width*1.2}" to="{item.width}" dur="350ms" begin="350ms" ease="in"/><animate targetNode="image" targetAttr="height"from="{item.height*1.2}" to="{item.height}" dur="350ms"begin="350ms" ease="in"/><animate targetNode="image" targetAttr="x" from="{-item.width*0.1}" to="0" dur="350ms" begin="350ms" ease="in"/><animate targetNode="image" targetAttr="y" from="{-item.height*0.1}" to="0" dur="350ms" begin="350ms" ease="in"/></action>这个</action>是一个动作的结束而上面的四行意思是把图标从放大效果变回原来的大小，和前四行都是大同小异至于dur="350ms"是间隔350毫秒的意思……<action on="DoItemSelectMove"><animate targetNode="item" targetAttr="y" from="{item.oldy}"to="{item.y}" dur="0.15s" ease="inout"/>是在功能表内的移动效果，是和上一个动态是一样的，都是放大后缩小，我们可以把上面的复制过来：<animate targetNode="image" targetAttr="width" from="{item.width}" to="{item.width*1.2}" dur="350ms" ease="out"/><animate targetNode="image" targetAttr="height" from="{item.height}" to="{item.height*1.2}" dur="350ms" ease="out"/><animate targetNode="image" targetAttr="x" to="{-item.width*0.1}" dur="350ms" ease="out"/><animate targetNode="image" targetAttr="y" to="{-item.height*0.1}" dur="350ms" ease="out"/><animate targetNode="image" targetAttr="width"from="{item.width*1.2}" to="{item.width}" dur="350ms" begin="350ms" ease="in"/><animate targetNode="image" targetAttr="height"from="{item.height*1.2}" to="{item.height}" dur="350ms"begin="350ms" ease="in"/><animate targetNode="image" targetAttr="x" from="{-item.width*0.1}" to="0" dur="350ms" begin="350ms" ease="in"/><animate targetNode="image" targetAttr="y" from="{-item.height*0.1}" to="0" dur="350ms" begin="350ms" ease="in"/></action></container>代码到这结束……明白的可以自己回去改……貌似很难理解……不过我表达地够清楚了……没招了……另外，用x-plore编辑后，点菜单→把另存为unicode文本的勾点掉，否则修改无效by大刘2010.09.01【主题特效第二讲】:特效中渐变特效的原理讲解，附送特效命令解释大家好,我是塞班论坛的大刘今天来先给大家讲一讲特效的kml文件之中写的一堆东西都是神马意思让大家也切实感受一下切入正题kml文件的编码是utf-8,所以编辑时候注意格式,另外不要保存成unicode,会失效的...文件里有很多代码和命令,我来详细解说一下我们来随便找一个简单的kml,好了,就他了.N81的渐变效果最简单了，没有几行。