“🧦绿袜子大侠“-GreenSock 动画库入门

一、简介

1.1） 自我描述

• 现代化网页动画的标准
• 强大的 JavaScript 工具集，可将开发人员变成动画超级英雄。

1.2） 资源与链接

• 官网
• 示例
• 文档
• 仓库

1.3）安装

• npm

npm install gsap

• cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

二、最直观的 API 列表

通过 console.log(gsa) 直观的获取，顶层 api 列表，比官网更加贴近开发环境（但是作用内容还是需要阅读）。

从浏览器中查看全局 gsap 中可见可用的 api 列表。

三、化身"绿袜子大侠": 开始自己的第一个动画

• 从 gsap.to 开始

const tween = gsap.to(".el", {rotation: 360, x: 500, duration: 1}); // el 元素的动画

3.1）以 React 为例, 使用 Vite + React 初始化一个项目(使用 css module 作为解决方案)：

• React 组件

import { useEffect } from 'react';
import gsap from 'gsap';

// styles
import styles from './Greate.module.css'

const Greate = () => {
  useEffect(() => {
    gsap.to(".el", {rotation: 360, x: 500, duration: 1});
  }, [])
  return <div className={['el', styles.el].join(' ')}>el</div>
}

export default Greate;

• CSSModule 样式

.el {
  width: 200px;
  height: 200px;
  background-color: aquamarine;
}

• 效果

四、动画基础用法：to/from/fromTo

// 开始
const tween = gsap.from(".el", {rotation: 360, x: 500, duration: 1}); // el 元素的动画

// 结束
const tween = gsap.to(".el", {rotation: 360, x: 500, duration: 1}); // el 元素的动画

// 开始到结束
const tween = gsap.fromTo(".el", {rotation: 0, x: 0}, {rotation: 360, x: 100, duration: 1});

五、gsap.to 返回值的 tween 详解

5.1）属性

5.2）原型链上属性

• 第一层属性

• 第二层属性

5.3）tween 的暂停与播放

一个三秒的动画：2s 时自动暂停， 3s 时重启播放：

// 创建一个Tween动画
const tween = gsap.to(".el", {
  duration: 3,
  x: 200,
  y: 100,
  opacity: 0.5,
});

// 暂停动画
// 在一段时间后继续播放动画
setTimeout(() => {
  tween.play();
}, 2000);

tween 对象在原型上有 pause 和 play 两个方法用于 暂停 和 播放。其他的属性就不在探索了。

六、Timeline

时间轴功能同样在 gsap 中得到了处理。在 gsap 中 Timeline 是一个可以容纳多个动画的实例容器。在 Timeline 中，可以按照顺或者同时播放动画。还可以设置延迟，重复，方向播放动画。时间轴非常有用。

6.1） 写法

• 没有使用使用 Timeline, 使用 delay 来延迟第二个和第三个。

gsap.to("#id", {x: 100, duration: 1});
gsap.to("#id", {y: 50, duration: 1, delay: 1});      //wait 1 second
gsap.to("#id", {opacity: 0, duration: 1, delay: 2}); //wait 2 seconds

• 使用了 Timeline， 不再需要 delay, 有了链式调用的特点

gsap.timeline()
    .to(".box", {
        duration: 2, // 动画持续时间为2秒
        x: "200px", // 沿X轴移动200像素
        opacity: 0, // 逐渐变透明
        ease: "power2.inOut", // 使用缓动函数控制动画的速度曲线
    })
    .to(".box", {
        duration: 0.1, // 动画持续时间为0.1秒
        x: "0", // 将X轴位置重置为0
        opacity: 1, // 将透明度重置为1
        delay: 1, // 延迟1秒执行
    })
    .repeat(-1) // 循环播放动画
    .play(); // 播放时间轴

元素从左侧移动到右侧并逐渐变透明，然后重置为初始状态，并且一直循环播放。

6.2） api 解读

• timeline 函数调用之后的顶层 api

• timelie 的第一层原型链

• timeline 的第二层属性

具体属性就不再深入探索。

七、插件

7.1） 常用插件与列表

gsap 中通过插件的方式支持更加强大的动画能力。

• ScrollTrigger 可以做滚动视差效果
• TextPlugin 可以做文字效果
• Bezier 可以自定义贝塞尔曲线

7.2）示例

gsap.registerPlugin(ScrollTrigger, /* MorphSVGPlugin ... 其他插件 */);

gsap.to(".box", {
  scrollTrigger: ".box", // start the animation when ".box" enters the viewport (once)
  x: 500
});

7.3） 基于 vite + CSS Module 的示例

• 组件逻辑

import  { useEffect } from 'react';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import style from './index.module.css';

// 初始化ScrollTrigger插件
gsap.registerPlugin(ScrollTrigger);

const ScrollAnimatedElement = () => {
  useEffect(() => {
    // 创建动画
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".box", // 触发器元素
        start: "center center", // 触发动画的位置
        end: "bottom top", // 结束动画的位置
        scrub: true, // 启用平滑滚动
      },
    });

    // 在时间轴上添加动画
    tl.to(".box", {
      duration: 1, // 动画持续时间为1秒
      x: "100%", // 沿X轴移动400%（从左侧滑入）
      scale: 1, // 逐渐变大到原始尺寸
      opacity: 1, // 逐渐变为不透明
      // backgroundColor: "red", // 背景颜色变为红色
    });
  }, []);

  return (
    <div className={[style.container].join(' ')}>
      <div className={['box', style.box].join(' ')}></div>
    </div>
  );
};

export default ScrollAnimatedElement;

• 样式逻辑

.container {
  height: 120vh;
}

.box {
  height: 300px;
  width: 300px;
  background-color: bisque;
}

插件部分以 ScrollTrigger 为例，结合 vite + CSS Module 实现一个简单的 demo。

八、缓动函数

8.1） 缓动函数游乐场

在动画中，缓动函数是绕不开的话题，以下是官方的 Visualizer 可以当作一个 playground:

8.2）配置缓动函数

在 options 的 ease 中配置缓动函数：

gsap.to(graph, { duration: 2.5, ease: "power1.out", y: -500 });

九、其他

9.1）工具函数

辅助函数	描述
gsap.utils.toArray()	将类数组对象转换为数组。
gsap.utils.selector()	通过选择器选择多个元素，并将它们包装在GSAP对象中，以便于动画处理。
gsap.toFrom()	创建一个循环动画，首先执行 "to" 部分，然后执行 "from" 部分，然后循环。
gsap.delayedCall()	创建一个延迟调用函数，可以用于在一段时间后执行特定的操作。
gsap.set()	立即设置目标元素的属性，而不进行动画。通常用于初始化元素的状态。
gsap.killTweensOf()	终止指定元素上的动画。可以用于停止正在运行的动画。
gsap.registerEffect()	注册自定义动画效果，以便稍后重复使用。

9.2）stagger 交错动画

gsap.to(".box", {
  y: 100,
  stagger: 0.1 // 0.1 seconds between when each ".box" element starts animating
});

十、小结

本主要介绍了 GreenSock的核心功能，直观的给出了 API 在浏览中的列表，以及基本 api from/to/fromTo 等方法使用方法，同时常用的 timeline 作为核心功能也被支持，链式调用使用更加流畅，插件功能扩展动画能力，缓动函数以及工具函数和高级 stagger 都让 GreenSock 成一个优秀的动画库。当然更多的希望能够帮助读者朋友和同学，如果作者的文章写的还可以，不妨 wchat 关注 进二开物，更多内容同步分享。