如何使用svg画出精美动画-mile米乐体育

小编给大家分享一下如何使用svg画出精美动画，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

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

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

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

寻找精美的svg图案

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

分析svg图案

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

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

举个例子：

上面代码中的d的内容：m代表将笔移动到(10, 25)，接着l画一条线到(10, 75)，最后回到起点画出一个三角形。

通过devtool，我们可以看到每个path对应图案的哪个部分：

这时候应该形成思路，既然我们可以知道每个元素对应到图案的哪个部分，我们就可以针对想要套上动画的dom 元素来操作！

timelinelite/timelinemax 工具

如果单纯通过id、classname 来使用 css 或javascript 自行处理动画，难度还是颇高，更重要的是，要耗费大量的时间

所以我们得借用工具，timeline(lite|max)跟tweenmax是知名的greensock animation platform（简称gsap）推出的可创建时间轴（timeline）作为动画或其他时间轴的容器，这使得整个动画控制和精确管理时间变得简单。

gsap甚至为我们提供了ease visualizer来展示每种ease function的效果，更顺带附上代码：

演示地址：https://codepen.io/johnyu243/pen/jovbmzx

简单几句代码就能达到如下效果：

上手gsap

gsap的api功能十分强大，还有相关社区：米乐app官网登录官网文档、论坛、timelinemax中文手册

在一开始的房子构建例子中，我主要使用的是timelinemax的from与staggerfrom，这两个api只需要设定初始值，他会在指定时间内将补间动画完成：

tl.from("#house>rect:nth-child(24)",1,{ scalex:0, transformorigin:"center", ease:power2.easeout })

这一步我们将css selector #house > rect:nth-child(24) 这个元素，从scalex为0开始，以center(中心)为变形起点，利用power2.easeout，在一秒内回复到原始状态，并执行补间动画。

.staggerfrom( ["#house>path:nth-child(34)","#house>path:nth-child(32)"], 0.8, { scaley:0, transformorigin:"bottom", ease:bounce.easeout, stagger:0.2 }, 0, "scene1 =0.5" )

与from相似，只是staggerfrom可以一次放入多个css selector，用stagger这个属性来设置数组中的selector要以怎样的时间差出现。

详细api参数可以参考官方文档

接着回到我们的svg，在devtool的帮助下，要取出svg内部元素的 css selector 非常容易，在element面板中找到对应的dom元素点击右键，选择 copy -> copy selector，就可以直接复制到该元素的css selector：

现在我们能取得svg 中任意部分的css selector，也知道怎么用gsap api 来进行补间动画，现在是时候将其结合起来！

我们先调整下基本布局，一般在空白html内直接放入svg时，图案大多会紧靠页面左上角，我们可以套用个margin: 0 auto将其置中，看起来会顺眼一些，你也能额外加些padding。我们在页面添加一个按钮来调用动画：

 build!  

接着我们使用timelinemax提供的staggerfrom函数，利用devtool将滑板车的轮子部分找出来，复制它们的css selector，放入staggerfrom函数参数中，设定x与y轴的scale都从0开始，由center增长，采用bounce.easeout的ease function ，而四个selector间以stagger: 0.2的属性值作为补间动画出现的时间差：

consttl=newtimelinemax(); tl.staggerfrom( [ "#capa_1>g>path:nth-child(1)", "#capa_1>circle:nth-child(7)", "#capa_1>path:nth-child(6)", "#capa_1>circle:nth-child(5)" ], 1, { scaley:0, scalex:0, transformorigin:"center", ease:bounce.easeout, stagger:0.2 } )

简单几行代码，就能让我们的滑板车动起来！

演示地址：https://codepen.io/johnyu243/pen/ponjnzz

补间是一个术语，用于描述逐帧序列，有时也称为"中间"。 在那个地方，一个动作导致下一个动作产生一个流畅的动作。

完善动画

你可以把timelinemax想像成时间轴，动画按指定顺序执行，而staggerfrom则可以同时让多个dom元素以微小时间差的顺序启动，另外我们还可以设置一些flag来指定要等到哪几个动画完成后，才接续其他动画。

最后，发挥自己的创意，使用各种api打出一套组合拳：

演示地址：https://codepen.io/johnyu243/pen/ylvyvey

以上是“如何使用svg画出精美动画”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！