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

一、前言

这个gsap库真是个宝藏库，有了gsap.to，为什么还需要gsap.quickTo，其实是因为gsap.to常常有需要多次调用的场景，所以gsap.quickTo就出现了，gsap.quickTo可以内部帮我们集成好了，可以更加方便快捷调用gsap.to函数，今天我们就来试试吧。

二、过程

1、 gsap.quickTo

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

参数1告知需要绑定哪个动画对象
参数2就是要告知对象的哪个属性，一般是x和y，会自动换算的
参数3是动画的效果

2、整体思路

创建animateQuickTo函数，里面包括了gsap.quickTo的初始化信息，

然后先行调用创建animateQuickTo函数，去初始化完gsap.quick,

随后在某个元素上绑定鼠标move事件，或者直接挂载到window上（本文做法）

在鼠标move事件里，实时触发xTo和yTo

3、具体实现

animateQuickTo函数，str里元素id，用来绑定元素的

let xTo: gsap.QuickToFunc | ((arg0: number) => void)
let yTo: gsap.QuickToFunc | ((arg0: number) => void)
function animateQuickTo(str: string) {
  xTo = gsap.quickTo(document.getElementById(str), "x", {duration: 0.8, ease: "power3"})
  yTo = gsap.quickTo(document.getElementById(str), "y", {duration: 0.8, ease: "power3"})
}

元素标签为

<div id="gsapQuickTo" @click="carAnimate">点击</div>

样式

#gsapQuickTo {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100px;
  height: 100px;
  font-size: 20px;
  color: rgb(199, 58, 100);
  background: url('../assets/vue.svg');
  background-size: 100% 100%;
}

调用函数初始化gsap配置，由于是vue3，我还不太清楚什么周期是标签渲染完成的时机，所以就暂时用定时器来确保是标签渲染完成后，才调用的初始化函数

setTimeout(() => {
  animateQuickTo('gsapQuickTo')
}, 1000)

挂载到window上的鼠标移动事件

window.addEventListener('mousemove', e => {
  xTo(e.pageX)
  yTo(e.pageY)
})

接下来来看看效果吧

quick鼠标跟随.gif

4、小扩展

文档里还提供了另一种写法，我们也试试吧，顺便加了个随机文字的动能，在完成动画的onComplete周期里实现

function animateQuickTo(str: string) {
 xTo = gsap.utils.pipe(
   gsap.utils.clamp(0, 1000),    // 限制属性变化在0到1000之间
   gsap.utils.snap(5),          // 最小变量为5，即每次变化需要超过5，才会触发动画
   gsap.quickTo(document.getElementById(str), "x", 
   {
     duration: 0.8, ease: "power3",
     onComplete: () => {
       console.log('完成动画了')
       const strarr = ['跟过来', '别掉队', '马上到', '草上飞']
       const index = Math.floor(Math.random() * 4)
       document.getElementById('gsapQuickTo').innerText = strarr[index]
     }
   })
 )
 yTo = gsap.utils.pipe(
   gsap.utils.clamp(0, 1000),    // 限制属性变化在0到1000之间
   gsap.utils.snap(5),          // 最小变量为5，即每次变化需要超过5，才会触发动画
   gsap.quickTo(document.getElementById(str), "y", {duration: 0.8, ease: "power3"})
 )
 // 原先不限制的写法
 // xTo = gsap.quickTo(document.getElementById(str), "x", {duration: 0.8, ease: "power3"})
 // yTo = gsap.quickTo(document.getElementById(str), "y", {duration: 0.8, ease: "power3"})
}

我们再看看效果吧，可以看到，元素的移动范围被限制在了1000px * 1000px以内，就算鼠标移出去，元素也不会再跟随出来了。

quick鼠标跟随增加限制.gif

三、小结

用法还是比较简单的，感觉可以被我们前端玩出花，下期针对gsap的钩子函数来出一期。

ps: 我的地霊殿__三無，希望本文可以引起你对gsap的兴趣。

gsap.quickTo，实现网页元素跟随鼠标效果

一、 前言

二、 过程