当前位置：首页 > news >正文

vue3+gsap实现圆形路径动画

news 来源：原创 2024/9/20 12:41:21

同学们可以私信我加入学习群！

正文开始

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

前言

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

一、引入并使用gsap

下载：

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":key="index":ref="el => setItemRef(index, el)":style="{left: particleItem.left+'px',top:particleItem.top+'px',backgroundColor:particleItem.color}"class="particle"></div>

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

二、详解gsap.to的各参数

motionPath
动画路径参数，这是MotionPathPlugin插件提供的能力。
motionPath.path
动画的路径设置，有两种设置方式：（1）手写路径数组：[{x:100, y:50}, {x:200, y:0}, {x:300, y:100}]（2）为svg中的path标签设置id，在此处关联id，本文采用第二种方式。
motionPath.align
align设置成 ‘#svg’，将动画目标的运动路径与SVG元素的路径对齐。
motionPath.alignOrgin
元素与路径的重合程度，或者说是元素与路径的偏离程度。alignOrgin设置为[0.5,0.5]表示动画元素在路径中央。本文设置成-5至5之间的随机数，是为了制造粒子发散的效果。
repeat
重复次数，设置为-1，指无限重复
duration
动画持续时间，这里设置成随机数，是为了让动画元素的运动速度有差别
ease
运动的方式，设置成linear指的是线性运动，这个可以查看gsap官网，有对各种运动方式的直观示例。
delay
动画延迟时间，这里设置成随机数，不同的页面元素开始运动的事件就会有差别。

三、路径svg

svg标签中定义了path，只要在path的id和motionPath中定义的id一致，动画就会沿着path定义的路径运动。

      <svg style="position: absolute" height="95%" viewBox="-160 -160 320 320" width="95%"xmlns="http://www.w3.org/2000/svg"><path id="svg"d="M 0 160A 160 160 0 0 1 0 -160A 160 160 0 0 1 0 160 Z"fill="transparent" stroke="none"/></svg>

上面是一个以原点为起始点的路径。

如果path设置成

        <path id="svg" d="M 0 0m -160, 0a 160,160 0 1,0 320,0a 160,160 0 1,0 -320,0"fill="transparent" stroke="black" stroke-width="2"/>

最终的路径仍然是个圆，但是因为起始点不为原点，最终动画沿着运动的圆会偏离我们想要的轨道。

最终效果如下：
在这里插入图片描述

四、其他路径

圆形路径实现后，如果要实现其他路径也只需要更换svg即可。其他代码我们都不改变，只是修改svg代码：

      <svg style="position: absolute" height="95%" viewBox="0 0 100 50" width="95%"xmlns="http://www.w3.org/2000/svg"><path id="svg" d="M 0,25C 10,30 20,18 30,25C 40,32 50,15 60,25C 70,35 80,18 90,25L 100,25" stroke="black" fill="none" stroke-width="2"/></svg>

将原来的圆形路径svg改成上面的正弦函数路径。渲染动画效果如下：
在这里插入图片描述
可以看到粒子沿着新的路径运动了。之所以显示上面的黑色路径，是因为我在svg中设置了stroke-width=“2”。

由此延伸，我们还可以把粒子改成文字，把上面代码做一些简单修改：

    <div id="test">中二少年工具箱</div>gsap.to('#test', {motionPath: {path: '#svg',align: '#svg',alignOrigin: [0.5,0.5]},repeat: -1, // 无限重复duration: 3 * Math.random() + 2, // 随机持续时间ease: 'linear', // 线性运动delay: Math.random() * 2 // 随机延迟})

最终效果：
在这里插入图片描述

文字路径动画

上面的多个文字一起运动，看起来还是有些生硬，大家经常看到在某些炫酷网站，会有一些文字沿着曲线运动的动画，使用gsap如何快速实现这种效果呢？

核心代码如下：

const charList=ref(['中','二','少','年','工','具','箱'])
function createAnimation(movementRange = 3) {const pathLength = document.querySelector('#svg').getTotalLength();const spacing = pathLength / 7;// 使用GSAP创建动画charList.value.forEach((particle, index) => {const initialOffset = spacing * index;// 使用GSAP创建动画console.log(particleRefs.value[index])gsap.set(particleRefs.value[index], {motionPath: {path: '#svg',align: '#svg',autoRotate: true,alignOrigin: [initialOffset / pathLength, 0.5]}});// gsap.set(particleRefs.value[index],{x:50-index*7,y:100})gsap.to(particleRefs.value[index], {motionPath: {path: '#svg',align: '#svg',alignOrigin:  [initialOffset / pathLength, 0.5]},repeat: -1, // 无限重复duration: 3, // 随机持续时间ease: 'linear', // 线性运动delay: index * 0.1 // 依次增加延迟时间})})}