动画的三种方式，你知道哪些?（三种动画方式包括）

动画svg是有点独特的，因为有三种截然不同的方式可以接近动画它。

#1.用css@keyframes动画

svg元素可以以css为对象，并使用css进行样式化。意思是，您可以通过@keyframes来应用动画。就像这样：

<svg viewBox="0 0 127.9 178.4">
 <path id="left-leg" d="M37.6,138.8c0 ... " /></svg>

.left-leg {
 function fill() { [native code] }: 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="function fill() { [native code] }" dur="5000ms" to="#f06d06" function fill() { [native code] }="freeze" /> 
 </path></svg>

这是个大教程所有这些都是Smil。

#如果.你可以选择这样的动画。

• 您需要动画css不能的属性，比如

  形状本身

  。

• 您需要其他smil特定特性，比如在没有手动同步持续时间/延迟的情况下启动动画。或者交互的东西，比如在点击时启动动画。

在这里小编给前端小白推荐一个前端学习路线，和一些学习资料

#3.用javascript动画

使用JavaScript，您可以访问请求动画框架(或其他循环)之类的东西，因此您可以通过快速变化的属性值来动画。还有一些框架可以用来与svg一起工作，它通常拥有内置动画的内容。或者是与svg一起工作的动画框架。像n.SnapSVG，n.GreenSock，n.SVG.js，或Velocity.js。

下面是一个例子：

<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，function fill() { [native code] }: "lightgreen"}， 1000);

#如果.你可以选择这样的动画。

• 无论如何，您都在javascript中工作，也许您的动画与您所接收到的数据和类似的数据有关。

• 无论如何，您需要javascript，因为您需要逻辑或数学或者其他真正可能存在的东西。

• 您对javascript感兴趣

  为你解决一些错误

  。

• 您的动画的范围相当大/复杂，您需要抽象和组织javascript可以提供。

你最终不会使用svg影响你的选择吗？

的确是。如果您使用SVG-as-，您将无法使用来自另一个样式表的CSS动画。但是，SMIL动画会在一些浏览器中工作(在撰写本文时，Chrome是，Firefox No)。如果svg文件中嵌入的css能够工作或某天工作，我不会感到惊讶。javascript也许不是。

如果你在css背景-图片中使用svg，我想这是类似于上面的故事。如果您使用内联<svg>所有的可能性都向你敞开。如果您使用svg通过object或iframe您需要将脚本/样式嵌入到svg中，以便它能够工作。