7、 转场效果

首先解释一下什么是转场效果。我们的演示中多媒体片断是很多的，不可避免的会有两个片断之间的切换。例如：一个图片演示完了，该接着演示下一个图片，两图片中间是有一个过渡的。这个过渡我们就称谓转场效果。如果我们不设置转场效果，那么，过渡的效果肯定不好。LSMIL中的转场效果大致分为wipe和fade两类。

（１） fade类型

从名字就可以看出，这个是淡入淡出的效果。先睹为快！J　请看例子！

< smil xmlns="http://www.w3.org/2001/SMIL20/Language">

< head>

< transition id="fade1" type="fade" subtype="fadeToColor" dur="4s" />

< transition id="fade2" type="fade" subtype="fadeFromColor" dur="4s" />

< /head>

< body>

< img src="g04.jpg" dur="10s" transIn="fade2" transOut="fade1"/>

< /body>

</smil>

解释：a、transition声明我们要设置转场效果。id="fade1"设置了该转场效果的id号。id号必须设置。type="fade"设置了转场效果的基本类型为fade。 subtype="fadeToColor"设置了转场效果的具体类型（子类型）为fadeToColor（注意这里又是我们提到的骆驼写法！）。dur="4s"设置了该场效果完成的时间。

b、transIn="fade2"设置了图片g04.jpg显示时采用转场效果fade2； transOut="fade1"规定图片g04.jpg完成显示时采用转场效果fade１。

c、fade只有三个子类型。上面我们用了２个。还有一个是crossfade，这个也是缺省设置。

（２） wipe类型

wipe为擦去类型。该类型的效果很多很多。我们这里所说的wipe只是他们的总称（注意wipe不能作为type的属性值，而是它的子类作为type的属性值，子类的子类作为subtype的属性值！J谁让它的属性值这么多！！！）。具体的有barWipe、boxWipe、fourBoxWipe等36大类!!!不管它有多少类，先看看怎么弄。请看例子：

< smil xmlns="http://www.w3.org/2001/SMIL20/Language">

< head>

< transition id="wipe1" type="slideWipe" subtype="fromTop"/>

< transition id="wipe2" type="waterfallWipe"/>

< /head>

< body>

< img src="g03.jpg" transIn="wipe1" transOut="wipe2" dur="5s"/>

< /body>

< /smil>

解释：a、JJJ和上面的写法基本上是一致的！

b、type="waterfallWipe"后面没有子类型表示使用的是waterfallWipe类型的默认子类型。

（３） 综合应用

我们上面都只是用在单个多媒体片断上的转场效果。下面看看在多个多媒体片断上怎样设置转场效果。还得看例子：J

< smil xmlns="http://www.w3.org/2001/SMIL20/Language">

< head>

< layout>

< root-layout width="400" height="300"/>

< /layout>

< transition id="fade" type="fade" subtype="fadeToColor" fadeColor="green" dur="4s"/>

< transition id="fade1" type="fade" subtype="fadeFromColor" fadeColor="red" dur="4s"/>

< transition id="fade2" type="fade" subtype="crossfade" dur="2s"/>

< transition id="push" type="snakeWipe" dur="4" />

< /head>

< body>

< seq>

< img dur="5s" src="g06.jpg" transIn="fade1" fill="transition"/>

< img dur="4s" src="g05.jpg" transIn="fade2" fill="transition"/>

< img dur="4s" src="g06.jpg" transIn="fade2" fill="transition"/>

< img dur="4s" src="g05.jpg" transIn="push" transOut="fade"/>

< /seq>

< /body>

< /smil>

解释：a、fadeColor="green"设置了谈出谈入色为绿色（green）。在这里表示的就是从当前的多媒体片断渐变为绿色。下面的fadeColor="red"则表示从红色渐变为当前的多媒体片断（如果是图片则变为图片，如是视频则变为第一帧）。

b、fill="transition"表示的是最后的完成效果有下面的转场效果来决定。

c、最后一个就不能用fill="transition"了。想想，它就是最后一个了，上哪里去找下面的转场效果呢？