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

一、前言

今天还是带大家实验gsap库，跟to、from、fromTo不同，今天的set和quickSetter都是0过渡动画，等于是直接修改元素状态的。

二、函数

1、 gsap.set

gsap.set(参数1，参数2) 就是告诉动画对象，是从当前状态立刻变成什么状态

参数1告知需要绑定哪个动画对象
参数2就是要告知对象将变成的状态

官网上给了例子，说这两个的效果是一致的，就很明显的说明了，set函数就是to函数设置duration为0的时候。

gsap.set(".class", {x: 100, y: 50, opacity: 0});
gsap.to(".class", {duration: 0, x: 100, y: 50, opacity: 0});

两者都支持多个对象的写法。

比如下面这种写法，可以同时设置obj1，obj2，obj3，当然可以有obj4，obj5等等，同步去修改他们的状态

gsap.set([obj1, obj2, obj3], {x: 100, y: 50, opacity: 0});

接下来让我们试试看吧

这次我们新开一个vue文件，声明个变量

let arr = [
  {left: 0},
  {left: 60},
  {left: 120},
  {left: 180}
]

v-for新建四个球

<template>  
  <div @click="gsapSet">点击触发gsap.set函数</div>
  <div v-for="(item,index) in arr" class="ball" :style="{left: item.left + 'px'}" :key="index + 'ss'" />
</template>

样式

.ball {
  width: 50px;
  height: 50px;
  background-color: bisque;
  border-radius: 50%;
  position: absolute;
  top: 10px;
}

效果长这样，有点简陋哈

关键是这个set函数，也非常简单，就能将上述四个球整体移动到top为100px的位置

function gsapSet(): void {
  gsap.set(".ball", {top: 100});
}

set瞬间.gif

2、中间突然顿悟

我一直以为gsap这些函数的参数1，必须是对应的变量或者具体的dom，才能起效，因为之前是配合threejs来实现动画效果的，现在才发现原来参数1可以直接是class类名（.class名），也可以直接就是id值(#id值)。

有点后知后觉哈哈，继续继续！

3、gsap.quickSetter

gsap.quickSetter(参数1，参数2，参数3) 就是告诉动画对象，是从当前状态立刻变成什么状态

参数1告知需要绑定哪个动画对象
参数2就是要告知对象将变化的属性
参数3就是变化之后的状态，可以再调用的时候再给

下面我们先试一下修改x y属性，实现鼠标跟随

样式和元素不变，方法我们修改一下

首先我们创建xSetter和ySetter用来分别对x和y属性值进行修改，这里我比较奇怪的是，由于我使用的是ts，所以变量创建的时候需要给类型之前调用quickTo的时候，

let yTo: gsap.QuickToFunc | ((arg0: number) => void)

可以gsap.QuickToFunc，到了这里我用gsap.QuickSetterFunc就报错，只能用下面的Function

let xSetter: Function | ((valueToClamp: number) => unknown)
let ySetter: Function | ((valueToClamp: number) => unknown)
function gsapQuickSet(): void {
  xSetter = gsap.utils.pipe(
    gsap.utils.clamp(0, 1000),    //限制x的值在0-1000之间
    gsap.utils.snap(5),          //最小变量为5，即每次变化需要超过5，才会触发动画
    gsap.quickSetter(".ball", "x", 'px') //
  )
  ySetter = gsap.utils.pipe(
    gsap.utils.clamp(0, 1000),    //限制x的值在0-1000之间
    gsap.utils.snap(5),          //最小变量为5，即每次变化需要超过5，才会触发动画
    gsap.quickSetter(".ball", "y", 'px') //apply it to the #id element's x property and append a "px" unit
  )
}

创建好函数后，老规矩先初始化

setTimeout(() => {
  gsapQuickSet()
}, 1000)

然后鼠标移动事件挂载到window

window.addEventListener('mousemove', e => {
  console.log(e.pageX, e.pageY)
  xSetter(e.pageX)
  ySetter(e.pageY)
  // yTo(e.pageY)
})

就能出现下面的效果啦，跟quickTo相比实现基本一致，但是少了中间拖动的效果，基本元素是紧跟鼠标移动的，不像quickTo还有个缓冲的过程，这个就看具体场景决定使用哪个吧。

quickSetter鼠标跟随.gif

下面我们再来试试其他写法

这次我们先生成

let cssSetter: Function

同样还是这个函数，不过把之前的代码注释，只留新的cssSetter，可以看到我只给了两个参数，第二个是css，这次我们直接修改整体css属性

function gsapQuickSet(): void {
  // xSetter = gsap.utils.pipe(
  //   gsap.utils.clamp(0, 1000),    //限制x的值在0-1000之间
  //   gsap.utils.snap(5),          //最小变量为5，即每次变化需要超过5，才会触发动画
  //   gsap.quickSetter(".ball", "x", 'px') //
  // )
  // ySetter = gsap.utils.pipe(
  //   gsap.utils.clamp(0, 1000),    //限制x的值在0-1000之间
  //   gsap.utils.snap(5),          //最小变量为5，即每次变化需要超过5，才会触发动画
  //   gsap.quickSetter(".ball", "y", 'px') //apply it to the #id element's x property and append a "px" unit
  // )
  cssSetter = gsap.quickSetter(".ball", "css")
}

初始化还是要的，同时为了更明显一点，我把元素的top初始设置为了210px(一开始是10px), 不过这次触发我们用setInterval，不再挂载window了

setInterval(() => {
  cssSetter({x:"+=100", y:"random(-100, 100)"})
  // 每1.5s,  x增加100， y在每次增加或减少100以内的随机数
}, 1500)

效果是四个球，匀速向右移动，且同时上下随机

quickSetter向右匀速移动.gif

三、小结

gsap真的好好玩，下期真的出钩子函数的那期了

ps: 我是地霊殿__三無，希望大家伙国庆快乐啊！

gsap.set和gsap.quickSetter两兄弟