跳到主要内容

动画第三方库

GSAP​

GSAP 是一个强大的 JavaScript 工具集，让大家秒变动画大佬。构建适用于所有主流浏览器的高性能动画。动画 CSS、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径、通用对象...... JavaScript 可以触摸的任何东西

基本使用​

  • gsap.to() ： 指定目标到特定位置
  • gsap.from(): 和gsap.to()相反
javascript
// 导入动画库
import gsap from "gsap";
// 立方体移动设置1秒时间水平移动 200px 的动画
gsap.to(cube.position, { x: 200 })
// 向右水平移动+旋转.box元素的效果
gsap.to(".box", { 
  duration: 2,
  x: 200,
  rotation: 360,
});

lax.js​

  • 滚动的动画库