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

AirStar
737 阅读7分钟

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

如何构建预加载器

首先，从此链接下载图像。将其另存build/assets为office.jpg.

现在你有了图像，你将编写实际的标记。

预加载器将由一个内部带有图像的 div 和一个用作叠加层的内部 div 组成。  

将以下代码放入index.htmlheader 标签之外：

<div class="pre-loader">
    <img src="assets/office.jpg" alt="an office">
    <div class="overlay"></div>
</div>

现在，你要将预加载器放置在页面中间，并为叠加层添加样式。

将以下代码放入src/input.css，里面@layer components：

.pre-loader {
        @apply absolute z-10;
        width: 40vw;
        top: calc(50% - (0.668 * 20vw));
        left: calc(50% - 20vw);
    }

    .pre-loader > .overlay {
        @apply absolute inset-x-0 bottom-0;
        @apply top-full bg-black bg-opacity-10 -z-0;
    }

之后，你的网页应如下所示：

图像 15

预加载器截图

GSAP简介

在本节中，我们将快速介绍 GSAP 的一些功能。如果你已经有一些 GSAP 经验，请随意跳过此部分。

根据 GSAP 文档：

GSAP 是一个属性操纵器

动画最终归结为每秒多次更改属性值，使某物看起来移动、褪色、旋转等。GSAP 捕捉一个起始值、一个结束值，然后每秒在它们之间插值 60 次。

例如，在x1 秒内将对象的坐标从 0 更改为 1000 会使其快速向右移动。逐渐opacity从 1 变为 0 会使元素淡出。作为动画师，你的工作是决定要更改哪些属性、更改速度以及动作的样式。（来源：什么是 GSAP？）

套用一句话：GSAP 的核心是一个库，它允许你在一段时间内在两个设定点之间平滑地更改对象的任何属性。

GSAP 有很多功能，但我们将专注于你构建目标网页所需的功能。你将使用：

  • gsap.to()
  • gsap.set()
  • gsap.fromTo()
  • 时间线

gsap.to() 方法

此方法告诉 GSAP 将目标从其当前状态设置为指定的结束状态。

该方法有两个参数：

  • 动画目标。它可以是原始对象、对象数组或包含 CSS 查询选择器（以 DOM 元素为目标）的字符串。
  • 列出以下内容的对象：你正在制作动画的属性、它们的最终值以及影响动画本身的特殊属性（例如设置持续时间或延迟）。

这是一个例子：

gsap.to('#object', {top: '75%', duration: 2})

该代码告诉 GSAP 将 id 为 object 的 DOM 元素的 top 属性更改为 75% 的值，并在最后两秒内进行更改。

gsap.set() 方法

此方法的工作原理几乎与gsap.to(). 它还将目标设置为给定的最终状态。

不同之处在于gsap.set()创建一个持续时间为零秒的动画，立即将目标的属性设置为其给定值。

这是一个例子：

gsap.set('#object', {top: '75%'})

这段代码运行后，top 的属性#object变为 75%。

gsap.fromTo() 方法

该fromTo()方法告诉 GSAP 将目标对象从我们提供的起始状态动画到我们也提供的结束状态。当方法执行时，目标将立即设置为开始状态，然后动画到结束状态。

该fromTo()方法接受三个参数：

  • 目标参数。
  • 一个对象，其中包含你希望目标在动画开始时具有的属性。
  • 一个对象，其中包含你希望目标在动画结束时具有的属性。

所有控制动画本身的特殊属性只能放在最后一个参数中，即包含结束状态的对象。

这是一个例子：

gsap.fromTo('#object', {top: '75%'}, {top: '33%', delay: 3})

时间线

GSAP 时间线是一个特殊的对象，它充当多个动画的容器。它的工作是使与排序相关的动画更容易。

这就是时间线的工作方式：你使用 来创建时间线gsap.timeline()，然后使用我们目前讨论过的相同方法向其添加动画。

时间轴还允许你为时间轴中的每个动画指定默认的特殊属性，方法是将它们gsap.timeline()作为对象的属性传递给它们。

例子：

let timeLine = gsap.timeline({defaults: {duration: 1}})

timeLine.set('#object', {top: '75%'})
timeLine.to('#object', {top: '50%', delay: 0.5})
timeLine.fromTo('#object', {top: '60%'}, {top: '25%', delay: 0.5})

这就是你需要了解的有关 GSAP 的所有信息，以了解本教程的其余部分。## 如何添加动画

现在所有的标记都已经到位，终于可以添加动画了。

build/static首先在被调用的文件中创建一个新文件script.js。  

这将包含你所有的动画 JavaScript。接下来，通过在结束正文标记上方script.js添加一个脚本标记来链接到你的 HTML ，如下所示：index.html

<body>
	<!-- leave as is -->
    <script src="static/script.js"></script>
</body>

你要制作动画的第一件事是你的预加载器。你将编写代码以缓慢增加叠加层的高度，然后在向下和向左移动时增加其宽度。

将以下内容添加到static/script.js：

const timeLine = gsap.timeline({defaults: {duration: 1}})

timeLine.to('.pre-loader > .overlay', {top: '75%'})
timeLine.to('.pre-loader > .overlay', {top: '50%', delay: 0.5})
timeLine.to('.pre-loader > .overlay', {top: '25%', delay: 0.5})
timeLine.to('.pre-loader > .overlay', {top: '0', delay: 0.5})
timeLine.to('.pre-loader', {width: '80vw', left:0, top: '50%'})
timeLine.set('.pre-loader', {'z-index': -20})

让我们花点时间分解这段代码。它做了几件事：

  • 它为我们的动画创建了一个时间线，将默认持续时间设置为 1 秒。
  • 它用于通过调整属性gsap.to()来增加叠加层的高度。top
  • 它用于gsap.to()增加预加载器的宽度，使其与屏幕的左边缘对齐，并增加宽度。
  • 它用于gsap.set()立即将值设置z-index为 -20，因此它不会覆盖我们的任何文本。

接下来是导航栏。你想要创建一个看起来像导航栏从屏幕上方滑入并同时逐渐变得可见的效果。

通过将以下代码添加到末尾来做到这一点script.js：

timeLine.fromTo('nav', {y:-100}, {y:0, opacity:1})

该代码用于在元素上gsap.fromTo()设置 a transalateY(-100px)，然后将其设置为正常位置和完全不透明的动画。

你现在要为页眉设置动画，一块一块地。

首先要做的是为第一行中的粗体文本设置动画。你将在其上实现完全相同类型的动画，但它将从底部滑入，而不是从顶部滑入。

将此添加到末尾script.js：

timeLine.fromTo('.first-row .bold-text', {y:100}, {y:0, opacity:1}, "<")

最后一个参数<告诉 GSAP 在时间轴中与上一个动画同时开始这个动画。由于两个动画具有相同的持续时间，因此具有同时执行它们的效果。

接下来，以相同的方式为第二行中的粗体文本设置动画，但省略<参数，如下所示：

timeLine.fromTo('.second-row .bold-text', {y:100}, {y:0, opacity:1, delay:0.5})

标题的其余部分很有趣，因为接下来要为哪些元素制作动画取决于是否在移动设备上查看该网站。

如果网站是在移动设备上，你想要动画的是第三行的元素。但如果不是，则为第一行和第二行的剩余位设置动画。

你将通过使用window.matchMedia() 方法来解决这个问题。 它以媒体查询作为参数，并允许你检查浏览器是否匹配该媒体查询。

在末尾添加此代码script.js：

const isMobile = !(window.matchMedia('(min-width: 768px)').matches)

if (isMobile) {
    timeLine.fromTo('.mobile-row .copy', {y:100}, {y:0, opacity:1, delay:0.5})
    timeLine.fromTo('.mobile-row .cta', {y:100}, {y:0, opacity:1, delay:0.5})
} else {
    timeLine.fromTo('.first-row .copy', {y:100}, {y:0, opacity:1, delay:0.5})
    timeLine.set('.round-text', {opacity:1, delay:0.5})
}

让我们来看看。你刚刚添加的代码：

  • 确定视口的宽度是否小于 768px。
  • 如果是，代码使移动行中的段落向上滑动，然后是按钮。
  • 如果不是，它将使第一行中的段落向上滑动，然后使 SVG 可见。

这样就完成了你的目标网页！

结论

在本文中，你学习了如何使用 GSAP 的基础知识来构建几个很酷的动画。如果你想了解有关 GSAP 的更多信息以及你可以用它做的很棒的事情，请访问此链接。

avatar
文章
阅读
粉丝