From 15d6ea2558d9f36e4227d8002a9c49b2a05f86b5 Mon Sep 17 00:00:00 2001
From: RoboErikG <RoboErikG@users.noreply.github.com>
Date: Wed, 12 Feb 2025 13:16:35 -0800
Subject: [PATCH] Fix: #8194 by using a stepped animation for the wiggle
 (#8743)

* Fix #8194 by using animation steps for the wiggle

* Formatting cleanup
---
 core/block_animations.ts | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/core/block_animations.ts b/core/block_animations.ts
index f3fc3d454..2dbf90777 100644
--- a/core/block_animations.ts
+++ b/core/block_animations.ts
@@ -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