官方网站

JavaScript | 高手之路

全能课

Best

MasterJS

Made By

Getting Started with GSAP

开始学习

这个视频是官方的英文教程视频需要能科学上网才能正常播放

👇

欢迎！这篇文章中，我们会讲解GSAP的核心基础，通过学习到的知识来让一些HTML元素动起来。如果这些不能满足你，别担心。不管你想要实现什么动画效果，无论你用的什么框架，GSAP都能很好的帮到你！

如果你想学习一些更深入的内容，我们这里有一些链接可供你学习：

还跟着我们继续么？太棒了，让我们开始吧！

什么是“GSAP”

GSAP的核心库包含了所有能帮你创造快速顺滑、跨平台的动画（变化）能力。这也是我们这篇文章所要和大家介绍的。

除了核心库的能力之外，还有很多插件（plugins），目前来说你不需要去学习它们，但是它们能帮到你实现某些特定的动画效果，比如滚动相关的动画，拖拽交互，元素变形动画等等。

创建一个动画

让我们先让一个class为'box'的HTML元素动起来

像这样的一个动画叫做'Tween'，这个tween就是说：“嘿，GSAP，把带有'.box'类名的元素移动到x为200的位置”（就像）

transform: translateX(200px)

让我们来仔细看看这个语法。

我们可以看到这句代码里面，这里有一个方法（method），一个目标（target），还有一个对象数据（variables）。

动画方法们（Methods）

gsap.to()

有四种Tween的动画方式

— 这是一种最常用的tween动画，就是让元素从初始状态变化到目标状态。

— 有点像to方法的逆向变化，就是让元素从目标状态变化到初始状态。

— 需要自己定义两个状态的数据，然后从前一个变化到后一个。

— 直接设置成想要的状态，没有任何过度与动画效果。本质上就是duration为0的 .to 方法

我们来真实体验一下它们！

目标元素（们）

target

接下来我们需要去告诉GSAP去让什么元素变化。GSAP在底层实际上是使用了document.querySelector( )去选择元素，所以你可以用任何css选择器进行元素的选择。或者你也可以直接传入一个DOM元素或者一个数组

// 使用类名或者id名，其实css选择器都可以
gsap.to(".box", { x: 200 });

// 复杂一些的css选择器
gsap.to("section > .box", { x: 200 });

// 一个变量，其实是把获取到的DOM元素直接传进去
let box = document.querySelector(".box");
gsap.to(box, { x: 200 })

// 可以把dom元素放到数组里面一起传入
let square = document.querySelector(".square");
let circle = document.querySelector(".circle");
                                      
gsap.to([square, circle], { x: 200 })

变化数据对象（variables）

这个对象包含着所有动画变化相关的信息。你可以设置任意的你想要发生变化的属性和值，或者一些特殊的会影响动画过程的一些属性，比如duration（动画时长），onComplete（动画完成时触发事件）或者repeat（动画重复的次数）

gsap.to(target, {
  // 传入这样一个对象
  // 这里面包含了需要进行变化的各种样式属性
  x: 200,
  rotation: 360,
  // 以及变化过程的属性设置
  duration: 2
})

什么属性是可以变化的？

GSAP基本上可以说是什么都能变：它没有一个清单规定什么能变，什么不能变。包括像CSS属性、自定义的对象属性，甚至CSS变量和复杂的字符串都可以！我们最常变化的属性其实是transform和opacity。

Transform是动画效果的最好的朋友了。它可以轻松地让元素实现移动、缩放、旋转等等效果。Transform和opacity性能也是非常好的，因为它们不会影响布局（不会引起页面布局重绘），对于浏览器来说是节约性能的。

上面代码中的tween动画使用了 x:200的设置，让元素沿着x轴向右移动了200个像素的距离。

如果可以，尽量使用transfrom相关的属性来实现动画效果，而不是那些会影响到布局的属性，比如 left top margin，这样你能获得更丝滑的动画效果。

在GSAP中Transform的简化用法

你可能比较属性通过CSS的transform属性来设置元素的各种变化：

transform: rotate(360deg) translateX(10px) translateY(50%);

GSAP中对于transform属性的各种变化提供了更简单的设置方式。上面的那种CSS写法在GSAP中可以写成这样

{ rotation: 360, x: 10, yPercent: 50 }

下面这个是Transform最常用相关的一些变化的属性和值的写法

GSAP

CSS

作用

x:100

transform:translateX(100px)

水平移动（px或者svg单位）

y:100

transform:translateY(100px)

垂直移动（px或者svg单位）

xPercent:-50

transform:translateX(-50%)

横向移动

（元素本身宽度的百分比）

yPercent:-50

transform:translateY(-50%)

垂直移动

（元素本身宽度的百分比）

rotation:360

transform:rotate(360deg)

旋转多少度

scale:2

transform:scale(2,2)

元素整体放大或缩小

transformOrigin:"0% 100%"

transform-origin: 0% 100%;

设置旋转中心点

这里设置的旋转中心点是元素左下角

rotationX:360

transform:rotateX(360deg)

rotationY:360

transform:rotateY(360deg)

skewX:45

transform:skewX(45deg)

skewY:45

transform:skewY(45deg)

scaleX:2

transform:scaleX(2)

scaleY:2

transform:scaleY(2)

最好的学习方式就是通过自己动手体验。下面是可以自己体验的代码块，你可以动手修改相关的参数来让小方块动起来！

x: 200, //直接传入数字的话默认就是px单位
x: "+=200" // 通过+=的方式是一种相对值，这里是在元素当前基础上再移动200px
x: '40vw', // 也可以传入其他的CSS中的单位，比如这里用的视口宽度单位 vw
x: () => window.innerWidth / 2, // 也可以用函数，只要能返回数字或者相应的表示属性对应值的字符串
  
rotation: 360 // 旋转如果直接输入数字的话默认是degree的单位，既角度值单位
rotation: "1.25rad" // 如果你要弧度值，就要这么写

还有什么我可以变化的么？

基本上是无所不能的，如果你不确定，你试试就知道了

CSS 属性 properties

Transform, colors, padding, borderRadius，GSAP都能驱动它们发生变化。只是要记得要使用小驼峰的方式来写CSS样式的属性名称，比如background-color要写成backgroundColor。

SVG 属性 attributes

和HTML元素类似，SVG元素也可以通过一些简化的transform属性来进行动画设置。另外，你还可以驱动SVG的其他一些属性，比如width，height，fill，stroke，cx，opacity甚至是SVG的viewBox属性，要实现以上效果你要用一个attr属性，传入一个对象进行设置。

GSAP并不只能变化DOM冤死的属性。你可以变化任何对象的属性，你创造的任意对象都行。

let obj = { myNum: 10, myColor: "red" };
gsap.to(obj, {
  myNum: 200,
  myColor: "blue",
  onUpdate: () => console.log(obj.myNum, obj.myColor)
});

任何数字类型的值、颜色色值或者复杂的包含数字的字符串

在下面的这个案例中，我们通过HTML的canvas元素绘制了一个方块。我们让保存在position对象中的x和y的值发生变化，然后通过动画刷新的函数来更新canvas中绘制的元素的数据，从而达到让这种canvas绘制的元素也能被GSAP驱动。这也是GSAP用来配合Threejs，HTML canvas以及Pixijs的使用的工作逻辑。

特别的属性

调整一个tween动画的表现，我们可以通过一些特别的属性进行设置。实际上，我们已经看过一个了，就是duration

你可以在我们的文档中查看全部的相关属性，但是这里帮大家整理了一些常用的。

属性

作用

duration

动画变化的时长（秒）默认是0.5

delay

动画变化开始前的延迟时长（秒），默认是0.5

repeat

动画的重复次数

yoyo

如果设置为ture，那么动画会在执行完之后再反向执行一次，就像悠悠球的效果，默认是false

stagger

是一个时间的设置（秒），如果有多个元素同时要被驱动，那么当这个属性设置了时间的值之后，元素们会被依次逐个驱动，间隔时长就是这个属性设置的时长

ease

动画过渡的运动曲线的设置，默认是"power1.out"

onComplete

动画结束时执行的回调函数

让我们来看看其中一些属性的一些细节吧…

重复和交替运动

repeat属性可以帮助你实现让动画重复多次的效果。repeat通常可以搭配着yoyo属性使用，它能够衔接多次的重复的行为，让重复的动画效果形成一种来回的完整效果。你可以试着改变下方案例的代码，把yoyo属性改成false，然后看看呈现的效果有什么不同。

延迟Delays

你可以通过delay设置让动画开始前有一定的延迟时间（秒数）。你也可以使用repeatDelay来设置每次重复动画前的延迟时间（秒数）。

到目前为止都不错。但是……这些动画好像不那么让人兴奋。那来看看动画曲线（easeing）吧

Easing 动画曲线/缓动曲线

easing 动画曲线，应该是动态设计中最重要的部分了。一个合适的动画曲线能让元素的动画效果增添许多灵气和个性。

你可以看一看下面这个demo，两个元素，一个使用了动画曲线，一个没有设置任何的动画曲线效果。绿色的方块没有设置动画曲线，它变化的时候是一个恒定的速度，而紫色的这个方块使用了一个叫做'bounce"的动画曲线，你看他的运动过程就更动感了。

gsap.to(".green", { rotation: 360, duration: 2, ease: "none" });

gsap.to(".purple", { rotation: 360, duration: 2, ease: "bounce.out" });

运动曲线的背后，其实是一种数学计算的方式来控制和概念tween动画的变化过程。但是别担心，我们会帮你做好所有的计算！你只需要简单的选择你想要实用的适合你元素的动画曲线就好。

对于大部分的动画曲线，你可以通过指定一个类型来使用。目前有三种类型：'in'、'out'和'inout'。不同的类型，动画曲线的过程是不一样的。

ease: "power1.in"
// start slow and end faster, like a heavy object falling

ease: "power1.out"
// start fast and end slower, like a rolling ball slowly coming to a stop

ease: "power1.inOut"
// start slow and end slow, like a car accelerating and decelerating

最好的理解运动曲线的方式就是自己动手试一试，试一下文档中的这个可视化的曲线工具，看看不同的曲线是如何变化的，这个工具还可以帮你定制特定的动画曲线。

Staggers 错开（依次）动画

通过GSAP能非常轻松实现依次动画的效果。如果你有很多个需要动起来的元素，那么你可以很轻松的给这些元素加上一种依次启动的效果。

你甚至可以通过网格布局的方式让元素也产生依次变化的动画下过，只要你告诉GSAP一共有几行几列就可以了！

Sequencing 排序动画

像上面我们刚学习的错开动画的效果，其实可以用在不同的场景中。但是如果我们想要让这种错开或者依次进行的动画效果有更强的可控性和灵活性，该怎么办呢？最原始的办法应该是使用delay这个属性。

但是使用delay属性来实现依次动画的这种方式本身是很脆弱的。假如我们需要修延长第一个元的动画时长，那么第二个元素需要我们进行重新设置，第三个元素也需要我们进行重新设置，这样就会非常麻烦也很低效，因此我们创造了时间线timeline这个东西

Timelines 时间线动画

时间线是可以用来方便快捷的创建各种依次进行的动画效果的能力。当你把多个tween动画效果添加到时间线上，默认他们就会按照他们添加的顺序依次执行。

// 创建Timeline类型的实例
let tl = gsap.timeline()

// 把tween动画添加到timeline实例上，然后我们这里用tl.to去驱动动画，而不是gsap.to
tl.to(".green", { x: 600, duration: 2 });
tl.to(".purple", { x: 600, duration: 1 });
tl.to(".orange", { x: 600, duration: 1 });

Timelines是GSAP中需要学习的最重要的其中一个概念。在下一篇文章中，我们会来详细介绍Timeline的使用，你可以学会如何精确的控制每一个动画的执行顺序，并且如何把整个动画效果很好的运行起来。

你的动画能力现在要开始起飞啦～

GreenSock Animation Platform (GSAP) 是一个业界知名的动画库，它被1100多万个网站使用，有超过50%的获奖的网站都是用了它。不管是在原生环境中，还是任意的框架中，你可以使用GSAP去让非常多的东西动起来。不管你是想要去让UI界面产生交互动画，还是SVG图形产生动画，甚至是Threejs还是React组件，GSAP都可以轻松搞定！

看一看GSAP有哪些插件