SMIL第8課：SMIL Transition

2024-09-06 19:55:17

字體：大中小

供稿：網(wǎng)友

Transition 能夠?yàn)樵厣?ldquo;淡入淡出”以及“擦除”等效果。

Transition 屬于 SMIL 2.0
Transition 是 SMIL 2.0 中的新特性。Transition 不屬于 SMIL 1.0 規(guī)范的組成部分。

Internet Explorer 6 支持基于 SMIL 2.0 規(guī)范的 Transition。Transition 由 <transitionfilter> 元素實(shí)現(xiàn)。

屬性
<transitionfilter> 元素?fù)碛腥舾稍兀畛Ｓ玫挠校?table> 屬性描述例子 type 定義 transition 濾鏡的類型（參閱 transition 濾鏡列表） type="clockWipe" begin 定義何時(shí)開(kāi)始 transition begin="0s" mode 定義 transition 模式 mode="in" from 定義 transition 的開(kāi)始值 from="0.2" to 定義 transition 的結(jié)束值 to="0.8"
Transition 濾鏡
可使用下面的 transition 濾鏡：

fade, barnDoorWipe, barWipe, clockWipe, ellipseWipe, fanWipe, irisWipe,
pushWipe, slideWipe, snakeWipe, spiralWipe, starWipe

實(shí)例：顯示 Transition

<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>

<t:transitionfilter targetelement="keyb"
type="clockWipe"
begin="keyb.begin" dur="2s" />

<img id="keyb" class="t" src="pic_keyb.jpg" dur="4s"
width="128" height="107" />

</body>
</html>

在上面的例子中，圖像將顯示 4 秒鐘。Transition 濾鏡將用 2 秒鐘以 "clockWipe" 的方式把圖像顯示出來(lái)。

提示：您必須運(yùn)行 Internet Explorer 6 來(lái)顯示這個(gè)例子。

上一篇：SMIL第9課：SMIL Media元素

下一篇：SMIL第7課：SMIL in Parallel