GSAP学习笔记

技巧

数字变更

在 PVIS 2025 中，数字变更的动画，使用 GSAP3.0 的fromTo方法实现。
API 文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const value = Number(value);
const prefix = value > 0 ? '+' : '';
className = value > 0 ? 'up' : 'down';
gsap.fromTo(
  { val: 0 },
  { val: 0 },
  {
    val: value,
    duration,
    onUpdate() {
      content = `${prefix}${this.targets()[0].val.toFixed(1)}%`;
      element.textContent = content;
    },
  }
);

资料

https://github.com/greensock/GSAP

Github 星级：13.2K

优势：速度快(官网说比 jQuery 快 20 倍)，有工具可以加速开发(GSDevTools)，基于时间线的设计；插件非常多；方便和其他库(比如 Three.js 和 Pixi.js)搭配使用；支持形变动画(morphSVG)；浏览器兼容性最佳；背后有强大的社区和基金支持

弊端：学习成本略高？

介绍文章：https://zhuanlan.zhihu.com/p/145332205

GSAP3.0 Crash Course：https://www.youtube.com/watch?v=YqOhQWbouCE

大小：默认版本，压缩后的 63KB