共计 2683 个字符,预计需要花费 7 分钟才能阅读完成。
前言
常常在 Codepen
上看到大侠们用 SVG 画出不堪设想的动画,我始终很好奇他们是怎么运作的,总感觉这须要对 SVG 有足够透彻的理解,并且本人画出那些 SVG 图案,才有方法让他动起来。
但其实不然,明天教大家一个简略的小技巧,让你疾速实现一个 svg 动画!
关上 Codepen
,点击界面中的build
按钮,就能够应用动画构建一个房子,并且让它升起寥寥炊烟!????
codepen
寻找精美的 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
L 10 25">
下面代码中的 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
},
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。咱们在页面增加一个按钮来调用动画:
<!--html part-->
<button onclick="animateBike()"> Build! </button>
<!--css part-->
<style>
#Capa_1 {
margin: 0 auto;
display: block;
width: 256px;
height: 100%;
}
</style>
接着咱们应用 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)"
],
1,
{
scaleY: 0,
scaleX: 0,
transformOrigin: "center",
ease: Bounce.easeOut,
stagger: 0.2
}
)
简略几行代码,就能让咱们的滑板车动起来!
codepen
补间是一个术语,用于形容逐帧序列,有时也称为 "两头"。在那个中央,一个动作导致下一个动作产生一个晦涩的动作。
欠缺动画
你能够把 TimelineMax 想像成时间轴,动画按指定程序执行,而 staggerFrom
则能够同时让多个 DOM 元素以渺小时间差的程序启动,另外咱们还能够设置一些 Flag 来指定要等到哪几个动画实现后,才接续其余动画。
最初,施展本人的创意,应用各种 API 打出一套组合拳 ????:
codepen
论断????
看到这里,蠢蠢欲动了吗?
总之,我本人感觉蛮乏味的,心愿或多或少对读到这篇文章的人有点帮忙。
最初给大家分享一个很酷的 demo,来自我的文章封面
参考文章 ????
GreenSock Animation Platform
How to Create Beautiful SVG Animations Easily