gsap动画库

gsap动画库

GSAP文档

首先导入gsap动画库
npm i gsap -S
安装好了在项目中引用
import gsap from "gsap"

普通的页面使用

gsap.to('类名',{
    动画属性})
//我们也可以使用时间线来写动画
//创建一个时间线 ，然后再使用链式语法,做过视频剪辑的同学可能理解的更深
var tl = gsap.timeline();
tl.to(".box1", {
     rotation: 27, x: 100, duration: 10 }).to(".box1", {
     rotation: 27, x: 100, duration: 10 });

THREE界面的使用

//cube是实例化的3d物品 gsap.to反应的是物体的结果
let tl = gsap.timeline()
let ani = tl.to(cube.position, {
    
    x: 500, duration: 3,
    ease: "power1.inOut",
    yoyo: true,
    repeat: -1,
    delay: 2,
    onComplete: () => {
     console.log(1); },
    onStart: () => {
    
        console.log('开始了');
    }
})
//双击屏幕监听
window.addEventListener('dblclick', () => {
    
    console.log(ani.isActive());//是否处于运动状态
    if (ani.isActive()) {
    
        ani.pause() //动画停止
    } else {
    
        ani.resume()//动画恢复
    }
})

ease是速率
repeat 重复次数 -1 无限循环
yoyo往返运动
delay延时运动
onComplete是完成时候做的一个回调函数
onStart是开始时候做的一个回调函数