diff --git a/config.js b/config.js index beb0690..1cbb45c 100644 --- a/config.js +++ b/config.js @@ -56,6 +56,10 @@ export const WASH_CYCLE_SECONDS = 90; export const WASH_SPREAD = 70; export const WASH_STRENGTH = 0.55; +// The wash animation gets its own, roomier frame: like the drag animation it +// has the screen to itself, so it does not have to leave room for a second one. +export const WASH_FRAME_SCALE = 0.6; + // The frame animations, keyed by the id sent over the socket. The names must // match the registry in public/player/motion.js, which supplies the code. export const ANIMATIONS = { diff --git a/public/player/motion.js b/public/player/motion.js index f964177..35edb36 100644 --- a/public/player/motion.js +++ b/public/player/motion.js @@ -20,6 +20,7 @@ import { TRAIL_LENGTH, TRAIL_FADE_SECONDS, WASH_CYCLE_SECONDS, + WASH_FRAME_SCALE, WASH_SPREAD, WASH_STRENGTH, AUTO_ANIMATION, @@ -45,8 +46,8 @@ export function frameSize(viewportWidth, viewportHeight, scale = FRAME_SCALE) { } /** Size the frame to the current viewport and report the size back. */ -function applyFrameSize(element) { - const size = frameSize(window.innerWidth, window.innerHeight); +function applyFrameSize(element, scale = FRAME_SCALE) { + const size = frameSize(window.innerWidth, window.innerHeight, scale); element.style.width = `${size.width}px`; element.style.height = `${size.height}px`; return size; @@ -943,7 +944,7 @@ export function startWash({ element }) { element.classList.add('washing'); function centre() { - const size = applyFrameSize(element); + const size = applyFrameSize(element, WASH_FRAME_SCALE); place(element, (window.innerWidth - size.width) / 2, (window.innerHeight - size.height) / 2); } @@ -975,6 +976,9 @@ export function startWash({ element }) { wash.remove(); element.classList.remove('washing'); element.style.removeProperty('--wash'); + // Same reason as the drag animation: the next one sizes the frame itself, + // but a wash-sized frame left up for one paint would flash. + applyFrameSize(element); }; }