初探GSAP

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

时至今日在Web中开发动效有很多种方式,有纯CSS的方式(AnimationsTransitions),也有Web Animation APISVG Animation,还有很多优秀的JavaScript库(比如,Anime.jsKUTE.jsMo.js等)。在WebGL方面有Three.jsPixiJSBabylon.jsPlayCanvas等。除此之外,业内还有一个制作动画非常出色的平台,那就是GSAPGreenSock Animation Platform的简称)。在接下来的日子中,将会不间断的发布一些关于GSAP制作动效相关的教程,今天这篇文章,主要和大家先探讨一些GSAP的基础知识。

W3cplus小站上关于Web动画相关的教程有很多,如果你对动画其他方面的知识感兴趣的话,可以猛击这里进行了解

GSAP是什么?

GSAP是GreenSock提供的一个制作动画的成熟的JavaScript库,该库源于Flash的动画。这也意味着GreenSock背后的人对Web动画了如指掌,这个库已经存在很长的时间了,而且不会很快消失。

GSAP中有很多工具和插件,我们可以利用它们来快速开发Web动画和快速处理开发Web动画遇到的任何挑战。除了GSAP具有强大的特性、工具和插件之外,而且学习曲线也相对较浅,因为它在所有不同的实现和插件中使用了直观且一致的语法。此外,GSAP论坛还提供了很棒的文档、教程等。

为什么选择GSAP?

文章开头就提到过,在Web中构建中动画效果有很多种方式,也有很多优秀的库或工具,那么为什么要选择GSAP呢?那是因为,GSAP有着下面几个明显的特征:

  • 速度快: GSAP专门优化了动画性能,使用实现和CSS一样的高性能动效
  • 轻量和模块化: 模块化与插件式的结构保持了GSAP核心引擎的轻量,TweenLite包非常的小。GSAP还提供了 TweenLiteTimelineLiteTimelineMaxTweenMax等功能动画模块,在使用的时候可以按需加载
  • 没有依赖: 使用GSAP开发动效时不需要依赖于任何第三方库或插件
  • 灵活控制: 不用受限于线性序列,可以重叠动画序列,你可以通过精确时间控制,灵活地使用最少的代码实现动效
  • 任何对象都可以实现动画,只要能运行JavaScript脚本的地方就可以使用GSAP

GSAP也非常的灵活,可以适用于你给它的任何东西。也就是,GSAP可以让下面这些东东都动起来:

  • CSS: CSS中的2D3D方面的transformcolorwidthopacityborder-radiusmargin等,几乎所有的CSS属性都可以
  • SVG: SVG中的一些属性,比如viewBoxwidthheightfillstrokecxropacity等,而且借助像 MorphSVGDrawSVG这样的GSAP插件,还可以实现一些高级的效果
  • 任何数值,比如<canvas>的对象,3D动画场景中的摄像机位置和滤镜值

一旦你学习了GSAP相关的基本语法,就能够在任何可运行JavaScript脚本的地方使用GSAP。如果你也比较关注DOM元素的CSS属性的动画,在使用GSAP时,还可以在React、Vue等前端框架中使用。

GSAP核心模块

GSAP有几大核心模块,它们是:

  • TweenLite:GSAP的基础,一个轻量级和快速的HTML5动画库
  • TweenMax:TweenLite的扩展,除了包括TweenLite本身之外,还包括TimelineLite、TimelineMax、CSSPlugin、AttrPlugin、RoundPropsPlugin、DirectionalRotationPlugin、BezierPlugin和EasePack
  • TimelineLite:一种轻量级的Timeline,用于控制多个Tween和(或)其他Timeline
  • TimelineMax:一个增强版的TimelineLite,它提供了额外的、非必要的功能,如repeatrepeatDelayyoyo等等

在实际使用的时候,如果你所需要的功能不是过强,可以直接使用GSAP自己内置的API(TweenLite),但如果你所需要的功能过强的话,可以根据自己的需要加载相应的功能模块。在后面介绍GSAP使用的时候,我们会详细介绍这方面。

值得注意的是,GSAP除了提供上述所列的功能模块之外,还提供了一些额外的功能(也有付费的额外功能),比如使用 DrawSVGPlugin创建线条绘制的动画效果,MorphSVHPlugin可以将一个SVG形状变形为另一个,以及其他功能。

GSAP如何工作?

接下来,我们来通过真实的实例来向大家阐述GSAP是如何工作的。

加载GSAP

如果你要使用GSAP来制作Web动画,那么首先要加载GSAP。加载GSAP的方法有很多种,其中最简单的就是加载一个CDN的地址:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js"></script>

如果你还需要一些其他的功能,还可以点击这里,在CDN选项中选择自己所需要的功能模块

这个时候会多加载相应功能模块或插件的JavaScript脚本文件:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/CSSRulePlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/EaselPlugin.min.js"></script>

这种方式和其他制作动画效果的JavaScript库相似。这样一来,就可以在你的页面中使用GSAP来开发动效了。

如果你是使用像React或Vue这样的前端框架来开发Web应用或Web页面的话,可以使用NPM或Yarn来安装:

npm install gsap

安装完gsap之后,也可以在这里的“Modules/NPM”选项中选择所需要的插件和功能模块:

然后将对应的代码复制到要使用GSAP的页面或组件中:

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/animation/GSAP-for-beginner.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部