[译]SVG动画简介

svg-animation
你可以把这篇文章看做通往精通SVG动画之路的第一步,里面的链接资源也是很好的学习资料。所以赶紧收藏本文然后开始你的精通SVG之旅吧。

SVG元素是一种特殊的DOM元素,语法模仿了标准的HTML元素。SVG元素有着独有的标签,属性和行为,能够让它很容易的定义各种形状——能够直接在DOM中创造图像,因此能够被JavaScript和CSS操作。

作为初学者,你们可以看看这些SVG才能实线的效果:

在此有三个使用SVG创建图像而不是用图片(PNG, JPET, etc)的好处:

  • 首先SVG可以被压缩的很好。
  • 其次,SVG可以在无损的情况下缩放到任何尺寸,在桌面和移动设备屏幕上看起来都很锐利。
  • 最后,你可以在运行的时候(使用JavaScript,CSS)只让SVG图像的一个组件动画。

创造SVG图像,你即可以直接使用其DOM元素呈现,也可以使用你喜爱的图像编辑软件绘画然后导出SVG文件拷贝它的代码粘贴到HTML中即可。对于初学者,可以看这篇很棒的文章:Working With SVG

SVG动画

无论jQuery还是CSS transitions都没提供SVG动画样式属性(位置,尺寸属性)的完整支持。在IE 9 中不容许CSS transitions动画SVG元素,在IE所有版本中也不能使用CSS transforms动画SVG元素。

因此,要动画SVG元素,你要么使用专门的SVG操控库,或者使用支持SVG的JavaScript动画库。前者最有名的是Snap.svg,后者则是Velocity.js,Velocity.js轻量而且跨浏览器支持良好,是wen动画的绝佳选择,本文的例子就使用的事这个动画库。

在需要动画SVG元素的时候Velocity.js会自动检测,然后无缝的对其施加SVG的特定属性而无需你更改任何代码。

SVG样式

SVG元素只接受少数的几个标准的CSS属性,另外SVG接受一些“表意性(presentational)”,譬如fillxy。这些属性也用来定义SVG如何渲染。通过CSS定义SVG样式和直接在SVG元素上使用这些属性,本身在功能上没什么不同,SVG规范中也很少区分讨论。

下面的例子中SVG的circle元素和紧接着的SVGrect元素两者都包含在一个声明性(mandatory)的SVG容器元素中(这样也就告诉浏览器里面包含的是SVG标记而不是HTML标记)。请注意,颜色是如何通过CSS定义,而尺寸又是如何通过属性定义。

<svg version="1.1" width="300" height="200" xmlns="http://www.w3.org/2000/svg">  
    <circle cx="100" cy="100" r="200" style="fill: blue" />
    <rect x="100" y="100" width="200" height="200" style="fill: blue" />
</svg>  

(还有一些其他的SVG元素,譬如ellipselinetext等,更多可以查看MDN)。

SVG样式属性有三大类:color,gradient,dimensional和storke。查看SVG元素的CSS动画属性和表现属性的完整列表可以访问Velocity.js的SVG animation documentation

CSS属性包含fillstrokefill相当于background-color,而stroke也就相当与border-color。使用Velocity,这些属性的动画的方式和标准的属性并无二致。

// Animate the SVG element to a red fill and a black stroke
$svgElement.velocity({ fill: "#ff0000", stroke: "#000000" });

// Note that the following WON'T work since these CSS properties are NOT supported by SVG:
$svgElement.velocity({ backgroundColor: "#ff0000", borderColor: "#000000" });

gradient渐变属性包含stopColorstopOpacityoffset。用他们你可以构造出任何你想要的渐变效果。了解更多可以查看MDN’s SVG Gradient Guide

dimensional维度(尺寸,空间)属性描述了SVG元素的位置和尺寸。这些属性和SVG的形状元素有些轻微的不同。

// Unlike HTML, SVG positioning is NOT defined with top/right/bottom/left, float, or margin properties
// Rectangles have their x (left) and y (top) values defined relative to their top-left corner
$("rect").velocity({ x: 100, y: 100 });

// In contrast, circles have their x and y values defined relative to their center (hence, cx and cy properties)
$("circle").velocity({ cx: 100, cy: 100 });
// Rectangles have their width and height defined the same way that DOM elements do
$("rect").velocity({ width: 200, height: 200 });

// Circles have no concept of "width" or "height"; instead, they take a radius attribute (r):
$("circ").velocity({ r: 100 });

Stroke笔画属性是特殊的SVG的样式属性,和CSS中的border类似,但不同的两点式,可以创造自己的笔画Strokes,还可以动画笔画。用例包括书写效果,和逐渐显露等。更多SVG Stroke动画可以查看SVG Line Animation

将这些放到一起,使用Velocity.js的Demo:http://codepen.io

位置属性 vs. CSS Transforms

你或许想知道使用x/cx y/cy位置属性和CSS transforms(譬如,translateX,translateY)的区别在哪里?答案便是浏览器的支持,IE(包括IE11)不支持SVG元素的CSS transforms。而对于硬件加速来说,所有的浏览器(包括IE)都默认支持位置属性的硬件加速——因此,对于SVG的动画性能,SVG属性和CSS属性相等。

总结:

// The x and y attributes work everywhere that SVG elements do (IE8+, Android 3+)
$("rect").velocity({ x: 100, y: 100 });

// Alternatively, positional transforms (such as *translateX* and *translateY*) work everywhere EXCEPT IE
$("rect").velocity({ translateX: 100, translateY: 100 });

深入了解

通过本篇,再配合MDN’s SVG guide你便可以更好的使用SVG啦!


英文原文:The Simple Intro to SVG Animation

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus