SMIL第8課：SMIL Transition

2020-11-29 19:07:02

字體：大中小

來源：轉載

供稿：網友

Transition 能夠為元素生成“淡入淡出”以及“擦除”等效果。

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

Internet Explorer 6 支持基于 SMIL 2.0 規范的 Transition。Transition 由 <transitionfilter> 元素實現。

屬性
<transitionfilter> 元素擁有若干元素，最常用的有：

屬性	描述	例子
type	定義 transition 濾鏡的類型（參閱 transition 濾鏡列表）	type="clockWipe"
begin	定義何時開始 transition	begin="0s"
mode	定義 transition 模式	mode="in"
from	定義 transition 的開始值	from="0.2"
to	定義 transition 的結束值	to="0.8"

Transition 濾鏡
可使用下面的 transition 濾鏡：

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

實例：顯示 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" 的方式把圖像顯示出來。

提示：您必須運行 Internet Explorer 6 來顯示這個例子。

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

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