GSAP动画库

TT_技术中心

已于 2024-11-30 15:17:07 修改

阅读量2.6k

点赞数 20

CC 4.0 BY-SA版权

分类专栏： SVG笔记文章标签：前端

于 2024-11-20 18:02:56 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40421206/article/details/143921450

SVG笔记专栏收录该内容

3 篇文章

订阅专栏

初识GSAP

什么是GSAP
- GSAP全称是（ GreenSock Animation Platform）GreenSock 动画平台。
- GSAP 是一个强大的 JavaScript 动画库，可让开发人员轻松的制作各种复杂的动画。
GSAP动画库的特点
- 与Snap.svg不一样，GSAP无论是HTML 元素、还是SVG、或是Vue、React组件的动画，都可以满足你的需求。
- GSAP的还提供了一些插件，可以用最少的代码创建令人震惊的动画，比如：ScrollTrigger插件和MorphSVG插件。
- https://greensock.com/scrolltrigger
- GSAP 的核心是一个高速的属性操纵器，随着时间的推移，它可以极高的准确性更新值。它比 jQuery 快 20 倍！
- GSAP 使用起来非常灵活，在你想要动画的地方基本都可以使用，并且是零依赖。
GSAP官网：[https://greensock.com/]

GSAP基础使用

GSAP初体验：移动SVG中的一个矩形

第一步：安装 npm install gsap
第二步：导入 import { gsap } from "gsap";
第三步：调用 gsap.to 方法来执行 tween（补间/过度）动画。

onMounted(()=>{
  gsap.to('#rect', {
  x: 300,
  duration: 5
  })
})

GSAP补间动画方法

gsap.to()

用于将一个或多个对象从当前状态过渡到指定的目标状态。
gsap.to(targets, vars);
1. targets: 指定要应用动画的目标，可以是：
- CSS 选择器（如 ".box"）
- DOM 元素（如 document.querySelector(".box")）
- 元素数组（如 document.querySelectorAll(".box")）
- JavaScript 对象（如 {x: 0, y: 0}）
1. vars（对象）定义动画的属性、持续时间以及其他选项，常见属性包括：
- 动画属性（如 x, y, opacity, scale 等）
- 持续时间：duration（单位为秒）
- 缓动函数：ease（如 "power1.inOut"）
- 回调函数：onComplete, onUpdate, onStart 等

//target为基础选择器
onMounted(()=>{
  gsap.to('#rect', {
  x: 300,
  duration: 5
  })
})
//target为数组
onMounted(()=>{
  gsap.to(['#rect', 'cir'], {
  x: 300,
  duration: 5
  })
})

gsap.from()

用于创建从指定的状态到元素的当前状态的动画
gsap.from(targets, vars);
1. targets: 指定要应用动画的目标，支持以下格式：
- CSS 选择器（如 ".box"）
- DOM 元素（如 document.querySelector(".box")）
- 元素数组或 NodeList（如 document.querySelectorAll(".box")）
- JavaScript 对象（如 {x: 0, y: 0}）
1. vars: 定义动画的初始属性值、持续时间以及其他选项，常见属性包括：
- 初始属性（如 x, y, opacity, scale 等）
- 持续时间：duration（单位为秒）
- 缓动函数：ease（如 "power1.inOut"）
- 回调函数：onComplete, onUpdate, onStart 等

const handleCir = () => {
  gsap.from('#cir', {
    scale: 0.5,
    duration: 2
  })
}

gsap.fromTo()

用于在动画中同时定义起始状态（from）和结束状态（to）
gsap.fromTo(targets, fromVars, toVars);
1. targets: 动画的目标对象，支持：
- CSS 选择器（如 ".box"）
- DOM 元素（如 document.querySelector(".box")）
- 元素数组或 NodeList（如 document.querySelectorAll(".box")）
- JavaScript 对象（如 {x: 0, y: 0}）
1. fromVars: 定义动画的起始状态（初始属性值），类似于 gsap.from() 的配置。
2. toVars: 定义动画的结束状态（目标属性值），类似于 gsap.to() 的配置，并且可以包含缓动函数、回调函数等选项。

const handleCir = () => {
  gsap.fromTo(
    '#cir', 
    {
      scale: 0.5,
      duration: 2
    },
    {
      scale: 1,
      duration: 2
    }
  )
}

GSAP动画时间线

什么是动画时间线（TimeLine）：
- 时间线（TimeLine）是用来创建易于调整、有弹性的动画序列。
- 当我们将补间添加到时间线（Timeline）时，默认情况下，它们会按照添加到时间轴的顺序一个接一个地播放。
TimeLine的使用步骤：
- 第一步：安装 npm install gsap
- 第二步：导入 import { gsap } from "gsap";
- 第三步：通过gsap.timeline( vars ) 拿到时间线对象，timeline文档： https://greensock.com/docs/v3/GSAP/Timeline
- 第四步：调用时间线上的 Tween 动画方法，比如：form、to 等。

//时间线的基础使用
/*第一步：安装 npm install gsap */
/*第二步：导入 import { gsap } from "gsap"; */
/*第三步：拿到时间线对象*/
let timeline = gsap.timeline({
  //这里是全局配置，会应用到每个元素
  defaults: {
    scale: 0.5,
    duration: 1
  }
})
/*第四步：调用时间线上的 Tween 动画方法，比如：form、to 等 */
//时间线的to()方法
timeline.to('#rect1', {
  rotate: 30
}).to('#rect2', {
  fill: 'green'
}).to('#rect3', {
  scale: 1.5
})


//时间线的from()方法
let timeLine = gsap.timeline()
timeLine.from(['#wheel1', '#wheel2', '#wheel3', '#wheel4'], {
  scale: 0,  //设置目标元素缩放
  duration: 1,  //动画执行的时间
  transformOrigin: 'center',   //动画缩放的中心
  ease: 'bounce.out',  //动画执行的曲线类型
  stagger: 1  //多个目标元素错开执行时间
})

//时间线的fromTo()方法
let timeLine = gsap.timeline()
timeLine.fromTo(
['#dongxiao1', '#center'], 
  {
     scale: 0.5,  //设置目标元素缩放
     duration: 1,  //动画执行的时间
     transformOrigin: 'center',   //动画缩放的中心
     ease: 'none',  //动画执行的曲线类型
     stagger: 0  //设置为0使动画同时执行
   },
   {
     scale: 1,  //设置目标元素缩放
     duration: 1,  //动画执行的时间
     transformOrigin: 'center',   //动画缩放的中心
     ease: 'none',  //动画执行的曲线类型
     stagger: 0  //设置为0使动画同时执行
   },
)

//时间线的全局配置
const tl = gsap.timeline({
  defaults: { duration: 1, ease: "power1.out" }, //default: 为时间轴中的所有动画设置默认值，避免重复定义。
  repeat: -1,    //repeat: 设置时间轴的重复次数。 0（默认值）：不重复, 正整数：重复指定次数, -1：无限循环。
  repeatDelay: 1, //设置时间轴重复之间的间隔时间（单位：秒）。常与repeat搭配使用
  yoyo: false,  //设置时间轴是否在重复时反向播放。true：重复时反向播放, false（默认值）：重复时从头开始播放
  paused: false, // true：时间轴创建后暂停，需手动调用 .play() 开始。false（默认值）：自动开始播放
  onComplete: ()=>{},  //时间轴完成时触发的回调函数。
  onStart: () => {}, //时间轴开始播放时触发的回调函数。
  onUpdate: () => {}, //时间轴每次更新（帧刷新）时触发的回调函数。
  onRepeat: ()=> {},  //时间轴每次重复时触发的回调函数
  smoothChildTiming: true, //控制子动画在时间轴中的流畅性和精准性。true（默认值）：子动画保持流畅，与时间轴精准同步。false：子动画不受时间轴控制的影响，可能会有偏差
  id: 'id', //为时间轴设置唯一标识符，便于管理和调试。
});