持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

一、前言

gsap的方法实在是太多了，本期都不着重讲gsap的函数方法，我们来对其中的比较常用的动画钩子函数来一波学习一下。

先附上gsap文档英文版,有兴趣的小伙伴可以自己去学习一波，自己动手丰衣足食。

如果英文不太行，那这个TweenMax中文版也可以参考一下，tweenMax是gsap的子集关系。

二、动画函数

1、onStart

当动画开始渲染时执行此事件函数

如果用该钩子函数需要注意：能会反复执行，因为动画是可以重复执行的

我就直接用上期的demo，直接添加这几个钩子函数，让大家直观点感受

钩子函数的写法基本是在动画效果里，作为一个属性跟着的，首先我定义了

cssSetter = gsap.quickSetter(".ball", "css")

然后调用cssSetter，参数就是动画效果了，所以钩子函数直接跟在后面。

setInterval(() => {
  cssSetter({
    x:"+=100", 
    y:"random(-100, 100)",
    onStart: () => {
      console.log('动画开始')
    }
  })
}, 1500)

效果如下，因为有四个元素都是用了.ball这个属性，所以可以看到，每次调用，会触发四次onStart函数，也就是说这些钩子的计数方式都是按个来算的，改变了几个变量的状态就会触发几次。

开始函数.gif

2、onComplete

在动画结束时触发此回调函数。

同样也是按改变的数量来计算的。

由于本文用的是quickSetter,于是乎，onStart执行完之后，会马上执行onComplete函数,我们再套一个设置背景颜色的动画。(动画可以同时执行，可以嵌套)

setInterval(() => {
  cssSetter({
    x:"+=100", 
    y:"random(-100, 100)",
    onStart: () => {
      //console.log('动画开始')
    },
    onComplete: () => {
      console.log('动画完成')
      gsap.set(".ball",
       {backgroundColor: 'random(["red", "blue", "green"])'})
    }
  })
}, 1500)

就会出现下面的效果

完成函数.gif

3、onUpdate

当动画发生改变时(动画进行中的每一帧)不停的触发此事件。

同时如果是重复动画，那delay期间不会触发，不过repeatDelay时会触发

基本是用来监听时间变化，或者其他有特殊要求的场景，不然比较耗费性能。

下面我们来试试吧

let gasTo
function gaspTo(): void {
  gasTo = gsap.to('.ball', {
    x: 300,
    duration: 2, // 持续2秒
    repeat: 2, //  循环2+1次
    delay: 3, // 延迟1秒执行
    onUpdate: () => {
      console.log('gengx')
      gsap.set(".ball",
       {backgroundColor: 'random(["red", "blue", "green"])'})
    },
    onComplete: () => {
      console.log('动画完成')
    }
  })
}

可以看到在第一次的delay期间，是不会触发opUpdate函数的，不过后续重复的时候，就也会触发了。而且onComplete函数只会执行一次。

delay函数.gif

如果把上述的delay换成repeatDelay，那就会变成，每次之后都会延迟3s，这时状态没有变化，自然也就不会触发onUpdate函数。

reeatdelay函数.gif

三、小结

以上三个感觉会常用一些，对应gsap还有好多函数，大家伙感兴趣可以去试试。

好了，gsap库的动画就更新到这里吧，后续看下有没有机会带大家实现下比较炫酷的效果。想象力比较匮乏，估计会挺久的。

ps: 我是地霊殿__三無，希望能和大家一起进步！

gsap钩子函数

一、 前言