81 lines
1.6 KiB
TypeScript
81 lines
1.6 KiB
TypeScript
import gsap from "gsap";
|
|
|
|
export const useIntroStore = defineStore("intro", {
|
|
state: () => ({
|
|
intro: {
|
|
textOpacity: 0,
|
|
logoFrameIndex: 0,
|
|
},
|
|
|
|
outro: {
|
|
textOpacity: 1,
|
|
backgroundOpacity: 0,
|
|
},
|
|
|
|
isIntro: true,
|
|
isOutro: false,
|
|
}),
|
|
|
|
actions: {
|
|
animateIntro() {
|
|
this.isIntro = true;
|
|
|
|
const { assets } = useAssets();
|
|
const totalFrames = Object.keys(assets.images.intro.logoAnimated).length;
|
|
const logoDuration = totalFrames / 25;
|
|
|
|
gsap
|
|
.timeline()
|
|
.to(
|
|
this.intro,
|
|
{
|
|
textOpacity: 1,
|
|
duration: 0.1,
|
|
ease: "none",
|
|
},
|
|
4.1,
|
|
)
|
|
.to(
|
|
this.intro,
|
|
{
|
|
logoFrameIndex: totalFrames - 1,
|
|
duration: logoDuration,
|
|
ease: "steps(" + (totalFrames - 1) + ")",
|
|
},
|
|
4.1,
|
|
)
|
|
.call(
|
|
() => {
|
|
this.isIntro = false;
|
|
},
|
|
[],
|
|
4.1,
|
|
);
|
|
},
|
|
|
|
animateOutro() {
|
|
this.isOutro = true;
|
|
|
|
gsap
|
|
.timeline()
|
|
.to(this.outro, {
|
|
textOpacity: 0,
|
|
duration: 0.25,
|
|
ease: "none",
|
|
})
|
|
.to(this.outro, {
|
|
backgroundOpacity: 1,
|
|
duration: 0.5,
|
|
delay: 0.5,
|
|
ease: "none",
|
|
})
|
|
.call(() => {
|
|
const app = useAppStore();
|
|
const achievements = useAchievementsStore();
|
|
app.booted = true;
|
|
achievements.unlock("boot");
|
|
});
|
|
},
|
|
},
|
|
});
|