前端技术

GSAP 3 基本使用手册

GSAP 全称是 GreenSock Animation Platform，是一个 JS 动画框架。

GSAP 利用补间更好的控制动画，几乎可以为任何对象的任何属性设置动画。

如何使用

安装

在项目文件夹中初始化 node 后，执行以下命令

npm install gsap

在 js 文件中引用插件

import { gsap } from "gsap";

调用 GSAP

gsap 需要两个参数，首先是动画的目标对象，可以是一个或多个容器，也可以是 JS 中的对象。第二个是属性对象，里面包含动画所有的属性设置。

gsap.to(target, { ... })
// 让 div 容器在一秒内水平移动 100 px
gasp.to('.item', { duration: 1, x: 100 })

// 给对象设置动画
var obj = {prop: 10};
gsap.to(obj, {
  duration: 1,
  prop: 200, 
  onUpdate: function() {
    console.log(obj.prop)
  }
});

// 同时设置多个对象
gsap.to([obj1, obj2, obj3], { ... })

执行动画

3种方式执行动画。

to()

从初始化 / 默认状态运动到设置的状态

gsap.to('.item', { duration: 1, x: 100, stagger: 0.5});

from()

从设置的状态运动到默认状态

gsap.from('.item', { duration: 1, x: 100, stagger: 0.5});

fromTo()

同时设置对象的开始状态与结束状态。包含了三个选项

  • 目标：设置动画的对象
  • 起始状态：包含起始状态的所有属性，不可在这里设置特殊属性，如持续时间，延迟等。
  • 结束状态：包含结束状态的所有属性以及其他特殊属性
gsap.fromTo('.item',
  {
    opacity: 0,
  },
  {
    opacity: 0.8,
    duration: 1,
    ease: "elastic",
  },
);

动画中的特殊属性

  • callbackScope
  • data
  • delay : 动画延迟时间
  • duration : 动画持续时间
  • ease : 动画曲线
  • id : 为动画实例设置一个标识符，可以使用 getById() 进行调用
  • immediateRender
  • inherit
  • lazy
  • onComplete : 执行回调函数
  • onCompleteParams
  • onInterrupt
  • onInterruptParams
  • onRepeat
  • onRepeatParams
  • onReverseComplete
  • onReverseCompleteParams
  • onStart
  • onStartParams
  • onUpdate
  • onUpdateParams
  • overwrite
  • paused : 如果设为 true ，动画将在创建时立即暂停，默认为 false
  • repeat : 动画重复次数，默认为 0 不重复，如果设为 -1 将无限重复
  • repeatDelay : 动画重复的延迟时间，默认为 0
  • repeatRefresh
  • reversed
  • runBackwards
  • stagger：序列动画
  • startAt
  • yoyo：往返播放动画
  • yoyoEase
  • keyframes : 设置关键帧动画

stagger

实现一组元素依次执行动画，stagger 后的数值为延迟事件（秒）。

gsap.to('.item', { duration: 1, x: 100, stagger: 0.5})

keyframe

单个物体依次执行动画

gsap.to('div', {
  keyframes: [
    {duration: 1, x: 100},
    {delay: 1, duration: 1, y:100},
    {delay: 1, duration: 1, rotation: 360},
  ]
})

timeline()

可以让一组动画在一个时间线里先后执行。

const tl = gsap.timeline()
tl.to('.div1', { duration: 1, x: 100, ease: Expo.easeInOut })
  .to('.div2', { duration: 1, y: 100, ease: Expo.easeInOut })

// 简化写法
const tl = gsap.timeline({defaults: { duration: 1, ease: Expo.easeInOut }})
tl.to('.div1', { x: 100 })
  .to('.div2', { y: 100 })
tl.to(".class", {x: 100}, 3)
tl.to(".class", {x: 100}, "+=1")
tl.to(".class", {y: 100}, "-=1")
tl.to(".class", {x: 100}, "someLabel")
tl.to(".class", {x: 100}, "someLabel+=2")
tl.to(".class", {x: 100}, "<")
tl.to(".class", {x: 100}, ">")
tl.to(".class", {x: 100}, "<1")
tl.to(".class", {y: 100}, "<-2")
tl.to(".class", {x: 100, duration: 1}, ">1")
tl.to(".class", {y: 100, duration: 1}, ">-2")
// think of "<" and ">" as pointers to the start or end of the most recently-added animation.

config()

GSAP 的配置（非动画属性），提供了以下选项：

  • autoSleep：检测多少帧后关闭代码执行，以节省系统资源，默认为120帧（2秒）；
  • force3D：默认 auto，设置 false 禁用该行为，true 则将强制所有变换使用 3D 组件；
  • nullTargetWarn：默认情况下，当 GSAP 为不存在的对象执行动画时会提示警告，设置为 false 将关闭警告提示；
  • trialWarn：试用版插件将提示警告，设置为 false 关闭警告
  • units：设置默认单位，同 css 单位一致，默认为 px
gsap.config({
  autoSleep: 60,
  force3D: false,
  nullTargetWarn: false,
  trialWarn: false,
  units: {left: "%", top: "%", rotation: "rad"}
})

defaults()

设置整个项目的默认值，所有项目将继承该默认设置的动画属性

gsap.defaults({
  duration: 1,
  ease: Expo.easeInOut
})

set()

初始化对象状态

gsap.set(".item", {x: 100, y: 50, opacity: 0})

ease

https://www.youtube.com/watch?v=GDl2SS1lT4A&list=PLSkIx8U0TMvgH2PEokYLIxofdb1L9cJjz&index=8

补间属性

x / y

fill

scale / scaleX / scaleY

rotation / rotationX / rotationY

skewX / skewY

xPercent / yPercent

特殊属性

https://greensock.com/docs/v3/Eases

autoRemoveChildren

onUpdate

onUpdateParams

smoothChildTiming

方法

delayedCall()

当设定的时间后调用一个函数，可以向函数传递参数

gsap.delayedCall(1, myFunction, ["param1", "param2"])

function myFunction(param1, param2) {
  ...
}

getProperty()

获取元素属性

gsap.getProperty("#id", "x") // 返回一个数字
gsap.getProperty("#id", "x", "px") // 返回一个带单位的数字
gsap.getProperty("#id", "backgroundColor") // 返回背景色

getTweensOf()

返回一个动画补间数组

gsap.to(obj1, {x: 100})
gsap.to(obj2, {x: 100})
gsap.to([obj1, obj2], {opacity: 0})

var a1 = gsap.getTweensOf(obj1) //finds 2 tweens
var a2 = gsap.getTweensOf([obj1, obj2]) //finds 3 tweens

isTweensOf()

判断一个对象是否正则进行动画

if (!gsap.isTweening("#id")) {
  ...
}

killTweensOf()

销毁补间动画

// 销毁全部属性
gsap.killTweensOf(".myClass")

// 销毁指定属性
gsap.killTweensOf(myObject, "opacity,x")

registerEase()

注册一个自定义的动画缓动

gsap.registerEase("myEaseName", function(progress) {
    return progress;
})
gsap.to(".class", {x:100, ease:"myEaseName"});

registerEffect()

gsap.registerEffect({
  name: "fade",
  effect: (targets, config) => {
    return gsap.to(targets, {duration: config.duration, opacity: 0});
  },
  defaults: {duration: 2},
  extendTimeline: true
});

gsap.effects.fade(".box");

// 还可以在时间线中进行调用
let tl = gsap.timeline();
tl.fade(".box", {duration: 3})
  .fade(".box2", {duration: 1}, "+=2")
  .to(".box3", {x:100})

registerPlugin()

exportRoot() ?

一个新的时间线实例，包含根补间与时间线

var tl = gsap.exportRoot();
gsap.to(tl, {duration: 0.5, timeScale: 0})
gsap.fromTo(myWindow,
  {
    scaleX: 0,
    scaleY: 0
  },
  {
    duration: 1,
    scaleX: 1,
    scaleY: 1
  }
)

getById() ?

parseEase()

quickSetter()

updateRoot()

totalTime()

totalDuration()

time()

then()

targets()

startTime()

reversed()

restart()

repeatDelay()

progress()

iteration()

isActive()

invalidate()

eventCallback()

endTime()

yoyo()

checkPrefix()

clamp()

distribute()

getUnit()

interpolate()

mapRange()

normalize()

pipe()

random()

selector()

shuffle()

snap()

splitColor()

toArray()

unitize()

wrap()

wrapYoyo()

random()

随机效果

gsap.to('div', {
  duration: 1,
  x: 'random(100, 500)'，
  y: 'random(50, 200)'
})

auto

自动扩展容器宽高

gsap.to('div', {
  duration: 1,
  width: 'auto',
  height: 'auto'
})

repeat

重复执行

gsap.to('div', {
  duration: 1,
  x: 100,
  repeat: 5
})

repeatRefresh

从结束的状态继续执行

gsap.to('div', {
  duration: 1,
  x: 100,
  repeat: 5,
  repeatRefresh: true
})

globalTimeline

globalTimeline.play() // 播放动画
globalTimeline.pause() // 暂停动画
globalTimeline.timeScale(0.5) // 设置动画速率

全局动画设定

同 css 属性进行匹配
x => translateX
y => translateY
rotation => rotate
rotationX => rotateX
rotationY => rotateY

可以使用 css 的单位

回调

onComplete

onStart

onUpdate

onRepeat

onReverseComplete

控制动画

pause()

resume()

reverse()

seek()

progress()

timeScale()

kill()

Getter / Setter 方法

time()

progress()

duration()

delay()

其他

GSAP 默认动画持续时间为 500 毫秒.

参考链接

官方入门教程
https://greensock.com/get-started/

视频教程
https://www.bilibili.com/video/BV1hJ411i71F?spm_id_from=333.999.0.0

内容目录

PUJI Design 朴及设计 (c) 2024. 沪ICP备17052229号