mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Update call reaction emoji burst speed & direction

Browse source 
Co-authored-by: trevor-signal <131492920+trevor-signal@users.noreply.github.com>
This commit is contained in:
automated-signal 2024-02-08 11:49:20 -06:00 • committed by GitHub
parent 2588270466
commit 12a743c45a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
ts/components/CallReactionBurstEmoji.tsx
View file

@ -35,12 +35,14 @@ export function CallReactionBurstEmoji({ value }: PropsType): JSX.Element {
value, value,
springConfig: { springConfig: {
mass: random(10, 20), mass: random(10, 20),
tension: random(60, 90), tension: random(45, 60),
friction: random(20, 60), friction: random(20, 60),
clamp: true, clamp: true,
precision: 0, precision: 0,
velocity: -0.01, velocity: -0.01,
}, },
fromX: random(0, 20),
toX: random(-30, 300),
fromY, fromY,
toY, toY,
toScale: random(1, 2.5, true), toScale: random(1, 2.5, true),
@ -93,9 +95,11 @@ export function CallReactionBurstEmoji({ value }: PropsType): JSX.Element {
type AnimatedEmojiProps = { type AnimatedEmojiProps = {
value: string; value: string;
fromRotate: number; fromRotate: number;
fromX: number;
fromY: number; fromY: number;
toRotate: number; toRotate: number;
toScale: number; toScale: number;
toX: number;
toY: number; toY: number;
springConfig: AnimationConfig; springConfig: AnimationConfig;
onAnimationEnd?: () => unknown; onAnimationEnd?: () => unknown;
@ -104,22 +108,26 @@ type AnimatedEmojiProps = {
export function AnimatedEmoji({ export function AnimatedEmoji({
value, value,
fromRotate, fromRotate,
fromX,
fromY, fromY,
toRotate, toRotate,
toScale, toScale,
toX,
toY, toY,
springConfig, springConfig,
onAnimationEnd, onAnimationEnd,
}: AnimatedEmojiProps): JSX.Element { }: AnimatedEmojiProps): JSX.Element {
const height = EMOJI_HEIGHT * toScale; const height = EMOJI_HEIGHT * toScale;
const { rotate, y } = useSpring({ const { rotate, x, y } = useSpring({
from: { from: {
rotate: fromRotate, rotate: fromRotate,
x: fromX,
y: fromY, y: fromY,
}, },
to: { to: {
rotate: toRotate, rotate: toRotate,
x: toX,
y: toY - height - 10, y: toY - height - 10,
}, },
config: springConfig, config: springConfig,
@ -143,6 +151,7 @@ export function AnimatedEmoji({
style={{ style={{
rotate, rotate,
scale, scale,
x,
y, y,
}} }}
> >