影片下载
(只有MVP支持者可以下载原始高质量的录音以供离线查看。)
SVG动画有点独特,因为您可以采用三种截然不同的方法对其进行动画处理。
1.使用CSS @keyframes进行动画处理
可以使用CSS定位SVG元素并设置其样式。 意思是,您可以通过@keyframes应用动画。 像这样:
<svg viewBox="0 0 127.9 178.4">
<path id="left-leg" d="M37.6,138.8c0 ... " />
</svg>
.left-leg {
fill: orange;
animation: dance 2s infinite alternate;
}
@keyframes dance {
100% {
transform: rotate(3deg);
}
}
如果发生以下情况,您可以选择这种动画方式:
- 动画非常简单。
- 您只需要设置CSS可以设置动画的属性的动画。
- 您已经知道CSS动画并且对此感到满意。
2.使用SMIL制作动画
SVG中内置了动画的语法。 这是一个非常简单的示例:
<svg viewBox="0 0 127.9 178.4">
<path d="M37.6,138.8c0 ... ">
<animate attributeName="fill" dur="5000ms" to="#f06d06" fill="freeze" />
</path>
</svg>
如果发生以下情况,您可以选择这种动画方式:
- 您需要设置CSS无法设置的属性的动画,例如shape本身 。
- 您还需要其他SMIL特定功能,例如在另一个动画结束时开始动画而无需手动同步时间/延迟。 或交互性的东西,例如单击一次动画。
3.用JavaScript制作动画
使用JavaScript,您可以访问诸如requestAnimationFrame(或其他循环)之类的内容,因此您可以通过快速更改属性值的方式进行动画处理。 还有一些可以与SVG一起使用的框架,这些框架通常内置了动画内容。或者还有与SVG一起使用的动画框架。 像SnapSVG , GreenSock , SVG.js或Velocity.js一样 。
这是SnapSVG的示例:
<svg id="robot" viewBox="0 0 127.9 178.4">
<circle id="left-pupil" cx="34.4" cy="15.4" r="4.8" />
</svg>
var s = Snap("#robot");
var leftPupil = s.select("#left-pupil");
leftPupil.animate({
r: 50,
fill: "lightgreen"
}, 1000);
如果发生以下情况,您可以选择这种动画方式:
- 无论如何,您都在使用JavaScript工作,也许您的动画与通过JSON等接收的数据有关。
- 无论如何,您都需要JavaScript,因为您需要逻辑或数学或其他实际上仅在那儿可能发生的事情。
- 您对JavaScript 为您解决一些bug感兴趣。
- 动画的范围很大/很复杂,您需要JavaScript可以提供的抽象和组织。
演示版
在CodePen上查看 Chris Coyier ( @chriscoyier )的Pen SVG动画制作的三种方法 。
您最终如何使用SVG不会影响您的选择吗?
是的 如果您使用的是SVG-as- <img>,则将无法使用其他样式表中CSS动画。 但是,您是SMIL动画可以在某些浏览器中运行(在撰写本文时,Chrome是,Firefox否)。 如果SVG文件中的嵌入式CSS可以工作或将有一天工作,我不会感到惊讶。 JavaScript,可能不是。
如果您在CSS背景图片中使用SVG,我想这与上面的故事类似。
如果您使用内联<svg>
,则所有可能性对您都是开放的。
如果您通过object
或iframe
使用SVG,则需要将脚本/样式直接嵌入SVG中才能正常工作。
翻译自: https://css-tricks.com/video-screencasts/135-three-ways-animate-svg/