JS 流行库（十一）：GSAP

原创

已于 2022-11-03 09:15:41 修改 · 2.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #动画 #前端

于 2022-10-11 23:15:00 首次发布

JS 流行库（十一）：GSAP

GSAP（GreenSock Animation Platform）是一个从 Flash 时代一直发展到现在的专业动画库，底层使用 JavaScript 实现，优点如下：

速度快
轻量级、模块化
无依赖
灵活控制

在 GSAP 2.X 的版本中，通过 TweenMax 类和 Tweenline 类实现动画效果，而在 GSAP 3.X 的版本中，将 TweenMax 和 Tweenline 包含到了 GSAP 类中，此处介绍 GSAP 3.X 版本的使用

基本使用

导入 GSAP 库

<script src="./js/gsap.js"></script>

HTML

<style>
    .box {
     
     
        width: 100px;
        height: 80px;
        background-color: orangered;
    }
</style>
<div class="box"></div>

JavaScript

gsap.to(".box", {
   
   
    x: 500,
    duration: 3
});

上述示例的含义是将 box 在 3s 内从初始位置移动到 x 坐标为 500 的位置，此外，也可以使用 from 方法将 box 从某个位置移动到初始位置，示例如下：

gsap.from(".box", {
   
   
    x: 500,
    duration: 3
});

如果将元素从某个位置移动到另一个位置，那么可以使用 fromTo 方法，示例如下：

gsap.fromTo(".box", {
   
   
    x: 500,
}, {
   
   
    x: 300,
    duration: 3
});

上述示例的含义是将元素从 x 坐标为 500 的位置在 3s 内匀速移动到 x 坐标为 300 的位置

如果想为多个元素添加动画，那么可以给元素添加相同的类名从而同时绑定动画，示例如下：

HTML

<style>
    .box {
     
     
        width: 100px;
        height: 100px;
        background-color: red;
    }

    .box:nth-of-type(2) {
     
     
        background-color: orange;
    }

    .box:nth-of-type(3) {
     
     
        background-color: green;
    }
</style>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>