大家好,在我们谈论网页动画时,我们第一时间会想到用jQuery的animate()方法或者CSS3的animation和transition。今天的这篇文章,我将给大家推荐另一个可选方案,一款专业的Web动画库GSAP,通过这款工具你能做出绚丽复杂的动画效果,通过本篇文章的学习,你将会学习到什么是GSAP,以及相关的入门基础知识。
一、什么是GSAP?
GSAP全称是GreenSock Animation Platform,是一个JS动画框架。
GSAP有两个版本,一个为ActionScript 版本,已经在flash平台上运行多年,是一个“轻量级”、“高效率”、强大的2D动画引擎,一直深受ASer(学ActionScript的人都叫自己 ASer)的欢迎,学AS的人,没有一个说是不知道、没使用过GSAP的。
GSAP JS顾名思义是指GSAP的js版本,GSAP JS是GreenSock公司新出的一个2D动画引擎,可以说是AS版本的移植版,虽然功能还不够AS版本的完善,但是一样是非常强大、高效、好用的,据说它的运行速度是JQuery的20倍(动画方面的性能)。
有兴趣的可以访问官网,查看更多相关资料:https://greensock.com/
二、 GSAP的特点
运行速度快,GSAP专注优化动画的性能,尽量接近与CSS一致的高性能。
轻量与模块化。将功能进行拆分,让核心框架保持轻量,TweenLite包非常小,同时提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块,可以按需使用,无需依赖。
零插件依赖,你不需要引入其他第三方插件。
灵活控制。不用受限于线性序列,可以重叠动画序列,你可以通过精确时间控制,灵活地使用最少的代码实现动画。
任何对象都可以实现动画。
说了这么多我们来看官方的视频介绍吧(英文原声视频,没有字幕翻译,请大家多多包涵),顺便练练英语听力。
三、 如何安装与引用?
GSAP既然这么好,我们如何安装和引用呢?
去官网下载核心库的JS文件