简介:

GSAP的全名是 GreenSock Animation Platform

一直发展到今天已经是 3.x 版本,这是一个适用于现代浏览器的专业 Javascript 动画库

超过1100万个网站,其中包括超过50%的获奖网站!主要品牌都使用 GSAP

官网地址如下:

GSAP 3 Is Available Now! – Blog – GreenSock

Vue里面 基于侦听器的动画,也是借助于GSAP。

GSAP 优点:

  • 疯狂的快
  • 异常的强大
  • 兼容性好
  • ······

缺点:

  • 动画过多

GSAP基本使用

官网地址: https://greensock.com/gsap/

文档地址: https://greensock.com/get-started/

核心语法

GSAP 远在 flash 繁荣的时代就存在,所以核心是补间动画

GSAP则是补间动画,主要有4个分类:

  • gsap.to()从元素的起始值开始,动画到我们指定的结束值
  • gsap.from() 反过来。 我们指定起始值,动画到结束值
  • gsap.fromTo() – 我们定义起始值和结束值。
  • sap.set() – 立即设置属性 (无动画)

常见属性

GSAPCSS解释
x: 100transform:translateX(100px)水平移动
y: 100transform:translateY(100px)垂直移动
xPercent:-50transform:translateX(-50%)水平移动(元素宽度的百分比)
yPercent:-50transform:translateY(-50%)水平移动(元素高度的百分比)
rotation:360transform:rotate(360deg)旋转(度)
scale: 2transform: scale(2, 2)增大或减小大小
delay: 1动画延迟时间单位是秒
duration : 3动画持续时间 单位是秒
repeat动画重复多少次
yoyo悠悠球如果为true,则补间每隔一次重复将朝相反的方向运行。(像溜溜球)默认值:假
easeease
ease交错,每个目标的动画开始之间的时间(以秒为单位)(如果提供了多个)


时间线 timeline

时间线是创建易于调整、有弹性的动画序列的关键。将补间添加到时间线时,默认情况下,补间将按添加顺序依次播放简单理解: 时间线可以让多组动画编排动作,从而控制整个序列。

位置参数

指定一个参数来构建动画时机时间的序列,简单理解就是多组动画之间的执行时机

let tl = gsap.timeline()// 从时间轴的1秒开始(绝对)简单理解,1秒钟之后触发tl.to(".green",{ x: 600,duration: 2 },1);// 在上一个动画的开始处插入,简单理解,上个动画开始,我也开始tl.to(".purple",{ x: 600,duration: 1 },"");// 在时间线结束后1秒插入(间隔) 简单理解: 上个动画结束后1秒我开始tl.to(".orange", { x: 600,duration: 1 },"+=1");// 在时间线结束后1秒插入(间隔) 简单理解:上个动画结束前1秒,我就开始// tl.to(".orange",{ x: 600,duration: 1},"-=1");