SMIL动画

Synchronized Multimedia Integration Language 同步多媒体集成语言

• 实时地组合视频、音频、文本以及图形
• 文档 https://www.w3school.com.cn/smil/smil_intro.asp

SMIL文件仅仅是一个关联文件，其本身并不包含真正的媒体内容

• 待播放时，由播放器自动从各自的存放位置调用这些关联的媒体文件，
• 并按SMIL文件中设置的播放顺序和位置等属性

浏览器支持 https://caniuse.com/?search=smil

SMIL包含的标签

animate

设置要进行动画的属性，以及变化范围，时间长度

<animate
    xlink:href="url(#rect1)"
    attributeName="XML"
    attributeName="x"
    from="10"
    to="110"
    duration="3s"
  >

多个动画是可以叠加运行的

<svg>
    <rect
      x="100"
      y="100"
      width="100"
      height="100"
      fill="red"
    >
      <animate
        attributeType="XML"
        attributeName="x"
        from="10"
        to="300"
        dur="3s"
        fill="freeze"
      ></animate>
      <animate
        attributeType="XML"
        attributeName="fill"
        from="#369"
        to="#90f"
        dur="5s"
        fill="freeze"
      ></animate>
    </rect>
  </svg>

translate变换动画

translate
设置要进行动画的属性，以及变化范围，时间长度
animateTransform不能让2个动画同时进行

<animateTransform
        type="translate"
        from="10 10"
        to="300 300"
        dur="3s"
        fill="freeze"
      ></animateTransform>