SVG线条(stroke)动画实现原理

2016-05-10阅读(1520)评论(0)

W3Cways.com 微信公众号

相信大家都见到过这样神奇的技术:一副线条构成的画能自动画出自己。非常的酷。Jake Archibald是这种SVG技术的首创者,并且写了一篇非常好的文章来描述它是如何实现的。Brian Suda也在24 Ways网站上讨论过它。 Polygon使用它在一篇设计方面的文章里创造出了非常神奇的效果。Codrops也做出了一些非常漂亮的例子

1. 你有一个SVG图形

dashed-shape

2. 这个图形必须要有一个线条(stroke)属性

svg-path

3. 线条可以是虚线

我们可以用Illustrator制作,也可以用编程实现。我们用CSS来设置这些路径的样式(假定我们这里是inline SVG,或通过一个<object>),把它们变成虚线形式。

.path {
  stroke-dasharray: 20; //设置虚线里的每个小线段的长度为20px
}

dashed-shape

4. 虚线里的每个小线段可以变的更长

.path {
  stroke-dasharray: 100;//设置虚线里的每个小线段的长度为100px
}

long-dashes

5. 我们还可以给stroke设置”偏移”,也就是移动这些小线段

当给这些小线段增加点动画效果的时,如下图:
animate-stroke

.path {
  stroke-dasharray: 100;
  animation: dash 5s linear;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}

6. 想象,当虚线的小线条足够长,超过图形的整个线条长度时

其实没有什么变化,整个图像看起来完全不是虚线。你只需要将 stroke-dasharray 属性设置的足够长,超过整个线条的长度。

7. 现在给线条设置偏移量,让它不再覆盖整个图形

这样你就看不见图形了。

8. 我们定义一个动画,慢慢将线条的偏移量设置回归到0

animate-stroke-full
如果通过CSS,你只需要将animation属性设置成 forwards,这样整个动画就会停止在它的最终状态。

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Demo

为什么要用JavaScript?

大部分你看到的SVG线条动画都使用了JavaScript。这是因为在现实情况中你很难知道线条有多长。我们这里设置的是 1000,是因为它碰巧是1000
用JavaScript获取长度值的写法是这样的:

var path = document.querySelector('.path');
var length = path.getTotalLength();

然后你就可以随便使用这个值了。文本顶部链接的那些文章讲的都比本文透彻,你最好还是参考一下那些文章。我只想简单的讲一下这种技术方法,希望它能给你一些启示。

(英文原文:How SVG Line Animation Works)

转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » SVG线条(stroke)动画实现原理

分享到:更多 ()

Web前端开发-Web前端工程师--Web前端学习之路

联系我们