pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(settings): intro and outro animation

Browse Source
This commit is contained in:
Stevan
2026-02-05 20:44:19 +01:00
parent 098285ee82
commit 1236e86981
10 changed files with 306 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/Home/TopScreen/Calendar.vue
View File

@@ -24,7 +24,7 @@ onRender((ctx) => {
const daysInMonth = new Date(year, month + 1, 0).getDate();
ctx.globalAlpha = store.isIntro
? store.intro.stage1Opacity
? store.intro.topScreenOpacity
: store.isOutro && store.outro.animateTop
? store.outro.stage1Opacity
: 1;
@@ -44,7 +44,7 @@ onRender((ctx) => {
}
ctx.globalAlpha = store.isIntro
? store.intro.stage1Opacity
? store.intro.topScreenOpacity
: store.isOutro && store.outro.animateTop
? store.outro.stage2Opacity
: 1;

4
app/components/Home/TopScreen/Clock.vue
View File

@@ -55,14 +55,14 @@ function drawLine(
onRender((ctx) => {
ctx.globalAlpha = store.isIntro
? store.intro.stage1Opacity
? store.intro.topScreenOpacity
: store.isOutro && store.outro.animateTop
? store.outro.stage1Opacity
: 1;
assets.images.home.topScreen.clock.draw(ctx, 13, 45);
ctx.globalAlpha = store.isIntro
? store.intro.stage1Opacity
? store.intro.topScreenOpacity
: store.isOutro && store.outro.animateTop
? store.outro.stage2Opacity
: 1;

4
app/components/Settings/BottomScreen/BottomScreen.vue
View File

@@ -1,11 +1,13 @@
<script setup lang="ts">
import Background from "./Background.vue";
import Menus from "./Menus/Menus.vue";
const store = useSettingsStore();
</script>
<template>
<Background />
<CommonBars />
<CommonBars :y-offset="store.barOffsetY" />
<Menus />
<CommonConfirmationModal />
<AchievementsFadeToBlack />

68
app/components/Settings/BottomScreen/Menus/Menus.vue
View File

@@ -21,6 +21,10 @@ import Selector from "~/components/Common/ButtonSelector.vue";
const app = useAppStore();
const settingsStore = useSettingsStore();
if (app.previousScreen === "home") {
settingsStore.selectedButton = "options";
}
const isMainMenu = (button: string): button is SettingsMenu =>
SETTINGS_MENUS.includes(button as SettingsMenu);
@@ -195,30 +199,78 @@ const viewComponents: Record<string, Component> = {
touchScreenTapTap: TouchScreenTapTap,
};
const selectorXOffset = computed(() => {
const menu = isMainMenu(selected.value)
? selected.value
: getParentMenu(selected.value);
switch (menu) {
case "clock":
return Math.min(0, settingsStore.menuOffsets[1]);
case "user":
return Math.min(
0,
settingsStore.menuOffsets[1] + settingsStore.menuOffsets[2],
);
case "touchScreen":
return Math.min(
0,
settingsStore.menuOffsets[1] +
settingsStore.menuOffsets[2] +
settingsStore.menuOffsets[3],
);
default:
return 0;
}
});
</script>
<template>
<template v-if="!settingsStore.currentSubMenu">
<OptionsMenu :x="33" :y="121" />
<ClockMenu :x="81" :y="121" />
<UserMenu :x="129" :y="121" />
<TouchScreenMenu :x="177" :y="121" :opacity="1" />
<TouchScreenMenu
:x="
177 +
settingsStore.menuOffsets[1] +
settingsStore.menuOffsets[2] +
settingsStore.menuOffsets[3]
"
:y="121 + settingsStore.menuYOffset"
:opacity="1"
/>
<UserMenu
:x="129 + settingsStore.menuOffsets[1] + settingsStore.menuOffsets[2]"
:y="121 + settingsStore.menuYOffset"
/>
<ClockMenu
:x="81 + settingsStore.menuOffsets[1]"
:y="121 + settingsStore.menuYOffset"
/>
<OptionsMenu :x="33" :y="121 + settingsStore.menuYOffset" />
<Selector :rect="selectorPosition" :opacity="1" />
<Selector
:rect="[
selectorPosition[0] + selectorXOffset,
selectorPosition[1] + settingsStore.menuYOffset,
selectorPosition[2],
selectorPosition[3],
]"
:opacity="1"
/>
<CommonButtons
v-if="isSubmenuSelected"
:y-offset="0"
:y-offset="settingsStore.barOffsetY"
:b-label="$t('common.goBack')"
:a-label="$t('common.select')"
@activate-b="select(getParentMenu(selected))"
/>
<CommonButtons
v-else
:y-offset="0"
:y-offset="settingsStore.barOffsetY"
:b-label="$t('common.quit')"
:a-label="$t('common.select')"
@activate-b="app.navigateTo('home')"
@activate-b="settingsStore.animateOutro()"
/>
</template>
<component :is="viewComponents[settingsStore.currentSubMenu]" v-else />

3
app/components/Settings/TopScreen/Calendar.vue
View File

@@ -1,13 +1,14 @@
<script setup lang="ts">
const { onRender } = useScreen();
const store = useSettingsStore();
const { assets } = useAssets();
onRender((ctx) => {
ctx.fillStyle = "black";
ctx.font = "7px NDS7";
ctx.translate(0, -16);
ctx.translate(0, -16 + store.notificationYOffset / 3);
const CALENDAR_COLS = 7;
const CALENDAR_ROWS = 5;

3
app/components/Settings/TopScreen/Clock.vue
View File

@@ -2,6 +2,7 @@
const { onRender } = useScreen();
const app = useAppStore();
const store = useSettingsStore();
const { assets } = useAssets();
const CENTER_X = 63;
@@ -53,7 +54,7 @@ function drawLine(
}
onRender((ctx) => {
ctx.translate(0, -16);
ctx.translate(0, -16 + store.notificationYOffset / 3);
assets.images.home.topScreen.clock.draw(ctx, 13, 45);

94
app/components/Settings/TopScreen/Notifications.vue
View File

@@ -1,9 +1,21 @@
<script setup lang="ts">
const { onRender } = useScreen();
import gsap from "gsap";
const { onRender } = useScreen();
const store = useSettingsStore();
const { assets } = useAssets();
type NotificationData = {
image: AtlasImage;
title: string;
description: string;
};
const menuYOffset = ref(0);
const submenuYOffset = ref(0);
const visibleMenuNotification = ref<NotificationData | null>(null);
const visibleSubmenuNotification = ref<NotificationData | null>(null);
const renderNotification = (
ctx: CanvasRenderingContext2D,
image: AtlasImage,
@@ -83,13 +95,62 @@ const submenuNotification = computed(() => {
};
});
const animateNotification = (
curr: NotificationData | null,
prev: NotificationData | null,
visibleRef: Ref<NotificationData | null>,
offsetRef: Ref<number>,
) => {
if (prev !== null && curr === null) {
// slide down
visibleRef.value = prev;
gsap.fromTo(
offsetRef,
{ value: 0 },
{
value: 48,
duration: 0.2,
ease: "none",
onComplete: () => {
visibleRef.value = null;
},
},
);
} else if (prev === null && curr !== null) {
// slide up
visibleRef.value = curr;
gsap.fromTo(
offsetRef,
{ value: 48 },
{ value: 0, duration: 0.2, ease: "none" },
);
}
};
watch(menuNotification, (curr, prev) => {
animateNotification(curr, prev, visibleMenuNotification, menuYOffset);
});
watch(submenuNotification, (curr, prev) => {
animateNotification(curr, prev, visibleSubmenuNotification, submenuYOffset);
});
onRender((ctx) => {
let count = 1;
if (menuNotification.value) count++;
if (submenuNotification.value) count++;
ctx.translate(0, 144 - (count - 1) * 16);
const submenuY = 144 + submenuYOffset.value;
const menuY = visibleSubmenuNotification.value
? Math.min(144, submenuY - 16) + menuYOffset.value
: 144 + menuYOffset.value;
const nextY = visibleMenuNotification.value
? menuY
: visibleSubmenuNotification.value
? submenuY
: null;
const mainY =
nextY !== null
? Math.min(144, nextY - 16) + store.notificationYOffset
: 144 + store.notificationYOffset;
ctx.translate(0, mainY);
renderNotification(
ctx,
mainNotification.value.image,
@@ -97,23 +158,24 @@ onRender((ctx) => {
mainNotification.value.description,
);
if (menuNotification.value) {
ctx.translate(0, 16);
if (visibleMenuNotification.value) {
ctx.translate(0, menuY - mainY);
renderNotification(
ctx,
menuNotification.value.image,
menuNotification.value.title,
menuNotification.value.description,
visibleMenuNotification.value.image,
visibleMenuNotification.value.title,
visibleMenuNotification.value.description,
);
}
if (submenuNotification.value) {
ctx.translate(0, 16);
if (visibleSubmenuNotification.value) {
const prevY = visibleMenuNotification.value ? menuY : mainY;
ctx.translate(0, submenuY - prevY);
renderNotification(
ctx,
submenuNotification.value.image,
submenuNotification.value.title,
submenuNotification.value.description,
visibleSubmenuNotification.value.image,
visibleSubmenuNotification.value.title,
visibleSubmenuNotification.value.description,
);
}
});

6
app/components/Settings/TopScreen/TopScreen.vue
View File

@@ -4,6 +4,12 @@ import Calendar from "./Calendar.vue";
import Clock from "./Clock.vue";
import StatusBar from "./StatusBar.vue";
import Notifications from "./Notifications.vue";
const store = useSettingsStore();
onMounted(() => {
store.animateIntro();
});
</script>
<template>

61
app/stores/home.ts
View File

@@ -13,6 +13,7 @@ export const useHomeStore = defineStore("home", {
intro: {
statusBarY: -20,
stage1Opacity: 0,
topScreenOpacity: 0,
},
outro: {
@@ -44,33 +45,51 @@ export const useHomeStore = defineStore("home", {
animateIntro() {
this.isIntro = true;
const app = useAppStore();
const timeline = gsap.timeline({
onComplete: () => {
this.isIntro = false;
},
});
timeline
.fromTo(
this.intro,
{ stage1Opacity: 0 },
{
stage1Opacity: 1,
duration: 0.5,
ease: "none",
},
0,
)
.fromTo(
this.intro,
{ statusBarY: -20 },
{
statusBarY: 0,
duration: 0.15,
ease: "none",
},
0.35,
);
timeline.fromTo(
this.intro,
{ stage1Opacity: 0 },
{
stage1Opacity: 1,
duration: 0.5,
ease: "none",
},
0,
);
if (app.previousScreen !== "settings") {
timeline
.fromTo(
this.intro,
{ topScreenOpacity: 0 },
{
topScreenOpacity: 1,
duration: 0.5,
ease: "none",
},
0,
)
.fromTo(
this.intro,
{ statusBarY: -20 },
{
statusBarY: 0,
duration: 0.15,
ease: "none",
},
0.35,
);
} else {
this.intro.topScreenOpacity = 1;
this.intro.statusBarY = 0;
}
},
animateOutro(to: AppScreen) {

111
app/stores/settings.ts
View File

@@ -1,3 +1,5 @@
import gsap from "gsap";
export const SETTINGS_MENUS = [
"options",
"clock",
@@ -31,6 +33,13 @@ export const useSettingsStore = defineStore("settings", {
currentSubMenu: null as SettingsSubMenu | null,
menuExpanded: false,
selectedButton: "options" as SettingsNavigableButton,
notificationYOffset: 48,
barOffsetY: 24,
menuOffsets: [0, -48, -48, -48] as [number, number, number, number],
menuYOffset: 72,
isIntro: true,
isOutro: false,
}),
actions: {
@@ -58,5 +67,107 @@ export const useSettingsStore = defineStore("settings", {
closeSubMenu() {
this.currentSubMenu = null;
},
animateIntro() {
this.isIntro = true;
gsap
.timeline()
// bars
.fromTo(
this,
{ barOffsetY: 24 },
{ barOffsetY: 0, duration: 0.2, ease: "none" },
0,
)
// title notification
.fromTo(
this,
{ notificationYOffset: 48 },
{ notificationYOffset: 0, duration: 0.2, ease: "none" },
0.1,
)
// menus slide up
.fromTo(
this,
{ menuYOffset: 72 },
{ menuYOffset: 0, duration: 0.2, ease: "none" },
0,
)
// menus accordion
.fromTo(
this.menuOffsets,
{ 1: -48 },
{ 1: 0, duration: 0.1, ease: "none" },
0.2,
)
.fromTo(
this.menuOffsets,
{ 2: -48 },
{ 2: 0, duration: 0.1, ease: "none" },
0.3,
)
.fromTo(
this.menuOffsets,
{ 3: -48 },
{ 3: 0, duration: 0.1, ease: "none" },
0.4,
)
.call(() => {
this.isIntro = false;
});
},
animateOutro() {
this.isOutro = true;
gsap
.timeline()
// title notification
.fromTo(
this,
{ notificationYOffset: 0 },
{ notificationYOffset: 48, duration: 0.2, ease: "none" },
0,
)
// bars
.fromTo(
this,
{ barOffsetY: 0 },
{ barOffsetY: 24, duration: 0.2, ease: "none" },
0.1,
)
// menus accordion
.fromTo(
this.menuOffsets,
{ 3: 0 },
{ 3: -48, duration: 0.1, ease: "none" },
0,
)
.fromTo(
this.menuOffsets,
{ 2: 0 },
{ 2: -48, duration: 0.1, ease: "none" },
0.1,
)
.fromTo(
this.menuOffsets,
{ 1: 0 },
{ 1: -48, duration: 0.1, ease: "none" },
0.2,
)
// menus slide down
.fromTo(
this,
{ menuYOffset: 0 },
{ menuYOffset: 72, duration: 0.2, ease: "none" },
0.3,
)
.call(() => {
const app = useAppStore();
app.navigateTo("home");
this.isOutro = false;
});
},
},
});