动画是现代网页设计最重要的方面之一。它是改善用户体验的一种实用且有效的方法。虽然 CSS(我在上一篇文章中写了关于 CSS 动画](https://blog.toluadegboyega.dev/getting-started-with-css-animation)的[入门)在创建很酷的动画方面非常有用,但创建复杂的动画可能会非常费时费力。这就是 JavaScript 的用武之地。

在这篇文章中,我们将重点介绍如何在我们的 Vue 应用程序中使用名为 GSAP 的 JavaScript 库开始动画界面。

什么是 GSAP?

GreenSock Animation Platform (GSAP) 是一个强大、健壮、高速和轻量级的 JavaScript 库,可用于创建高性能和引人入胜的动画。在解决浏览器不一致问题时,它会为 JavaScript 可以触摸的任何内容(包括 CSS 属性和 SVG)设置动画。

需要我多说? 😏

设置

在您的 Vue 应用程序中使用 GSAP 的第一步是将其包含在您的项目中。虽然有很多方法可以做到这一点,但我更喜欢使用 NPM 或 Yarn 安装 GSAP。您可以在此处查看 GSAP 文档中的其他安装方法。

对于 npm 安装,在您的终端中,键入以下命令:

npm install gsap

对于 yarn 安装,输入以下命令:

yarn add gsap

在要使用 GSAP 的文件顶部,通过添加以下内容导入 GSAP:

import { gsap } from 'gsap';

现在您已准备好使用 GSAP。 🥳

GSAP 概念

我们将专注于使用 GSAP 创建动画的一些基本概念,它们是:

• 补间

• 时间线

• 个插件

补间

简而言之,Tween 就是所有动画的工作原理。它是由属性更改引起的动画中的单个动作。它类似于 CSS 中的关键帧。它遵循以下语法:

gsap.method('element', duration, vars)

1. 方法:这是指您想要使用 Tween 的 GSAP 方法。

2. element:这是我们想要动画的元素。如果我们想为多个元素设置动画,它可以是一个简单的变量或数组。

3.duration:这个表示动画的持续时间,以秒为单位定义。

4. vars:这是一个具有不同属性的键/值对的对象,我们希望在持续时间内更改这些属性。它们可以是 CSS 属性,但重要的是要注意它们应该以驼峰式格式编写。即padding-bottom为paddingBottom。

探索 GSAP 方法

方法用于定义动画的开始值和最终值。使用 GSAP 创建动画的方法有很多。我们将重点关注一些常见的,例如gsap.to()、gsap.from()和gsap.fromTo()。

gsap.to()

此方法将元素的动画从其当前/默认值到对象参数 (vars) 中指定的值。

  gsap.to('.block', 3, {
     x: 200,
     borderRadius: '50%',
     backgroundColor: 'orange',  
  });

上面的代码将在三 (3) 秒内使用 CSS 属性translateX沿其 x 轴移动类名称为block200px 的元素,该属性在此处由x表示,同时将其其他 CSS 属性更新为border-radius50% 和background-color的橙色。

https://codepen.io/ToluAdegboyega/pen/ZExLoPE

gsap.from()

此方法将元素 from 对象参数 (vars) 中指定的值设置为当前/默认值。它与 to 方法相反。

  gsap.from('.circle', 3, {
     y: 200,
     borderRadius: '50%',
     backgroundColor: 'orange',  
  });

上面的代码将沿其 y 轴设置类名称为circle的元素,从 50% 的border-radius和橙色的background-color到其默认值。

https://codepen.io/ToluAdegboyega/pen/LYdxrLe

gsap.fromTo()

此方法允许您指定起始值和最终值。这是通过使用分别代表这些值的两个对象来完成的。它是from()和to()方法的组合。

  gsap.fromTo('.block-circle', 3, {
      borderRadius: '8px',
      backgroundColor: 'purple',
    },
    {
      borderRadius: '50%',
      backgroundColor: 'orange',  
    }
  );

上面的代码将对类名block-circle的元素进行动画处理,从 8px 的border-radius和紫色的background-color到 50% 的border-radius和橙色的background-color。

https://codepen.io/ToluAdegboyega/pen/VwXPdVE

探索 GSAP 变量属性

同样重要的是要注意,除了 CSS 属性之外,还有其他属性可以放在 vars 对象参数中,其中一些是:

• 延迟:动画开始前的延迟量(以秒为单位)。

• paused:这是一个布尔值,如果为真,动画将在创建后立即暂停。

• repeat:动画第一次播放后应该重复的次数。

• yoyo:这是一个布尔值,如果为真,则补间似乎来回移动(向前然后向后)。

https://codepen.io/ToluAdegboyega/pen/wvmgxpo

时间线

时间线是多个 Tweens 的容器。时间轴可让您将 Tweens 链接在一起。使用时间轴,默认情况下所有 Tweens 一个接一个地执行,除非另有设置,无需在单个 Tweens 上使用延迟。使用时间轴是一种更简单的方法,因为使用延迟进行排序可能会使您的动画更难维护,尤其是在更复杂的动画中。

时间线是一个强大的排序工具,它充当补间和其他时间线的容器,可以轻松控制它们作为一个整体并精确地管理它们的时间。如果没有时间轴,构建复杂的序列会更加麻烦,因为您需要为每个动画使用延迟。 -GSAP 时间线文件

可以使用以下格式创建时间线:

const timeline = gsap.timeline();

timeline
.from('element', {})
.to('element', {});

https://codepen.io/ToluAdegboyega/pen/QWmdBzO

个插件

GSAP 提供了可用的插件,可用于通过几行直观的代码创建复杂且令人兴奋的动画。一些最流行的 GSAP 插件包括:ScrollTrigger、DrawSVGPlugin 和 MorphSVGPlugin 等。有关官方 GSAP 插件的完整列表,请查看插件页面。

为了使用 GSAP 插件,您需要使用您想要使用该插件的文件顶部的以下格式将其注册到 GSAP 核心:

import { PluginName } from 'gsap/PluginName';

gsap.registerPlugin(PluginName);

滚动触发器

在这篇文章中,我们将专注于一个强大的 GSAP 插件,称为 ScrollTrigger。 ScrollTrigger 可用于以最少的代码创建令人惊叹的基于滚动的动画。它也可以用来触发任何与滚动相关的东西。

以下代码用于注册 ScrollTrigger 插件:

import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

gsap.to('element', {
  x: 200,
  scrollTrigger: 'element',
})

当元素在视图中一次时,上面的代码会在 x 轴上为元素设置 200px 的动画。

https://codepen.io/ToluAdegboyega/pen/PoRpyPe

ScrollTrigger 插件可用于创建自定义滚动条,如以下示例以及其他令人兴奋的动画。

https://codepen.io/ToluAdegboyega/pen/wvmJYxZ

结论

在这篇文章中,我们介绍了如何开始使用 GSAP 在您的 Vue 应用程序中创建令人惊叹的动画。

虽然 GSAP 有这么多有用的功能,但上手可能会让人望而生畏,但一旦您了解了基础知识,您将立即创建复杂的动画。

GSAP 有相当广泛和可访问的文档涵盖了本文中未提及的功能以及非常活跃的论坛我个人从中受益!

感谢您的阅读,希望这篇文章对您有所帮助。 💫