gsap动画库的使用

gsap动画库

greensock.com/docs/v3/GSA…

快速开始

1.下载

npm install gsap

2.代码展示

// 设置动画
// https://greensock.com/docs/v3/GSAP/Tween
// https://greensock.com/get-started/#delays
var animatePosition = gsap.to(mesh.position, {
    x: 5,
    duration: 5,
    repeat: -1, //次数，无限次是-1
    yoyo: true, //往返运动
    delay: 2, //延迟2s
    ease: "power1.inOut", //elastic
    onComplete: () => {
        console.log("动画完成")
    },
    onStart: () => {
        console.log("动画开始")
    },
})
var animateRotation = gsap.to(mesh.rotation, {
    x: 5 * Math.PI,
    duration: 5,
    ease: "power1.inOut", //elastic
})
// 双击切换是否停止动画
window.addEventListener('dblclick', () => {
    // 判断是否是动画状态
    animatePosition.isActive() ? animatePosition.pause() : animatePosition.resume()
})