From f5394edc2c1f82b1b20eebd02c4017aed93a12ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Thu, 20 Jun 2024 15:04:45 +0200 Subject: [PATCH 1/3] Add jumping transition --- .../layoutReanimation/web/componentUtils.ts | 3 ++ .../src/layoutReanimation/web/config.ts | 1 + .../layoutReanimation/web/createAnimation.ts | 8 +++ .../web/transition/Jumping.web.ts | 51 +++++++++++++++++++ 4 files changed, 63 insertions(+) create mode 100644 packages/react-native-reanimated/src/layoutReanimation/web/transition/Jumping.web.ts diff --git a/packages/react-native-reanimated/src/layoutReanimation/web/componentUtils.ts b/packages/react-native-reanimated/src/layoutReanimation/web/componentUtils.ts index 6614bf61040..b818f2a11e9 100644 --- a/packages/react-native-reanimated/src/layoutReanimation/web/componentUtils.ts +++ b/packages/react-native-reanimated/src/layoutReanimation/web/componentUtils.ts @@ -175,6 +175,9 @@ export function handleLayoutTransition( case 'FadingTransition': animationType = TransitionType.FADING; break; + case 'JumpingTransition': + animationType = TransitionType.JUMPING; + break; default: animationType = TransitionType.LINEAR; break; diff --git a/packages/react-native-reanimated/src/layoutReanimation/web/config.ts b/packages/react-native-reanimated/src/layoutReanimation/web/config.ts index 60307910897..47bf53cea33 100644 --- a/packages/react-native-reanimated/src/layoutReanimation/web/config.ts +++ b/packages/react-native-reanimated/src/layoutReanimation/web/config.ts @@ -65,6 +65,7 @@ export enum TransitionType { LINEAR, SEQUENCED, FADING, + JUMPING, } export const AnimationsData: Record = { diff --git a/packages/react-native-reanimated/src/layoutReanimation/web/createAnimation.ts b/packages/react-native-reanimated/src/layoutReanimation/web/createAnimation.ts index ff147f5c129..0354d118d6c 100644 --- a/packages/react-native-reanimated/src/layoutReanimation/web/createAnimation.ts +++ b/packages/react-native-reanimated/src/layoutReanimation/web/createAnimation.ts @@ -10,6 +10,7 @@ import type { TransformsStyle } from 'react-native'; import { LinearTransition } from './transition/Linear.web'; import { SequencedTransition } from './transition/Sequenced.web'; import { FadingTransition } from './transition/Fading.web'; +import { JumpingTransition } from './transition/Jumping.web'; import { insertWebAnimation } from './domUtils'; // Translate values are passed as numbers. However, if `translate` property receives number, it will not automatically @@ -81,6 +82,13 @@ export function TransitionGenerator( transitionData ); break; + + case TransitionType.JUMPING: + transitionObject = JumpingTransition( + transitionKeyframeName, + transitionData + ); + break; } const transitionKeyframe = diff --git a/packages/react-native-reanimated/src/layoutReanimation/web/transition/Jumping.web.ts b/packages/react-native-reanimated/src/layoutReanimation/web/transition/Jumping.web.ts new file mode 100644 index 00000000000..981152cc849 --- /dev/null +++ b/packages/react-native-reanimated/src/layoutReanimation/web/transition/Jumping.web.ts @@ -0,0 +1,51 @@ +'use strict'; +import type { TransitionData } from '../animationParser'; + +const jumpHeight = 100; + +export function JumpingTransition( + name: string, + transitionData: TransitionData +) { + const { translateX, translateY, scaleX, scaleY } = transitionData; + + const dx = translateX / 3; + + const jumpingTransition = { + name, + style: { + 0: { + transform: [ + { + translateX: `${translateX}px`, + translateY: `${translateY}px`, + scale: `${scaleX},${scaleY}`, + }, + ], + }, + 25: { + transform: [ + { + translateX: `${translateX - dx}px`, + translateY: `${translateY - jumpHeight}px`, + scale: `${scaleX},${scaleY}`, + }, + ], + }, + 75: { + transform: [ + { + translateX: `${dx}px`, + translateY: `${translateY - jumpHeight}px`, + }, + ], + }, + 100: { + transform: [{ translateX: '0px', translateY: '0px', scale: '1,1' }], + }, + }, + duration: 300, + }; + + return jumpingTransition; +} From 3f898ee0f922627d56e1b01fff4ff460098caf0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Fri, 21 Jun 2024 09:48:14 +0200 Subject: [PATCH 2/3] Change calculations --- .../web/transition/Jumping.web.ts | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/packages/react-native-reanimated/src/layoutReanimation/web/transition/Jumping.web.ts b/packages/react-native-reanimated/src/layoutReanimation/web/transition/Jumping.web.ts index 981152cc849..ea0f9956c41 100644 --- a/packages/react-native-reanimated/src/layoutReanimation/web/transition/Jumping.web.ts +++ b/packages/react-native-reanimated/src/layoutReanimation/web/transition/Jumping.web.ts @@ -1,7 +1,6 @@ 'use strict'; import type { TransitionData } from '../animationParser'; - -const jumpHeight = 100; +import { Easing } from '../../../Easing'; export function JumpingTransition( name: string, @@ -9,7 +8,7 @@ export function JumpingTransition( ) { const { translateX, translateY, scaleX, scaleY } = transitionData; - const dx = translateX / 3; + const d = Math.max(Math.abs(translateX), Math.max(translateY)); const jumpingTransition = { name, @@ -22,24 +21,17 @@ export function JumpingTransition( scale: `${scaleX},${scaleY}`, }, ], + easing: Easing.exp, }, - 25: { + 50: { transform: [ { - translateX: `${translateX - dx}px`, - translateY: `${translateY - jumpHeight}px`, + translateX: `${translateX / 2}px`, + translateY: `${translateY - d}px`, scale: `${scaleX},${scaleY}`, }, ], }, - 75: { - transform: [ - { - translateX: `${dx}px`, - translateY: `${translateY - jumpHeight}px`, - }, - ], - }, 100: { transform: [{ translateX: '0px', translateY: '0px', scale: '1,1' }], }, From 6b053f46baac1f2e10db75f76aaece7a5960d94f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Fri, 21 Jun 2024 12:37:03 +0200 Subject: [PATCH 3/3] Fix jumps --- .../src/layoutReanimation/web/transition/Jumping.web.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react-native-reanimated/src/layoutReanimation/web/transition/Jumping.web.ts b/packages/react-native-reanimated/src/layoutReanimation/web/transition/Jumping.web.ts index ea0f9956c41..b8c17f234c0 100644 --- a/packages/react-native-reanimated/src/layoutReanimation/web/transition/Jumping.web.ts +++ b/packages/react-native-reanimated/src/layoutReanimation/web/transition/Jumping.web.ts @@ -8,7 +8,8 @@ export function JumpingTransition( ) { const { translateX, translateY, scaleX, scaleY } = transitionData; - const d = Math.max(Math.abs(translateX), Math.max(translateY)); + const d = Math.max(Math.abs(translateX), Math.abs(translateY)) / 2; + const peakTranslateY = translateY <= 0 ? translateY - d : -translateY + d; const jumpingTransition = { name, @@ -27,7 +28,7 @@ export function JumpingTransition( transform: [ { translateX: `${translateX / 2}px`, - translateY: `${translateY - d}px`, + translateY: `${peakTranslateY}px`, scale: `${scaleX},${scaleY}`, }, ],