Skip to content

Commit 95873c4

Browse files
committed
fix(lynx): inline scale animation worklet
1 parent bc91f55 commit 95873c4

2 files changed

Lines changed: 23 additions & 36 deletions

File tree

packages/lynx-react/src/hooks/useScaleFeedback.ts

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,18 @@ import {
88
} from "@lynx-js/react";
99
import type { RefObject } from "@lynx-js/react";
1010
import type { MainThread } from "@lynx-js/types";
11-
import { feedbackScaleDuration } from "@seed-design/lynx-css/scale-feedback" with {
11+
import {
12+
feedbackScaleDuration,
13+
feedbackScaleTimingFunction,
14+
} from "@seed-design/lynx-css/scale-feedback" with {
1215
runtime: "shared",
1316
};
1417

1518
import type { LynxViewProps } from "../types";
1619
import { calculateScaleFeedback, isReducedMotion } from "../utils/calculate-scale-feedback" with {
1720
runtime: "shared",
1821
};
19-
import { animateScaleFeedback, type ScaleFeedbackElement } from "../utils/animate-scale-feedback" with {
20-
runtime: "shared",
21-
};
22+
import type { ScaleFeedbackElement } from "../utils/animate-scale-feedback";
2223

2324
type MainThreadLayoutChangeHandler = NonNullable<LynxViewProps["main-thread:bindlayoutchange"]>;
2425
type MainThreadTouchHandler = NonNullable<LynxViewProps["main-thread:bindtouchstart"]>;
@@ -64,11 +65,24 @@ function runScaleFeedback(
6465
) {
6566
"main thread";
6667

67-
animationRef.current = animateScaleFeedback(
68-
targetRef.current,
69-
animationRef.current,
70-
scale,
71-
duration,
68+
const target = targetRef.current;
69+
if (!target) return;
70+
71+
let currentTransform = "scale(1)";
72+
try {
73+
currentTransform = target.getComputedStyleProperty("transform") || currentTransform;
74+
} catch {
75+
// Some non-native runtimes expose the method but cannot evaluate it.
76+
}
77+
78+
animationRef.current?.cancel();
79+
animationRef.current = target.animate(
80+
[{ transform: currentTransform }, { transform: `scale(${scale})` }],
81+
{
82+
duration,
83+
easing: feedbackScaleTimingFunction,
84+
fill: "forwards",
85+
},
7286
);
7387
}
7488

packages/lynx-react/src/utils/animate-scale-feedback.ts

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -21,30 +21,3 @@ export function createScaleFeedbackAnimation(
2121
},
2222
};
2323
}
24-
25-
export function animateScaleFeedback(
26-
target: ScaleFeedbackElement | null,
27-
currentAnimation: MainThread.Animation | null,
28-
scale: number,
29-
duration: number,
30-
): MainThread.Animation | null {
31-
"main thread";
32-
33-
if (!target) return null;
34-
35-
let currentTransform = "scale(1)";
36-
try {
37-
currentTransform = target.getComputedStyleProperty("transform") || currentTransform;
38-
} catch {
39-
// Some non-native runtimes expose the method but cannot evaluate it.
40-
}
41-
42-
const { keyframes, options } = createScaleFeedbackAnimation(
43-
currentTransform,
44-
scale,
45-
duration,
46-
);
47-
currentAnimation?.cancel();
48-
49-
return target.animate(keyframes, options);
50-
}

0 commit comments

Comments
 (0)