如何使用GreenSock 和 TailwindCSS 构建动画（上）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。

GreenSock动画平台（GSAP）可以对JavaScript可以操作的所有内容进行动画处理（CSS属性，SVG，React，画布，通用对象等），同时解决了不同浏览器上存在的兼容性问题，而且速度极快（比jQuery 快20倍）。大约有1000万个站点和许多主要品牌都使用 GSAP。

动画其实是每秒多次改变元素属性值，元素看起来就仿佛在动一样，比如淡入淡出，旋转，移动等。而GSAP捕捉一个起始值和一个结束值，然后每秒在它们之间插值60次。

如果从技术上面来讲，GSAP其实应该被称为“GreenSock属性操纵器”（GSPM）。

文章概述

本文由以下部分组成：

如何设置项目
编写标记
GSAP简介
向页面添加动画
结论

如何设置项目

在开始构建目标网页之前，您需要准备一些东西。

在本节中，您将：

设置您的项目所在的目录。
设置 GSAP 和 TailwindCSS。
导入字体。
设置一个简单的开发服务器。

如何设置项目目录

首先在终端中运行以下命令：

mkdir gsap-landing
cd gsap-landing
mkdir build src
mkdir build/assets build/static
复制代码

该代码应创建一个如下所示的文件夹树：

gsap-着陆结构

项目目录结构

如何设置 GSAP

要安装 GSAP，请在 build 中创建一个名为的文件index.html，然后将以下代码放入其中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/gsap.min.js"></script>
    <title>Orfice</title>
</head>
<body>
    
</body>
</html>
复制代码

这将创建一个基本的 HTML 文档，并通过头部的 script 标签导入 GSAP。

如何设置 TailwindCSS

要安装 TailwindCSS，请确保您位于项目的根目录中，然后在终端中运行以下命令：

npm install tailwindcss
npx tailwind init
复制代码

这应该在您的项目根目录中创建三个新文件：package.json、package-lock.json和tailwind.config.js.

src接下来，在名为的文件夹中创建一个文件input.css，并将以下代码放入其中：

@tailwind base;
@tailwind components;
@tailwind utilities;
复制代码

回到项目根目录，将的内容替换为tailwind.config.js以下内容：

module.exports = {
  content: [
  "./build/**/*.{html,js}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
复制代码

之后，打开您的package.json文件并将其内容替换为以下内容：

{
  "scripts": {
    "build-css": "npx tailwindcss -i ./src/input.css -o ./build/static/output.css --watch"
  },
  "dependencies": {
    "tailwindcss": "^3.0.23"
  }
}
复制代码

现在，打开您的终端并运行以下命令：

npm run build-css
复制代码

此命令负责创建和更新文件：build/static/output.css，这是您的登录页面样式所在的位置，因此您应该让它在自己的终端窗口中运行，直到您完成本教程。

build/index.html接下来，通过将以下代码添加到导入 GSAP 的脚本标记上方，将 CSS 链接到您的登录页面：

<link rel="stylesheet" href="static/output.css">
复制代码

TailwindCSS 的设置到此结束。

如何导入字体

将头部替换为build/index.html以下内容：

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="static/output.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/gsap.min.js"></script>
	<title>Orfice</title>
</head>
复制代码

现在，将字体应用到您的 CSS。

打开src/input.css，并在其末尾添加以下代码：


@layer base {
    body {
        @apply overflow-hidden h-screen;
        font-family: 'Be Vietnam Pro', sans-serif;
    }
}
复制代码

如何设置服务器

要设置您的开发服务器，请打开一个新的终端窗口，导航到您的项目根目录，然后运行以下代码：

npm install --save-dev live-server
复制代码

这就是你需要做的！要启动服务器，请在终端中运行以下命令：

live-server build
复制代码

只要live-server命令正在运行，它就会build/index.html在localhost:8080服务，并在您对项目进行更改时自动刷新页面。