gsapgsap使用..................................................

安装

npm install gsap
import { gsap } from "gsap";
import MotionPathPlugin from 'gsap/dist/MotionPathPlugin.js'
gsap.registerPlugin(MotionPathPlugin);

load.to(o, {
     motionPath:{
         path: `M0 0L760 700`,//这里的数值是相对距离，相对于o的位置
     },
},0);

实例：实现双击控制动画暂停播放

window.addEventListener("dblclick",()=>{
    console.log("dbclick");
    if(gsap.isActive()){
        gsap.pause();
    }else{
        gsap.resume();
    }
})

gsap动画防止触发多次:利用isAnimate变量，设置1s内只能触发一次

添加多个对象

gsap.to([],{stroke:"rgba(170,170,170,0)",duration:1,})

在外部修改动画的配置项

   // 定义动画配置对象
    var animationConfig = {
        duration: 8,
        ease: "none",
        motionPath: {
            path: `M280 410L630 150`,
        },
    };

// 创建时间线
var timeline = gsap.timeline();

// 在时间线上添加动画
timeline.to(a, animationConfig);

// 在需要的时候更新motionPath的path
function updateMotionPath(newPath) {
    animationConfig.motionPath.path = newPath;
    timeline.invalidate(); // 通知时间线需要重新计算
}

// 调用函数更新motionPath的path
updateMotionPath("M100 200L300 400");