helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2026-08-29 13:15:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add easeInOut parameter to animatedZoom. Apply quadInOut easing to zoom for PhotoViewer animate slideshow.

Browse source
This commit is contained in:
Hartley Raabis 2026-08-06 15:04:11 -06:00
parent c4628c9112
commit 62d7d966be
2 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web/src/lib/components/asset-viewer/PhotoViewer.svelte
View file

@ -125,11 +125,11 @@
let randomDuration = Math.round(duration * (getRandomInt(50, 100) / 100));
let randomScale2 = (getRandomInt(0, 200) / 100) * ($slideshowAnimateZoomStrength / 100) + 1;
if (randomDirection <= 2) {
assetViewerManager.animatedZoom(randomScale1, randomDuration);
assetViewerManager.animatedZoom(randomScale1, randomDuration, true);
} else if (randomDirection > 2) {
assetViewerManager.animatedZoom(randomScale1, 20);
setTimeout(() => {
assetViewerManager.animatedZoom(randomScale2, randomDuration - 40);
assetViewerManager.animatedZoom(randomScale2, randomDuration - 40, true);
}, 40);
}
};

6
web/src/lib/managers/asset-viewer-manager.svelte.ts
View file

@ -1,6 +1,6 @@
import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
import type { ZoomImageWheelState } from '@zoom-image/core';
import { cubicOut } from 'svelte/easing';
import { cubicOut, quadInOut } from 'svelte/easing';
import { authManager } from '$lib/managers/auth-manager.svelte';
import type { ImageLoaderStatus } from '$lib/utils/adaptive-image-loader.svelte';
import { canCopyImageToClipboard } from '$lib/utils/asset-utils';
@ -142,7 +142,7 @@ class AssetViewerManager extends BaseEventManager<Events> {
this.#animationFrameId = null;
}
animatedZoom(targetZoom: number, duration = 300) {
animatedZoom(targetZoom: number, duration = 300, easeInOut = false) {
this.cancelZoomAnimation();
const startZoom = this.#zoomState.currentZoom;
@ -151,7 +151,7 @@ class AssetViewerManager extends BaseEventManager<Events> {
const frame = (currentTime: number) => {
const elapsed = currentTime - startTime;
const linearProgress = Math.min(elapsed / duration, 1);
const easedProgress = cubicOut(linearProgress);
const easedProgress = easeInOut ? quadInOut(linearProgress) : cubicOut(linearProgress);
const interpolatedZoom = startZoom + (targetZoom - startZoom) * easedProgress;
this.zoomState = { ...this.#zoomState, currentZoom: interpolatedZoom };