关于svg:SVG-动画开发实战-????-使用-GreenSock-制作动画

???? 应用 GreenSock 制作动画

为什么抉择 GSAP？

先来看一个 GSAP （GreenSock Animation Platform）介绍，以下动画应用 GSAP 编写：

https://codepen.io/GreenSock/…

的确现在有很多种办法让 Web 页面活泼起来，我在《SVG 根本介绍》章节也比照过一些优良的 SVG 相干类库，为什么我抉择应用 GSAP 编写 SVG 动画，咱们看一张 GSAP 性能全景图

相比之下 GSAP 有以下长处：

• 简直能够让任何元素动起来，包含 SVG
• 语法简洁，容易上手
• 领有操作时间轴性能，对制作线性动画有很大帮忙
• 样例丰盛，在 CodePen 上有大量 Demo
• 插件功能强大，包含 DrawSVG、MorphSVG 等
• 性能良好，兼容性良好

GSAP 到底有什么用呢，其实 GSAP 的外围性能是提供了操纵元素属性的能力，更有功能强大的插件辅助，会让简单动画变的可操控。

开始应用 GSAP

上面应用一个小例子解说 GSAP

筹备 SVG

咱们在 Sketch 里绘制了一个圆形，导出优化后的 SVG 代码如下：

<svg width="960px" height="240px" viewBox="0 0 960 240">
  <g id="shape-page">
    <circle id="circle" fill="#60CCFD" cx="120" cy="120" r="80"></circle>
  </g>
</svg>

简略位移

// 形容了使指标 circle 在两秒外向 x 轴位移 320px
gsap.to('#circle', {
  x: 320,
  duration: 2
})

https://codepen.io/xiaoluobod…

如果你也相熟应用 CSS 开发动画，那么上面列表会帮忙你了解 gsap.to 中属性的作用

x: 100 // transform: translateX(100px)
y: 100 // transform: translateY(100px)
z: 100 // transform: translateZ(100px)
scale: 2 // transform: scale(2)
scaleX: 2 // transform: scaleX(2)
scaleY: 2 // transform: scaleY(2)
scaleZ: 2 // transform: scaleZ(2)
skew: 15 // transform: skew(15deg)
skewX: 15 // transform: skewX(15deg)
skewY: 15 // transform: skewY(15deg)
rotation: 180 // transform: rotate(180deg)
rotationX: 180 // transform: rotateX(180deg)
rotationY: 180 // transform: rotateY(180deg)
rotationZ: 180 // transform: rotateZ(180deg)
perspective: 1000 // transform: perspective(1000px)
transformOrigin: '50% 50%' // transform-origin: 50% 50%

是不是看起来像是 CSS transform 属性的简写，没错，很容易上手应用对不对。

缓动动画

GSAP 提供了内置的缓动函数，默认 ease 属性值为: 'power1.out' ，比方咱们让 circle 像球一样弹起静止。只需设定属性 ease: 'bounce'

https://codepen.io/xiaoluobod…

GSAP 还反对这些缓动函数： https://greensock.com/ease-visualizer/

工夫轴线

gsap.timeline() 是 GSAP 提供的另一个神器，领有操纵工夫轴线的能力，会让动画有序进行，在咱们须要管制一组动画的时候十分有用

比方让多个 circle 有序挪动：

https://codepen.io/xiaoluobod…

工夫管制

gsap.timeline 提供了第三个参数，这个参数能够让动画运行工夫变得可控，让动画变得更生动有趣。

上面例子时间轴动画时长为 duration: 0.66 ，上面让第 2、3、4 个 circle 应用绝对工夫，减去动画时长，那么制作了多个 circle 一起静止的成果。

https://codepen.io/xiaoluobod…

工夫交织

gsap.to 提供了一个用于管制工夫交织的属性：stagger ，这个属性同样是对动画工夫的管制，比方让多个 circle 同时以 0.2s 的工夫错开进行Y轴位移静止

https://codepen.io/xiaoluobod…

GSAP 的简略应用介绍就到这里，它的性能远不止这些。还有一些弱小的插件，能写出更简单、更有意思的动画成果。等你去尝试。

GSAP Tools

GreenSock Animation Platform 提供了一些优良的助手/调试工具，有助于咱们在开发动画时候进行调试。这些工具有一些须要退出 Club GreenSock 能力应用

Ease Visualizer

GSDevTools

GSAP Docs

参考

• https://greensock.com/get-started/

对于

本文是《SVG 动画开发实战》 系列文章第四章。

Notion 版本

小册是在 Notion 上实现撰写的，所以我保留了 Notion 的分享版本，你也能够点击这里查看。

GitHub 版本

小册提供了 GitHub 版本的在线浏览体验，传送门

微信公众号版本

关注我的技术公号，同样也能够找到此小册系列，目前在更新中。。。