不亦说乎

three之gsap动画

1.导入动画

import gsap from "gsap";

gsap.to(cube.position, { x: 200 })

2.gsap基本属性

• html元素，可以设置的属性

X: 1,
y: 1,
xPercent: -5,
yPercent: -5,
rotation: 360,
scale: 2
transFomeOrigin:'0% 100%'

• css样式属性, 可以使用其他单位，例如 vw、弧度，甚至可以进行自己的 JS 计算或相对值！

translateX(100px)
translatey(100px)
rotation: 360,
scale: 2
transFomeOrigin:'0% 100%'

3.GSAP特殊属性控制动画

duration：动画持续时间（秒） 默认值：0.5
delay：动画开始前的延迟量（秒）
repeat：动画应该重复多少次。-1为一直重复
yoyo：如果为 true，则每隔一个重复，补间将沿相反方向运行。（像悠悠球一样）默认值：false
ease：控制动画期间的变化率 'none' -- 'bounce.out'
onStart: 动画开始
onUpdate：动画值更新时调用的函数
onComplete：动画完成时调用的函数

4.交错动画

gsap.from(".box", {
  duration: 2,
  scale: 0.5, 
  opacity: 0, 
  delay: 0.5, 
  stagger: 0.2,
  ease: "elastic", 
  force3D: true
});

document.querySelectorAll(".box").forEach(function(box) {
  box.addEventListener("click", function() {
    gsap.to(".box", {
      duration: 0.5, 
      opacity: 0, 
      y: -100, 
      stagger: 0.1,
      ease: "back.in"
    });
  });
});

5.时间线

/* 顺序执行动画 */
let tl = gsap.timeline()

// 现在用tl代替以前的gsap来设置动画即可。
tl.to(".green", { x: 600, duration: 2 });
tl.to(".purple", { x: 600, duration: 1 });
tl.to(".orange", { x: 600, duration: 1 });

6.场景应用

• 模型移动 相机移动

let gsapTogg = gsap.to(camera.position, {
    x: 50,
    y: 50,
    z: 100,
    duration: 10,
    ease: "none",
    onUpdate: () => {
          camera.lookAt(0, 0, 0);
    },
    onComplete: () => {
        gsapTogg = gsap.to(camera.position, {
            x: 50,
            y: 50,
            z: 100,
            duration: 3,
            ease: "none",
            onUpdate: () => {
              camera.lookAt(0, 0, 0);
            },
        })
    }
})

• 动画暂停/恢复/删除

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