有任何问题，欢迎站内私信博主交流。

正文开始

前言一、引入并使用gsap二、详解gsap.to的各参数三、路径svg四、其他路径文字路径动画总结

前言

我开发的桌面端软件最近增加了在线更新功能，其中更新动画部分是由gsap实现的，整体实现思路已经在electron系列文章中简单介绍过，因为关注我的桌面软件——中二少年工具箱开发的同学，不一定会关注gsap动画插件，所以这里单独拿出来，详细介绍如何使用gsap实现路径动画。

一、引入并使用gsap

下载：

<code>npm i gsap

引入页面：

import { -- -->gsap} from "gsap/all";

制作路径动画，还需要MotionPathPlugin插件，此 插件是内置免费插件，可直接使用：

import { MotionPathPlugin} from "gsap/MotionPathPlugin";

gsap.registerPlugin(MotionPathPlugin)

调用gsap.to()方法，为页面元素创建动画：

function createAnimation(movementRange = 3) {

// 使用GSAP创建动画

particlesList.value.forEach((particle, index) => {

// 使用GSAP创建动画

gsap.to(particleRefs.value[index], {

motionPath: {

path: '#svg',

align: '#svg',

alignOrigin: [Math.random() * 10 - 5, Math.random() * 10 - 5]

},

repeat: -1, // 无限重复

duration: 3 * Math.random() + 2, // 随机持续时间

ease: 'linear', // 线性运动

delay: Math.random() * 2 // 随机延迟

})

})

}

因为我的项目基于vue3，所以gsap.to的第一个参数，使用的是利用ref创建的对象，而不是类名或者id。

particlesRefs创建的方法是：

const particleRefs = ref({ })

function setItemRef(index, el) {

if (el) {

// 如果元素存在，则将其存储在对象中

particleRefs.value[index] = el

} else {

// 如果元素不存在（可能是被销毁了），则从对象中删除

delete particleRefs.value[index]

}

}

setItemRef方法则挂在在页面元素上：

<div v-for="(particleItem,index) in particlesList"code>

:key="index"code>

:ref="el => setItemRef(index, el)"code>

:style="{left: particleItem.left+'px',top:particleItem.top+'px',backgroundColor:particleItem.color}"code>

class="particle">code>

</div>

这样就可以循环生成每个div的动态ref

二、详解gsap.to的各参数