面向初学者的GreenSock（第2部分）：GSAP的时间表

最新推荐文章于 2026-03-29 02:36:43 发布

翻译

最新推荐文章于 2026-03-29 02:36:43 发布 · 795 阅读

标签

#javascript #ViewUI

本文是面向初学者的GreenSock教程第二部分，介绍了如何使用TimelineMax时间轴来管理和协调多个Web动画补间。内容包括为何需要时间轴、如何在时间轴中包含多个补间、如何通过标签进行时间轴动画控制。通过学习，读者将能够更好地使用GreenSock时间轴进行Web动画的精确控制。

使用GreenSock（GSAP）第2部分对DOM进行动画处理

GreenSock初学者第二部分的目的是向您介绍GreenSock的TimelineMax 。您将学习：

为什么需要时间表
如何在时间轴中包括多个补间
如何将多个时间轴打包为函数并将其嵌套在主时间轴内以提高灵活性。

在本教程结束时，您将轻松使用GreenSock的时间轴来操纵和完全控制多个补间。

有关GreenSock基础知识的介绍，包括如何与TweenMax一起使用以对简单动画进行排序和交错，请继续阅读本多篇文章的第1部分。

GreenSock文章是CSS之外的系列文章：动态DOM动画库的一部分 。这是我过去分期介绍的内容：

使用Anime.js对DOM进行动画处理将介绍如何充分利用网络上的动画，以及何时可以考虑使用JavaScript动画库而不是仅CSS动画。然后重点介绍Anime.js，这是一个免费的轻量级JavaScript动画库
带有KUTE.js的有趣动画效果向您介绍KUTE.js，这是一个免费且功能丰富的JavaScript动画库
使用Velocity.js（无jQuery）使您的网站具有互动性和乐趣（无jQuery）向您展示了如何使用Velocity.js（一个开源，功能强大的免费动画库）来创建高效的Web动画。
GreenSock面向初学者：Web动画教程（第1部分）概述了GreenSock，也称为GSAP（GreenSock动画平台），在此我讨论库的模块和许可模型。我还将向您展示如何使用GSAP TweenMax编写简单的补间，补间序列和交错动画。

为什么需要GreenSock的时间表来编写Web动画代码？

在第1部分中，您学习了如何通过创建多个独立的补间并将它们的定时与每个补间的delay属性协调来将不同的动画添加到一个或多个元素。

默认情况下，一个接一个的补间堆叠会导致所有补间同时发生。

但是，更有效的是能够控制何时相对于其他补间触发补间，例如，同时，之前或之后的1秒或半秒等。

以这个只有两个补间的基本示例为例。这是发生了什么：

补间1：圆形随着其X和Y轴旋转而增长和收缩
补间2：弹出一些文本。

使它起作用的GSAP代码段如下所示：

// scale down the text 
// and hide it before the animation begins 
TweenMax.set('.example__title', { 
  scale: 0.2, 
  autoAlpha: 0
});

// scale the circle shape down before 
// the animation begins
TweenMax.set('.example__ball', {
  scale: 0.2
});

// tween 1
TweenMax.to('.example__ball', 0.5, {
  rotationX: 360,
  rotationY: 180,
  scale: 1,
  ease: Elastic.easeIn.config(2, 1)
});

// tween 2
TweenMax.to('.example__title', 0.5, {
  autoAlpha: 1,
  scale: 1,
  ease: Back.easeOut.config(4)
});

如您所见，两个补间是同时发生的，这不是理想的效果：

请参阅Pen GSAP教程第2部分：为什么在 CodePen上使用SitePoint （ @SitePoint ）创建时间轴。