相信大家都见到过这样神奇的技术: 一副线条构成的画能自动画出自己. 非常的酷. Jake Archibald 是这种 SVG 技术的首创者, 并且写了一篇非常好的文章来描述它是如何实现的. Brian Suda 也在 24 Ways 网站上讨论过它 http://24ways.org/2013/animating-vectors-with-svg/ . Polygon 使用它在一篇设计方面的文章里创造出了非常神奇的效果. Codrops 也做出了一些非常漂亮的例子.
其实我没有什么好增补的, 只是想把这种技术说的更明白些, 所以, 在这里我要用我的方式把这种技术再讲解一遍.
1. 你有一个 SVG 图形
2. 这个图形必须要有一个线条 (stroke) 属性
3. 线条可以是虚线
我们可以用 Illustrator 制作, 也可以用编程实现. 我们用 CSS 来设置这些路径的样式(假定我们这里是 inline SVG, 或通过一个 < object>), 把它们变成虚线形式.
- <svg ...> <path class="path" stroke="#000000" ...> </svg>
- .path {
- stroke-dasharray: 20;
- }
这是让虚线里的每个小线段长度为 20px.
4. 可以让虚线小段的长度变得更长....
- .path {
- stroke-dasharray: 100;
- }
5. 我们还可以给我们的线条设置 "offset" 偏移量, 这样会导致虚线里的小线段的位置发生移动.
当我们动态设置图形中线条的 "offset" 值时, 可以看到这个效果:
可以这样简单的实现:
- .path {
- stroke-dasharray: 100;
- animation: Dash 5s linear;
- }
- @keyframes Dash {
- to {
- stroke-dashoffset: 1000;
- }
- }
6. 想象, 当虚线的小线条足够长, 超过图形的整个线条长度时
没有什么变化, 整个图像看起来完全不是虚线. 你只需要将 stroke-dasharray 属性设置的足够长, 超过整个线条的长度.
7. 现在给线条设置偏移量, 让它不再覆盖整个图形.
这样你就看不见图形了.
8. 现在动态的慢慢将线条的偏移量设置回归到 0
如果通过 CSS, 你需要将 animation 属性设置成 forwards, 这样整个动画就会停止在它的最终状态.
- .path {
- stroke-dasharray: 1000;
- stroke-dashoffset: 1000;
- animation: Dash 5s linear forwards;
- }
- @keyframes Dash {
- to {
- stroke-dashoffset: 0;
- }
- }
- Tada!
实例演示
See the Pen http://codepen.io/chriscoyier/pen/bGyoz by Chris Coyier (@chriscoyier http://codepen.io/chriscoyier ) on CodePen http://codepen.io/ .
为什么要用 JavaScript?
大部分你看到的 SVG 线条动画都使用了 JavaScript. 这是因为在现实情况中你很难知道线条有多长. 我们这里设置的是 1000, 是因为它碰巧是 1000.
用 JavaScript 获取长度值的写法是这样的:
- var path = document.querySelector('.path');
- var length = path.getTotalLength();
然后你就可以随便使用这个值了. 文本顶部链接的那些文章讲的都比本文透彻, 你最好还是参考一下那些文章. 我只想简单的讲一下这种技术方法, 希望它能给你一些启示.
(英文: How SVG Line Animation Works.)
来源: http://www.webhek.com/post/how-svg-line-animation-works.html