diff --git a/src/components/video-editor/videoPlayback/zoomAnimation.test.ts b/src/components/video-editor/videoPlayback/zoomAnimation.test.ts index e57f1322..9ebc9f2a 100644 --- a/src/components/video-editor/videoPlayback/zoomAnimation.test.ts +++ b/src/components/video-editor/videoPlayback/zoomAnimation.test.ts @@ -326,9 +326,9 @@ describe("computeRegionStrength", () => { }); it("falls smoothly during zoom-out", () => { - // Sample the original zoom-out ramp shifted 300ms earlier. + // Sample the zoom-out ramp after the animation delay. const zoomOutStart = region.endMs - 150; - const s = computeRegionStrength(region, zoomOutStart + 700 - 300); + const s = computeRegionStrength(region, zoomOutStart + 700); expect(s).toBeGreaterThan(0); expect(s).toBeLessThan(1); }); @@ -393,7 +393,7 @@ describe("findDominantRegion", () => { { id: "b", startMs: 3500, endMs: 6000, depth: 3, focus: { cx: 0.8, cy: 0.8 } }, ]; - const result = findDominantRegion(regions, 2800, { connectZooms: true }); + const result = findDominantRegion(regions, 3100, { connectZooms: true }); expect(result.transition).toBeNull(); expect(result.region?.id).toBe("a"); expect(result.strength).toBeGreaterThan(0); @@ -428,7 +428,7 @@ describe("findDominantRegion", () => { { id: "b", startMs: 4300, endMs: 7000, depth: 3, focus: { cx: 0.7, cy: 0.7 } }, ]; - // After transition end (3000-100+1000=3900) but before b starts (4300) + // After transition end (3000+200+1000=4200) but before b starts (4300) const result = findDominantRegion(regions, 4250, { connectZooms: true }); expect(result.strength).toBe(1); expect(result.region).not.toBeNull(); diff --git a/src/components/video-editor/videoPlayback/zoomRegionUtils.ts b/src/components/video-editor/videoPlayback/zoomRegionUtils.ts index 9076b383..f0bfd18d 100644 --- a/src/components/video-editor/videoPlayback/zoomRegionUtils.ts +++ b/src/components/video-editor/videoPlayback/zoomRegionUtils.ts @@ -11,8 +11,8 @@ import { clamp01, easeOutZoom } from "./mathUtils"; const CHAINED_ZOOM_PAN_GAP_MS = 1350; const CONNECTED_ZOOM_PAN_DURATION_MS = 1000; const ZOOM_IN_OVERLAP_MS = 1000; -// Shift the original animation timing 300ms earlier without changing its motion. -const ZOOM_ANIMATION_LEAD_MS = -100; +// Positive offsets delay the animation; this is 300ms later than the previous -100ms offset. +const ZOOM_ANIMATION_DELAY_MS = 200; type DominantRegionOptions = { connectZooms?: boolean; @@ -42,7 +42,7 @@ export function computeRegionStrength( ) { const zoomInDurationMs = Math.max(1, options.zoomInDurationMs ?? ZOOM_IN_TRANSITION_WINDOW_MS); const zoomOutDurationMs = Math.max(1, options.zoomOutDurationMs ?? TRANSITION_WINDOW_MS); - const adjustedTimeMs = timeMs - ZOOM_ANIMATION_LEAD_MS; + const adjustedTimeMs = timeMs - ZOOM_ANIMATION_DELAY_MS; const leadInStart = region.startMs + ZOOM_IN_OVERLAP_MS - ZOOM_IN_TRANSITION_WINDOW_MS; let zoomOutStart = region.endMs - ZOOM_OUT_EARLY_START_MS; let zoomInEnd = leadInStart + zoomInDurationMs; @@ -92,9 +92,9 @@ function getConnectedRegionPairs(regions: ZoomRegion[]) { pairs.push({ currentRegion, nextRegion, - transitionStart: currentRegion.endMs + ZOOM_ANIMATION_LEAD_MS, + transitionStart: currentRegion.endMs + ZOOM_ANIMATION_DELAY_MS, transitionEnd: - currentRegion.endMs + ZOOM_ANIMATION_LEAD_MS + CONNECTED_ZOOM_PAN_DURATION_MS, + currentRegion.endMs + ZOOM_ANIMATION_DELAY_MS + CONNECTED_ZOOM_PAN_DURATION_MS, }); } @@ -118,7 +118,7 @@ function getActiveRegion( const zoomOutStart = outgoingPair.currentRegion.endMs - ZOOM_OUT_EARLY_START_MS + - ZOOM_ANIMATION_LEAD_MS; + ZOOM_ANIMATION_DELAY_MS; if (timeMs >= zoomOutStart) { return { region, strength: 1 }; } @@ -133,7 +133,7 @@ function getActiveRegion( const nextRegionZoomOutStart = incomingPair.nextRegion.endMs - ZOOM_OUT_EARLY_START_MS + - ZOOM_ANIMATION_LEAD_MS; + ZOOM_ANIMATION_DELAY_MS; if (timeMs < nextRegionZoomOutStart) { return { region, strength: 1 }; }