CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-07 09:00:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix: #8194 by using a stepped animation for the wiggle (#8743)

Browse Source 
* Fix #8194 by using animation steps for the wiggle

* Formatting cleanup
This commit is contained in:
RoboErikG
2025-02-12 13:16:35 -08:00
committed by GitHub
parent 58406af64f
commit 15d6ea2558
1 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
core/block_animations.ts
View File

@@ -176,7 +176,7 @@ export function disconnectUiEffect(block: BlockSvg) {
} }
// Start the animation. // Start the animation.
wobblingBlock = block; wobblingBlock = block;
disconnectUiStep(block, magnitude, new Date()); disconnectUiStep(block, magnitude, new Date(), 0);
} }
/** /**
@@ -184,22 +184,30 @@ export function disconnectUiEffect(block: BlockSvg) {
* *
* @param block Block to animate. * @param block Block to animate.
* @param magnitude Maximum degrees skew (reversed for RTL). * @param magnitude Maximum degrees skew (reversed for RTL).
* @param start Date of animation's start. * @param start Date of animation's start for deciding when to stop.
* @param step Which step of the animation we're on.
*/ */
function disconnectUiStep(block: BlockSvg, magnitude: number, start: Date) { function disconnectUiStep(
block: BlockSvg,
magnitude: number,
start: Date,
step: number,
) {
const DURATION = 200; // Milliseconds. const DURATION = 200; // Milliseconds.
const WIGGLES = 3; // Half oscillations. const WIGGLES = [0.66, 1, 0.66, 0, -0.66, -1, -0.66, 0]; // Single cycle
const ms = new Date().getTime() - start.getTime();
const percent = ms / DURATION;
let skew = ''; let skew = '';
if (percent <= 1) { if (start.getTime() + DURATION > new Date().getTime()) {
const val = Math.round( const val = Math.round(WIGGLES[step % WIGGLES.length] * magnitude);
Math.sin(percent * Math.PI * WIGGLES) * (1 - percent) * magnitude,
);
skew = `skewX(${val})`; skew = `skewX(${val})`;
disconnectPid = setTimeout(disconnectUiStep, 10, block, magnitude, start); disconnectPid = setTimeout(
disconnectUiStep,
15,
block,
magnitude,
start,
step + 1,
);
} }
block block