TypeScript小状况之选且只选一个

一、前言

今天还是带大家实验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新建四个球

样式

.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});
} 

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还有个缓冲的过程，这个就看具体场景决定使用哪个吧。

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

这次我们先生成

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) 

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

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享