css svg做动图,关于css:十分钟教你用svg做出精美的动画

最新推荐文章于 2024-08-23 10:56:54 发布

Byte DIY

最新推荐文章于 2024-08-23 10:56:54 发布

阅读量1.1k

点赞数

文章标签： css svg做动图

前言

常常在Codepen上看到大侠们用SVG画出不堪设想的动画，我始终很好奇他们是怎么运作的，总感觉这须要对SVG有足够透彻的理解，并且本人画出那些SVG图案，才有方法让他动起来。

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

关上Codepen，点击界面中的build按钮，就能够应用动画构建一个房子，并且让它升起寥寥炊烟！????

codepen

寻找精美的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的成果，更顺带附上代码：

codepen

简略几句代码就能达到如下成果：

上手GSAP

GSAP的API性能非常弱小????，还有相干社区：官网文档、论坛、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

"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!

#Capa_1 {

margin: 0 auto;

display: block;

width: 256px;

height: 100%;

}

接着咱们应用TimelineMax提供的staggerFrom函数，利用devtool将滑板车的轮子局部找进去，复制它们的CSS Selector，放入staggerFrom函数参数中，设定x与y轴的scale都从0开始，由center增长，采纳Bounce.easeOut的ease function ，而四个Selector间以stagger: 0.2的属性值作为补间动画呈现的时间差：

const tl = new TimelineMax();

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)"

{

scaleY: 0,

scaleX: 0,

transformOrigin: "center",

ease: Bounce.easeOut,