SMIL编程学习（二）---时间线

SMIL动画定时播放教程

最新推荐文章于 2025-10-24 09:31:04 发布

原创最新推荐文章于 2025-10-24 09:31:04 发布 · 978 阅读

0 ·

CC 4.0 BY-SA版权

SMIL编程专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用SMIL标准中的<time>行为属性来控制图片的显示时间，包括开始时间和持续时间。此外，还展示了如何通过<style>标签定义类，并应用于<img>标签中实现动态效果，以及循环播放的方法。

从什么时间开始，和可以持续的时间

<img class t src="ss.jpg" begin="x s">
<img class t src="ss.jpg" dur="y s">

这是说，使ss.jpg这个图像，从x秒开始，连续播放y秒。

也可以使用<style></style>标签定义一个类：

<style>.t {behavior: url(#default#time2)}</style>

那么就是这样使用：

<img class="t" src="ss.jpg" begin="x s">
<img class="t" src="ss.jpg" dur="y s">

注意，值 "indefinite" 可用于定义不结束的循环；例如,

<img class="t" src="ss.jpg" dur="indefinite">

不可使开始时间begin=”indefinite“，这是无用功。

例程：

<img class="t" src="w.jpg" dur="1s" />)：

<smil>
<head>
  <style>.t {behavior: url(#default#time2)}</style>
</head>
<body>

<img class="t" src="w.jpg" begin="0s" />
<img class="t" src="w.jpg" dur="1s" />
<img class="t" src="x.jpg" begin="1s" />
<img class="t" src="x.jpg" dur="2s" />

</body>
</smil>

style标签后有一个点儿“.”，不要丢掉了。当然，img也可以换成audio，video,，text，ref，textstream，bursh等等。