干货来袭！腾讯T4大佬，十分钟教你用svg做出精美的动画

前言

经常在Codepen上看到大侠们用SVG画出不可思议的动画，我一直很好奇他们是怎么运作的，总觉得这需要对SVG有足够透彻的了解，并且自己画出那些SVG图案，才有办法让他动起来。

但其实不然，今天教大家一个简单的小技巧，让你快速实现一个svg动画！

打开Codepen，点击界面中的build按钮，就可以使用动画构建一个房子，并且让它升起寥寥炊烟！

 

寻找精美的svg图案

既然自己画不出来，那我们就去找现成的库，svg库有很多，如Flaticon、iconfont、Iconfinder或icons8等网站会提供很多免费的svg图案。

 

分析svg图案

打开devtool观察 svg 图案，你会看到下面的结果：

 

element里头path跟circle都是svg的DOM元素，分别表示svg图案内的线条与圆形。

举个例子：

<path d="M 10 25
         L 10 75
         L 60 75