CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-04 15:40:08 +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.
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 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 WIGGLES = 3; // Half oscillations.
const ms = new Date().getTime() - start.getTime();
const percent = ms / DURATION;
const WIGGLES = [0.66, 1, 0.66, 0, -0.66, -1, -0.66, 0]; // Single cycle
let skew = '';
if (percent <= 1) {
const val = Math.round(
Math.sin(percent * Math.PI * WIGGLES) * (1 - percent) * magnitude,
);
if (start.getTime() + DURATION > new Date().getTime()) {
const val = Math.round(WIGGLES[step % WIGGLES.length] * magnitude);
skew = `skewX(${val})`;
disconnectPid = setTimeout(disconnectUiStep, 10, block, magnitude, start);
disconnectPid = setTimeout(
disconnectUiStep,
15,
block,
magnitude,
start,
step + 1,
);
}
block