摘自:前端大全
以下文章来源于前端进阶之路,作者三余
前言
经常在 Codepen 上看到大侠们用 SVG 画出不可思议的动画,我一直很好奇他们是怎么运作的,总觉得这需要对 SVG 有足够透彻的了解,并且自己画出那些 SVG 图案,才有办法让他动起来。
但其实不然,今天教大家一个简单的小技巧,让你快速实现一个 svg 动画!
打开 Codepen
,点击界面中的 build
按钮,就可以使用动画构建一个房子,并且让它升起寥寥炊烟!🏭
示例: https://codepen.io/johnYu243/pen/bGBVEwv
寻找精美的 svg 图案
既然自己画不出来,那我们就去找线程的库, svg 库有很多,如 Flation、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 的效果,更顺带附上代码:
https://codepen.io/johnYu243/pen/jOVbMzX
上手 GSAP
GSAP 的 API 功能十分强大,还有相关社区:官方文档、论坛、TimelineMax中文手册
在一开始的房子构建例子中。我主要使用的是 TimelineMax 的 from 与 sferFrom ,这两个API只需要设定初始值,他会在指定时间内将补间动画完成:
t1.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 ,用 agger
这个属性来设置数组中的 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="animateBack()"> 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 t1 = new TimelineMax();
t1.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 打出一套组合拳: