148 lines
2.8 KiB
TypeScript
148 lines
2.8 KiB
TypeScript
import gsap from "gsap";
|
|
import * as THREE from "three";
|
|
|
|
export const useGalleryStore = defineStore("gallery", {
|
|
state: () => ({
|
|
intro: {
|
|
fadeOpacity: 0,
|
|
},
|
|
|
|
outro: {
|
|
fadeOpacity: 1,
|
|
},
|
|
|
|
isIntro: true,
|
|
isOutro: false,
|
|
shouldAnimateOutro: false,
|
|
}),
|
|
|
|
actions: {
|
|
animateIntro() {
|
|
const CAMERA_DELAY = 0.7;
|
|
const CAMERA_DURATION = 3;
|
|
|
|
const FADE_DELAY = 0;
|
|
const FADE_DURATION = 1;
|
|
|
|
this.isIntro = true;
|
|
this.isOutro = false;
|
|
|
|
const app = useAppStore();
|
|
if (app.camera) {
|
|
gsap.fromTo(
|
|
app.camera.position,
|
|
{
|
|
x: 0,
|
|
y: 10,
|
|
z: 12,
|
|
},
|
|
{
|
|
x: 0,
|
|
y: 3,
|
|
z: -1.7,
|
|
duration: CAMERA_DURATION,
|
|
delay: CAMERA_DELAY,
|
|
ease: "power2.inOut",
|
|
},
|
|
);
|
|
|
|
gsap.fromTo(
|
|
app.camera.rotation,
|
|
{
|
|
x: THREE.MathUtils.degToRad(-38.3),
|
|
y: 0,
|
|
z: 0,
|
|
},
|
|
{
|
|
x: THREE.MathUtils.degToRad(-25),
|
|
y: 0,
|
|
z: 0,
|
|
duration: CAMERA_DURATION * 0.9,
|
|
delay: CAMERA_DELAY,
|
|
ease: "power2.inOut",
|
|
},
|
|
);
|
|
}
|
|
|
|
gsap.fromTo(
|
|
this.intro,
|
|
{ fadeOpacity: 0 },
|
|
{
|
|
fadeOpacity: 1,
|
|
duration: FADE_DURATION,
|
|
delay: FADE_DELAY,
|
|
ease: "none",
|
|
},
|
|
);
|
|
|
|
setTimeout(() => {
|
|
navigateTo("/gallery");
|
|
}, 3150);
|
|
},
|
|
|
|
animateOutro() {
|
|
const CAMERA_DELAY = 0;
|
|
const CAMERA_DURATION = 3;
|
|
|
|
const FADE_DELAY = 2.3;
|
|
const FADE_DURATION = 1;
|
|
|
|
this.isIntro = false;
|
|
this.isOutro = true;
|
|
|
|
const app = useAppStore();
|
|
if (app.camera) {
|
|
gsap.fromTo(
|
|
app.camera.position,
|
|
{
|
|
x: 0,
|
|
y: 3,
|
|
z: -1.7,
|
|
},
|
|
{
|
|
x: 0,
|
|
y: 10,
|
|
z: 12,
|
|
duration: CAMERA_DURATION,
|
|
delay: CAMERA_DELAY,
|
|
ease: "power2.inOut",
|
|
},
|
|
);
|
|
|
|
gsap.fromTo(
|
|
app.camera.rotation,
|
|
{
|
|
x: THREE.MathUtils.degToRad(-25),
|
|
y: 0,
|
|
z: 0,
|
|
},
|
|
{
|
|
x: THREE.MathUtils.degToRad(-38.3),
|
|
y: 0,
|
|
z: 0,
|
|
duration: CAMERA_DURATION * 0.9,
|
|
delay: CAMERA_DELAY,
|
|
ease: "power2.inOut",
|
|
},
|
|
);
|
|
}
|
|
|
|
gsap.fromTo(
|
|
this.outro,
|
|
{ fadeOpacity: 1 },
|
|
{
|
|
fadeOpacity: 0,
|
|
duration: FADE_DURATION,
|
|
delay: FADE_DELAY,
|
|
ease: "none",
|
|
},
|
|
);
|
|
|
|
setTimeout(() => {
|
|
this.isOutro = false;
|
|
app.navigateTo("home");
|
|
}, 3310);
|
|
},
|
|
},
|
|
});
|