[Web LA] Add CurvedTransition

packages/react-native-reanimated/src/layoutReanimation/web/Easing.web.ts

@@ -12,4 +12,8 @@ export const WebEasings = {
   exp: [0.7, 0, 0.84, 0],
 };
 
+export function getEasingByName(easingName: WebEasingsNames) {
+  return `cubic-bezier(${WebEasings[easingName].toString()})`;
+}
+
 export type WebEasingsNames = keyof typeof WebEasings;

packages/react-native-reanimated/src/layoutReanimation/web/animationParser.ts

@@ -34,6 +34,8 @@ export interface TransitionData {
   scaleX: number;
   scaleY: number;
   reversed?: boolean;
+  easingX?: string;
+  easingY?: string;
   entering?: any;
   exiting?: any;
 }
@@ -51,9 +53,13 @@ export function convertAnimationObjectToKeyframes(
 
     for (const [property, values] of Object.entries(style)) {
       if (property === 'easing') {
-        const easingName = (
-          values.name in WebEasings ? values.name : 'linear'
-        ) as WebEasingsNames;
+        let easingName: WebEasingsNames = 'linear';
+
+        if (values in WebEasings) {
+          easingName = values;
+        } else if (values.name in WebEasings) {
+          easingName = values.name;
+        }
 
         keyframe += `animation-timing-function: cubic-bezier(${WebEasings[
           easingName

packages/react-native-reanimated/src/layoutReanimation/web/animationsManager.ts

@@ -28,6 +28,7 @@ import { areDOMRectsEqual } from './domUtils';
 import type { TransitionData } from './animationParser';
 import { Keyframe } from '../animationBuilder';
 import { makeElementVisible } from './componentStyle';
+import { EasingNameSymbol } from '../../Easing';
 
 function chooseConfig<ComponentProps extends Record<string, unknown>>(
   animationType: LayoutAnimationType,
@@ -236,6 +237,10 @@ export function tryActivateLayoutTransition<
     scaleX: snapshot.width / rect.width,
     scaleY: snapshot.height / rect.height,
     reversed: false, // This field is used only in `SequencedTransition`, so by default it will be false
+    easingX:
+      (props.layout as CustomConfig).easingXV?.[EasingNameSymbol] ?? 'ease',
+    easingY:
+      (props.layout as CustomConfig).easingYV?.[EasingNameSymbol] ?? 'ease',
     entering: enteringAnimation,
     exiting: exitingAnimation,
   };

packages/react-native-reanimated/src/layoutReanimation/web/componentUtils.ts

@@ -8,7 +8,7 @@ import type {
   CustomConfig,
   KeyframeDefinitions,
 } from './config';
-import { WebEasings } from './Easing.web';
+import { WebEasings, getEasingByName } from './Easing.web';
 import type { WebEasingsNames } from './Easing.web';
 import type { TransitionData } from './animationParser';
 import { TransitionGenerator } from './createAnimation';
@@ -21,11 +21,12 @@ import type { ReanimatedSnapshot, ScrollOffsets } from './componentStyle';
 import { setElementPosition, snapshots } from './componentStyle';
 import { Keyframe } from '../animationBuilder';
 import { ReducedMotionManager } from '../../ReducedMotion';
+import { prepareCurvedTransition } from './transition/Curved.web';
 import { EasingNameSymbol } from '../../Easing';
 
 function getEasingFromConfig(config: CustomConfig): string {
   if (!config.easingV) {
-    return `cubic-bezier(${WebEasings.linear.toString()})`;
+    return getEasingByName('linear');
   }
 
   const easingName = config.easingV[EasingNameSymbol];
@@ -35,12 +36,10 @@ function getEasingFromConfig(config: CustomConfig): string {
       `[Reanimated] Selected easing is not currently supported on web.`
     );
 
-    return `cubic-bezier(${WebEasings.linear.toString()})`;
+    return getEasingByName('linear');
   }
 
-  return `cubic-bezier(${WebEasings[
-    easingName as WebEasingsNames
-  ].toString()})`;
+  return getEasingByName(easingName as WebEasingsNames);
 }
 
 function getRandomDelay(maxDelay = 1000) {
@@ -232,6 +231,9 @@ export function handleLayoutTransition(
     case 'JumpingTransition':
       animationType = TransitionType.JUMPING;
       break;
+    case 'CurvedTransition':
+      animationType = TransitionType.CURVED;
+      break;
     case 'EntryExitTransition':
       animationType = TransitionType.ENTRY_EXIT;
       break;
@@ -240,11 +242,21 @@ export function handleLayoutTransition(
       break;
   }
 
-  animationConfig.animationName = TransitionGenerator(
-    animationType,
-    transitionData
-  );
+  const { transitionKeyframeName, dummyTransitionKeyframeName } =
+    TransitionGenerator(animationType, transitionData);
+
+  animationConfig.animationName = transitionKeyframeName;
 
+  if (animationType === TransitionType.CURVED) {
+    const { dummy, dummyAnimationConfig } = prepareCurvedTransition(
+      element,
+      animationConfig,
+      transitionData,
+      dummyTransitionKeyframeName! // In `CurvedTransition` it cannot be undefined
+    );
+
+    setElementAnimation(dummy, dummyAnimationConfig);
+  }
   setElementAnimation(element, animationConfig);
 }
 

packages/react-native-reanimated/src/layoutReanimation/web/config.ts

@@ -64,6 +64,8 @@ interface EasingType {
 
 export interface CustomConfig {
   easingV?: EasingType;
+  easingXV?: EasingType;
+  easingYV?: EasingType;
   durationV?: number;
   delayV?: number;
   randomizeDelay?: boolean;
@@ -81,6 +83,7 @@ export enum TransitionType {
   SEQUENCED,
   FADING,
   JUMPING,
+  CURVED,
   ENTRY_EXIT,
 }
 

packages/react-native-reanimated/src/layoutReanimation/web/createAnimation.ts

@@ -14,6 +14,7 @@ import { SequencedTransition } from './transition/Sequenced.web';
 import { FadingTransition } from './transition/Fading.web';
 import { JumpingTransition } from './transition/Jumping.web';
 import { insertWebAnimation } from './domUtils';
+import { CurvedTransition } from './transition/Curved.web';
 import { EntryExitTransition } from './transition/EntryExit.web';
 
 type TransformType = NonNullable<TransformsStyle['transform']>;
@@ -156,6 +157,8 @@ export function TransitionGenerator(
   transitionData: TransitionData
 ) {
   const transitionKeyframeName = generateNextCustomKeyframeName();
+  let dummyTransitionKeyframeName;
+
   let transitionObject;
 
   switch (transitionType) {
@@ -183,6 +186,26 @@ export function TransitionGenerator(
         transitionData
       );
       break;
+
+    // Here code block with {} is necessary because of eslint
+    case TransitionType.CURVED: {
+      dummyTransitionKeyframeName = generateNextCustomKeyframeName();
+
+      const { firstKeyframeObj, secondKeyframeObj } = CurvedTransition(
+        transitionKeyframeName,
+        dummyTransitionKeyframeName,
+        transitionData
+      );
+
+      transitionObject = firstKeyframeObj;
+
+      const dummyKeyframe =
+        convertAnimationObjectToKeyframes(secondKeyframeObj);
+
+      insertWebAnimation(dummyTransitionKeyframeName, dummyKeyframe);
+
+      break;
+    }
     case TransitionType.ENTRY_EXIT:
       transitionObject = EntryExitTransition(
         transitionKeyframeName,
@@ -196,5 +219,5 @@ export function TransitionGenerator(
 
   insertWebAnimation(transitionKeyframeName, transitionKeyframe);
 
-  return transitionKeyframeName;
+  return { transitionKeyframeName, dummyTransitionKeyframeName };
 }

packages/react-native-reanimated/src/layoutReanimation/web/transition/Curved.web.ts

@@ -0,0 +1,157 @@
+'use strict';
+import { LayoutAnimationType } from '../..';
+import type { WebEasingsNames } from '../Easing.web';
+import { getEasingByName } from '../Easing.web';
+import type { TransitionData } from '../animationParser';
+import type { AnimationConfig } from '../config';
+
+function resetStyle(component: HTMLElement) {
+  component.style.animationName = ''; // This line prevents unwanted entering animation
+  component.style.position = 'absolute';
+  component.style.top = '0px';
+  component.style.left = '0px';
+  component.style.margin = '0px';
+  component.style.width = '100%';
+  component.style.height = '100%';
+}
+
+function showChildren(
+  parent: HTMLElement,
+  childrenDisplayProperty: Map<HTMLElement, string>,
+  shouldShow: boolean
+) {
+  for (let i = 0; i < parent.children.length; ++i) {
+    const child = parent.children[i] as HTMLElement;
+
+    if (shouldShow) {
+      child.style.display = childrenDisplayProperty.get(child)!;
+    } else {
+      childrenDisplayProperty.set(child, child.style.display);
+      child.style.display = 'none';
+    }
+  }
+}
+
+function prepareParent(
+  element: HTMLElement,
+  dummy: HTMLElement,
+  animationConfig: AnimationConfig,
+  transitionData: TransitionData
+) {
+  // Adjust configs for `CurvedTransition` and create config object for dummy
+  animationConfig.easing = getEasingByName(
+    transitionData.easingX as WebEasingsNames
+  );
+
+  const childrenDisplayProperty = new Map<HTMLElement, string>();
+  showChildren(element, childrenDisplayProperty, false);
+
+  const originalBackgroundColor = element.style.backgroundColor;
+  element.style.backgroundColor = 'transparent';
+
+  const onFinalize = () => {
+    if (element.contains(dummy)) {
+      element.removeChild(dummy);
+    }
+
+    showChildren(element, childrenDisplayProperty, true);
+
+    element.style.backgroundColor = originalBackgroundColor;
+  };
+
+  const animationCancelCallback = () => {
+    onFinalize();
+    element.removeEventListener('animationcancel', animationCancelCallback);
+  };
+
+  const animationEndCallback = () => {
+    onFinalize();
+    element.removeEventListener('animationend', animationEndCallback);
+  };
+
+  element.addEventListener('animationend', animationEndCallback);
+  element.addEventListener('animationcancel', animationCancelCallback);
+
+  element.appendChild(dummy);
+}
+
+function prepareDummy(
+  element: HTMLElement,
+  animationConfig: AnimationConfig,
+  transitionData: TransitionData,
+  dummyTransitionKeyframeName: string
+) {
+  const dummyAnimationConfig: AnimationConfig = {
+    animationName: dummyTransitionKeyframeName,
+    animationType: LayoutAnimationType.LAYOUT,
+    duration: animationConfig.duration,
+    delay: animationConfig.delay,
+    easing: getEasingByName(transitionData.easingY as WebEasingsNames),
+    callback: null,
+    reversed: false,
+  };
+
+  const dummy = element.cloneNode(true) as HTMLElement;
+  resetStyle(dummy);
+
+  return { dummy, dummyAnimationConfig };
+}
+
+export function prepareCurvedTransition(
+  element: HTMLElement,
+  animationConfig: AnimationConfig,
+  transitionData: TransitionData,
+  dummyTransitionKeyframeName: string
+) {
+  const { dummy, dummyAnimationConfig } = prepareDummy(
+    element,
+    animationConfig,
+    transitionData,
+    dummyTransitionKeyframeName
+  );
+
+  prepareParent(element, dummy, animationConfig, transitionData);
+
+  return { dummy, dummyAnimationConfig };
+}
+
+export function CurvedTransition(
+  keyframeXName: string,
+  keyframeYName: string,
+  transitionData: TransitionData
+) {
+  const keyframeXObj = {
+    name: keyframeXName,
+    style: {
+      0: {
+        transform: [
+          {
+            translateX: `${transitionData.translateX}px`,
+            scale: `${transitionData.scaleX},${transitionData.scaleY}`,
+          },
+        ],
+      },
+    },
+    duration: 300,
+  };
+
+  const keyframeYObj = {
+    name: keyframeYName,
+    style: {
+      0: {
+        transform: [
+          {
+            translateY: `${transitionData.translateY}px`,
+            scale: `${transitionData.scaleX},${transitionData.scaleY}`,
+          },
+        ],
+      },
+    },
+    duration: 300,
+  };
+
+  return {
+    firstKeyframeObj: keyframeXObj,
+    secondKeyframeObj: keyframeYObj,
+  };
+}