GSAP动画库—创建你的第一个动画

一、GSAP动画概念

关于gsap官方是这样描述的：

GSAP👍🏼是前端业内非常有名的一个动效库，有大量的优秀的网站都在使用它。它不仅能在原生JS的环境下使用，也能配合各种当前流行的框架进行使用。

通过使用它，非常多原本实现起来很有难度的交互动画效果，都能快速高效的实现。

英文官方网站：https://gsap.com/docs/v3/

中文官方网站：https://gsap.framer.wiki/stated

二、什么是gsap

简单的理解就是，使用这个库，可以创造出更丝滑，兼容性更强的网页页面交互动画。目前了解到这里就可以了。

三、创建第一个动画

补间的概念

什么是补间：通俗的讲，补间可以认为为元素添加的一条动画的声明。例如：

gsap.to(".box", { x: 200 })

官方定义：像这样的单个动画称为“补间”，此补间表示将类为‘.box’的元素动画至 x 为 200px。

接下来我们来了解一下它的声明语法：

大致可以拆分为以上三块，一个补间就是由这三部分组成的。接下来我们极限来看一看方法都有什么？

四、方法【补间的类型】

补间共有四种类型，也就是方法，分别是gsap.to()、gsap.from()、gsap.fromTo()、gsap.set(),接下来就一个一个的进行讲解：

1、gasp.to()

这个补间方法会将你定义的元素，从开始的位置，动画到你在方法中定义的位置。在动画的期间你可以设置元素的大小、颜色等状态。

示例展示：

需求：将名为box的元素，向右移动200px，并且在这之间旋转360度，到达目标位置。

 <div class="box green"></div>

 body {
       display: flex;
       align-items: center;
       justify-content: flex-start;
       min-height: 100vh;
       margin: 0;
       overflow: hidden;
     }

     .box {
       display: block;
       width: 200px;
       height: 200px;
     }
     .green {
       background: green;
     }
     

导入gsap动画

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

设置动画方法

<script>
      gsap.to(".box", {
        x: 200,
        delay: 1,
        rotation: 360,
      });
    </script>

解读：
x：表示将元素向右移动200px
delay:表示这个方法会延迟1s执行，也就是这个动画会延迟一秒执行
rotation：表示在动画运动期间元素会旋转360度

2、gsap.from()

这个方法有点像gsap.to()的逆方法，效果呢，就是从补间定义的状态开始，最终回到这个元素的初识位置和形态。
示例展示：

 <div class="box green"></div>

 body {
       display: flex;
       align-items: center;
       justify-content: flex-start;
       min-height: 100vh;
       margin: 0;
       overflow: hidden;
     }

     .box {
       display: block;
       width: 200px;
       height: 200px;
     }
     .green {
       background: green;
     }
     

导入gsap动画

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

设置动画方法

<script>
      gsap.from(".box", {
        x: 200,
        delay: 1,
        rotation: 360,
      });
    </script>

解读：
x：表示将元素向右移动200px
delay:表示这个方法会延迟1s执行，也就是这个动画会延迟一秒执行
rotation：表示在动画运动期间元素会旋转360度
最终效果就是，旋转着回到元素初始位置

3、gsap.from To()

这个方法允许我们自己设置元素的起始位置和状态以及结束的位置和状态
示例展示：

在这里我就不重复展示样式代码了，和之前的都一样，这里只展示不同的js代码

	gsap.fromTo(
        ".box",
        {
          x: 100,
          fill: "#00bae2",
        },
        {
          duration: 1.5,
          x: 500,
          fill: "#0ae448",
        }
      );

这里的fill和svg中的含义是一样的，也就是填充色。

4、gsap.set()

这个方法，和gsap.to()方法类似，不过这个方法是直接到达结束的状态，官方的解释就是，本质上就是零持续时间的gsap.to()方法。

gsap.set(".box", {
        x: 100,
        y: 100,
        fill: "#00bae2",
        delay: 1,
      });

以上就是补间的四种方法，接下来我们就来说一说目标。

五、目标

官方介绍：
接下来，我们必须告诉 GSAP 我们想要制作什么动画。GSAP 在后台使用document.querySelectorAll()，因此对于 HTML 或 SVG 目标，我们可以使用选择器文本，如".class"和"#id"。或者您可以传入一个变量甚至一个数组。

// 使用类名或者ID
gsap.to(".box", { x: 200 });

// 使用css选择器
gsap.to("section > .box", { x: 200 });

// 变量
let box = document.querySelector(".box");
gsap.to(box, { x: 200 })

// 或者使用一个数组
let square = document.querySelector(".square");
let circle = document.querySelector(".circle");
                                      
gsap.to([square, circle], { x: 200 })

六、结语

今天就先说到这里，今天我们学习了什么是补间，补间的方法，以及补间的目标可以是什么，接下来的几天我还会持续的为大家更新这类的文章，然后进行分享。感谢大家的阅读。
我自己呢，也有一个关于前端内容的社区，大家可以加入一下，后续还会有更多前端内容的分享，希望对大家有帮助，欢迎加入。
点击此处加入我们的社区，一起学习吧