If there’s one thing I’ve learned from showing my websites to non-technical friends and family it’s this: they‘re never impressed by WebSockets or Ruby Gems or whatever new technology you just learned — they just like the fancy JavaScript animations on your homepage. And to be honest, I understand why. Nothing beats clicking onto a website and watching satisfying animations pop up on the page as you interact with it. It can do a lot in terms of improving user experience, and its a really fun way to add some bells and whistles to your websites. So for this tutorial I’m going to show you how to use one of my favorite JavaScript animation libraries: GreenSock Animation Platform (or GSAP).

如果从向非技术朋友和家人展示我的网站中学到的东西是这样的：WebSockets或Ruby Gems或您刚刚学到的任何新技术都不会给他们留下深刻的印象-它们就像您首页上精美JavaScript动画一样。 老实说，我明白为什么。 当您与网站进行交互时，点击网站并观看令人满意的动画会弹出页面。 在改善用户体验方面，它可以做很多事情，它是一种非常有趣的方式，可以在您的网站上添加点滴滴答。 因此，在本教程中，我将向您展示如何使用我最喜欢JavaScript动画库之一： GreenSock动画平台 (或GSAP)。

GSAP has a ton of useful tools, and it can make your website the animated heaven that wows your technical and non-technical friends alike. There’s so many features in GSAP that it can be intimidating to get started, but once you’ve got the basics down it’ll be hard to keep yourself from animating everything on your site!

GSAP有大量有用的工具，它可以使您的网站成为动画世界，让您的技术和非技术朋友都赞叹不已。 GSAP有太多功能，因此入门时会令人生畏，但是一旦掌握了基础知识，就很难阻止自己对网站上的所有内容进行动画处理！

安装GSAP (Installing GSAP)

I like to install GSAP using npm. If you’d prefer to use yarn or another method, check out the various installation methods in the GSAP docs.

我喜欢使用npm安装GSAP。 如果您想使用yarn或其他方法，请查看GSAP文档中的各种安装方法 。

$ npm install gsap

Next you’ll import GSAP at the head of the file you want to animate:

接下来，您将在要设置动画的文件的开头导入GSAP：

import { gsap } from 'gsap'

Now your file is ready to call GSAP methods.

现在，您的文件已准备好调用GSAP方法。

用GSAP制作动画 (Animating with GSAP)

The easiest GSAP method to get started with is gsap.to(). For the first example, all we’ll do is slide a box 300 pixels to the right:

入门最简单的GSAP方法是gsap.to() 。 对于第一个示例，我们要做的就是将一个框向右滑动300像素：

演示地址

This is created with the following code inside of componentDidMount:

这是使用componentDidMount内部的以下代码创建的：

componentDidMount() {
    gsap.to('.box', { x: 300, duration: 2 })
}

I put this code inside of the componentDidMount function because I want the animation to fire as soon as the page loads, but if you want it to fire upon click you can just tie the gsap.to() function to a button with an event listener (I’ll explain how to do this at the end).

我将此代码放在componentDidMount函数中，因为我希望动画在页面加载后立即触发，但是如果您希望在单击时触发动画，则可以将gsap.to()函数绑定到带有事件监听器的按钮(我将在最后解释如何执行此操作)。

The gsap.to() function takes two arguments: the target element and variables. First, the element you want to animate is targeted by a property. It can be a class name, id, tag, you name it. Part of what makes the gsap.to() function so powerful is its ability to manipulate pretty much any DOM element. The second argument describes the animation you want to create. In my animation I’m sliding the orange box 300 pixels to the right, so I set my ‘x’ value to 300. The second variable describes how long I want the event to take place. You can make the box zoom or crawl across the page by manipulating the duration.

gsap.to()函数采用两个参数： target元素和variables 。 首先，要设置属性的元素要作为动画对象。 它可以是一个类名，id，标签，您可以为其命名。 使gsap.to()函数如此强大的部分原因在于它能够处理几乎所有DOM元素。 第二个参数描述您要创建的动画。 在我的动画中，我将橙色框向右滑动300像素，因此将“ x”值设置为300。第二个变量描述了我希望事件发生多长时间。 您可以通过控制持续时间来使框缩放或在页面上爬行。

一些有用的变量 (A Few Useful Variables)

Okay, now that we’ve got a simple animation down we can check out a few of the variables at our disposal!

好吧，现在我们有了一个简单的动画，我们可以检查一些可用的变量！

1.轮换 (1. Rotation)

The rotation variable is pretty self-explanatory. It takes in the number of degrees you want to rotate your element and completes that rotation within the number of seconds specified in your duration.

旋转变量很容易解释。 它接受您要旋转元素的度数，并在持续时间中指定的秒数内完成该旋转。

2.轻松 (2. Ease)

The ease variable affects the timing of each animation, and it creates some really amazing effects. The easiest way to understand each of the eases is by using the GreenSock Ease Visualizer tool in their docs. My favorites are Bounce and Elastic.

easy变量会影响每个动画的时间安排，并且会产生一些非常惊人的效果。 理解每种便利的最简单方法是使用其文档中的GreenSock轻松可视化工具。 我最喜欢的是弹跳和弹力。

3.重复 (3. Repeat)

The repeat variable is great if you want an animation to loop over itself. It can be used as a variable or it can be chained after the animation you want to loop over. If you want to loop indefinitely, just set it to -1. Don’t forget to set your ease variable to ‘none’ if you want continuous timing throughout the animation.

如果您希望动画循环播放自身，则repeat变量非常有用。 它可以用作变量，也可以在要循环播放的动画之后链接。 如果要无限循环，请将其设置为-1。 如果要在整个动画中连续计时，请不要忘记将easy变量设置为“ none”。

4.溜溜球 (4. Yoyo)

Yoyo is another great variable for continuous movement. When used in conjunction with the repeat variable, your animation will loop back and forth on each repeat iteration, creating a yoyo effect. The YoyoEase variable can also be used to control the timing of the yoyo effect.

悠悠球是连续运动的另一个巨大变量。 与repeat变量一起使用时，动画将在每次重复迭代中来回循环，从而产生溜溜球效果。 YoyoEase变量也可以用于控制yoyo效果的时间。

5.延迟 (5. Delay)

Lastly, the delay variable sets the number of seconds to delay between the event triggering and the animation playing.

最后，delay变量设置事件触发与动画播放之间延迟的秒数。

Here’s an animation that uses all of these variables:

这是一个使用所有这些变量的动画：

演示地址

播放，暂停，后退和重启按钮 (Play, Pause, Reverse and Restart Buttons)

One last handy tool that GSAP gives us are the play, pause, reverse and restart functions. These can be used throughout your site to give user feedback on click. I’ll show you how to implement them using buttons and React.

GSAP提供给我们的最后一个便捷工具是播放，暂停，倒退和重新启动功能。 这些可以在您的整个网站上使用，以向用户提供有关点击的反馈。 我将向您展示如何使用按钮和React来实现它们。

First, define ‘box’ and ‘boxAnimation’ inside of your constructor.

首先，在构造函数中定义“ box”和“ boxAnimation”。

constructor() {
    super();
    this.box = null;
    this.boxAnimation = null;
}

These values are initially set to null — they won’t exist until your render and componentDidMount functions fire. Next, inside of your render block create the box that you’ll be animating and the buttons for each action.

这些值最初设置为null-在您的render和componentDidMount函数启动之前，它们将不存在。 接下来，在渲染块的内部创建要设置动画的框以及每个动作的按钮。

return (
  <div ref={div => this.box = div} className='box'></div>


  <button onClick={() => this.boxAnimation.play()}>Play</button>
  <button onClick={() => this.boxAnimation.pause()}>Pause</button>
  <button onClick={() => this.boxAnimation.reverse()}>Reverse</button>
  <button onClick={() => this.boxAnimation.restart()}>Restart</button>
)

Notice that in the box-div we use the ref function to set ‘this.box’ equal to the div that was just created. We’re also creating onClick functions for each of the buttons that calls the functions we want for the animation.

注意，在box-div中，我们使用ref函数将'this.box'设置为等于刚创建的div。 我们还为每个按钮创建了onClick函数，这些函数调用了我们想要的动画函数。

Lastly, we’ll define our GSAP animation in the componentDidMount function:

最后，我们将在componentDidMount函数中定义GSAP动画：

componentDidMount() {
  this.boxAnimation = gsap.to('.box', {
      x: '300', 
      duration: '3', 
      rotation: '360', 
      ease:'elastic', 
      yoyo: 'true', 
      repeat: -1
  }).pause();
};

Here we set ‘this.boxAnimation’ equal to our GSAP animation and default it to paused. This is our result:

在这里，我们将'this.boxAnimation'设置为等于我们的GSAP动画，并将其默认设置为暂停。 这是我们的结果：

演示地址

Thanks for reading!

谢谢阅读！