SMIL介绍
SMIL 全称 Synchronized Multimedia Integration Language，它允许我们通过 HTML 标签实现动画效果，它可以用于：
- 实现过渡动画
- 实现补间动画
- 动画颜色变换
- 路径运动动画（CSS3无法实现） SMIL 包含以下标签：
<set> <animate> <animateColor>// 这个元素，现在已经废弃。 <animateTransform> <animateMotion>
为什么要用 SMIL？
实现动画的全新方式：
- 无需 CSS
- 无需 JS
- 几个标签轻松实现复杂动画，它不香吗？
SMIL元素一些共同属性的介绍
attributeName：表示需要实现动画的属性。
attributeType: 根据attributeName指定的值来判断是svg元素属性的变化，还是css属性的变化。
- CSS, 表示css属性值的变化。
- XML，表示svg属性值的变化。
begin: 表示动画延迟多少秒。
from: 表示动画开始的值。
to：表示动画结束的值。
fill: 表示动画结束时所处的状态。
- freeze: 表示结束后，让状态处于结束时的动画状态。
- remove: 表示结束后，让状态处于开始时的动画状态。
values: 表示实现多个状态动画。不能使用from, to属性。每个状态值通过;分隔。
dur: 表示动画持续多少秒。
type: 在animateTransform元素中变换的类型。
repeatCount: 表示重复多少次动画。path: 表示animateMotion元素动画时运行的轨迹。
rotate: 表示animateMotion元素动画时到达有棱角的位置时，怎样运行。一般设置为0。
id: 指定每个动画元素的唯一标识，可以结合begin来实现复杂动画。
set 标签
实现属性的延迟设置
<svg width="400" height="400"> <rect x="0" y="0" width="100" height="100"> <set attributeName="x" attributeType="XML" to="10" begin="1s" /> <set attributeName="x" attributeType="XML" to="20" begin="2s" /> <set attributeName="x" attributeType="XML" to="30" begin="3s" /> <set attributeName="x" attributeType="XML" to="40" begin="4s" /> <set attributeName="x" attributeType="XML" to="50" begin="5s" /> </rect> </svg>
animate 标签
动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值。
<svg width="200" height="200" viewPort="0 0 200 200"> <rect x="10" y="10" width="100" height="100"> <animate attributeType="CSS" attributeName="width" from="100" to="150" dur="3s" fill="freeze" /> </rect> </svg> <svg width="200" height="200" viewPort="0 0 200 200"> <rect x="10" y="10" width="100" height="100"> <animate attributeType="XML" attributeName="width" from="100" to="150" dur="3s" fill="freeze" /> </rect> </svg>
以上两种实现相同效果。一个是通过CSS，一个是通过svg。
形状补间动画。不规则图形的变化。
<svg width="400" height="400"> <polygon points="30 30 70 30 90 70 10 70" fill="#fcc" stroke="black"> <animate attributeName="points" attributeType="XML" to="50 30 70 50 50 90 30 50" dur="5s" fill="freeze" repeatCount="1" /> </polygon> </svg>
animateTransform 标签
animateTransform元素变动了目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切。注意：如果遇到transform属性值的变化，需要用到该元素。而不要去用animate元素做变换。
<svg width="200" height="200" viewBox="0 0 200 200"> <rect x="0" y="0" width="60" height="60" fill="red"> <animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="2" repeatCount="indefinite" /> </rect> </svg>
animateMotion 标签
这是一个非常nb的标签。可以让元素通过指定的轨迹运动。
实现一个轨迹动画
<svg width="300px" height="100px"> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" fill="none" /> <rect x="0" y="0" width="20" height="20" fill="blue" stroke="black" stroke-width="1"> <animateMotion path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z" dur="3s" repeatCount="indefinite" rotate="auto"> </rect> </svg>
网络异常，图片无法展示
|
实现一个复杂混合动画
<svg viewBox="0 0 200 200" width="200" height="200"> <rect x="0" y="0" rx="0" ry="0" width="10" height="10" fill="red"> <animateMotion id="forward-rect" path="M 10 10 L 110 10 L 110 110 L 10 110" dur="2s" rotate="0" fill="freeze" begin="0; backward-rect.end + 0.5s" /> <animateMotion id="backward-rect" path="M 10 110 L 110 110 L 110 10 L 10 10" dur="2s" rotate="0" fill="freeze" begin="forward-rect.end + 0.5s" /> <animate id="red-to-blue" attributeType="XML" attributeName="fill" begin="0; blue-to-red.end + 1s" from="red" to="blue" dur="2s" fill="freeze" /> <animate id="blue-to-red" attributeType="XML" attributeName="fill" begin="red-to-blue.end + 1s" from="blue" to="red" dur="2s" fill="freeze" /> </rect> <path d="M 10 10 L 110 10 L 110 110 L 10 110" fill="none" stroke-width="1" stroke="blue"/> </svg>
实现一个好看的loading动画
<svg viewBox="0 0 50 50" width="200" height="200"> <circle cx="25" cy="25" r="22" fill="none" stroke-width="3" stroke-dasharray="34" stroke="#3be6cb" stroke-linecap="round"> <animateTransform attributeName="transform" type="rotate" values="0 25 25; 360 25 25" dur="1.5s" repeatCount="indefinite" /> <animate attributeName="stroke" values="#3be6cb;#02bcfe;#3be6cb" dur="3s" repeatCount="indefinite" /> </circle> <circle cx="25" cy="25" r="12" fill="none" stroke-width="3" stroke-dasharray="19" stroke="#02bcfe" stroke-linecap="round"> <animateTransform attributeName="transform" type="rotate" values="360 25 25;0 25 25" dur="1.5s" repeatCount="indefinite" /> <animate attributeName="stroke" values="#02bcfe;#3be6cb;#02bcfe" dur="3s" repeatCount="indefinite" /> </circle> </svg>
网络异常，图片无法展示
|
