From fadad8b0357ae00b07c92a5d4d284b06bbc31788 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Thu, 19 Oct 2023 13:12:04 +0200 Subject: [PATCH 01/11] Initial support --- .../layoutReanimation/web/animationParser.ts | 2 +- .../web/animationsManager.ts | 34 ++++++++++--- .../layoutReanimation/web/componentUtils.ts | 8 +-- .../layoutReanimation/web/config.ts | 5 +- .../layoutReanimation/web/createAnimation.ts | 50 ++++++++++++++++--- 5 files changed, 78 insertions(+), 21 deletions(-) diff --git a/src/reanimated2/layoutReanimation/web/animationParser.ts b/src/reanimated2/layoutReanimation/web/animationParser.ts index 42595b4fd07d..b7429df3c98b 100644 --- a/src/reanimated2/layoutReanimation/web/animationParser.ts +++ b/src/reanimated2/layoutReanimation/web/animationParser.ts @@ -14,7 +14,7 @@ export interface ReanimatedWebTransformProperties { skewX?: string; } -interface AnimationStyle { +export interface AnimationStyle { opacity?: number; transform?: ReanimatedWebTransformProperties[]; } diff --git a/src/reanimated2/layoutReanimation/web/animationsManager.ts b/src/reanimated2/layoutReanimation/web/animationsManager.ts index 81b2a1693da0..dd917c4d98b4 100644 --- a/src/reanimated2/layoutReanimation/web/animationsManager.ts +++ b/src/reanimated2/layoutReanimation/web/animationsManager.ts @@ -5,7 +5,10 @@ import { Animations } from './config'; import type { AnimatedComponentProps } from '../../../createAnimatedComponent/utils'; import { LayoutAnimationType } from '../animationBuilder/commonTypes'; import type { StyleProps } from '../../commonTypes'; -import { createAnimationWithExistingTransform } from './createAnimation'; +import { + createAnimationWithExistingTransform, + createCustomKeyFrameAnimation, +} from './createAnimation'; import { getProcessedConfig, handleEnteringAnimation, @@ -16,6 +19,7 @@ import { import { areDOMRectsEqual } from './domUtils'; import type { TransformsStyle } from 'react-native'; import type { TransitionData } from './animationParser'; +import { Keyframe } from '../animationBuilder'; function chooseConfig>( animationType: LayoutAnimationType, @@ -36,12 +40,17 @@ function chooseConfig>( function checkUndefinedAnimationFail( initialAnimationName: string, isLayoutTransition: boolean, + isCustomKeyframe: boolean, hasEnteringAnimation: boolean, element: HTMLElement ) { // This prevents crashes if we try to set animations that are not defined. - // We don't care about layout transitions since they're created dynamically - if (initialAnimationName in Animations || isLayoutTransition) { + // We don't care about layout transitions or custom keyframes since they're created dynamically + if ( + initialAnimationName in Animations || + isLayoutTransition || + isCustomKeyframe + ) { return false; } @@ -114,12 +123,14 @@ export function startWebLayoutAnimation< const hasEnteringAnimation = props.entering !== undefined; const isLayoutTransition = animationType === LayoutAnimationType.LAYOUT; + const isCustomKeyframe = config instanceof Keyframe; const initialAnimationName = typeof config === 'function' ? config.name : config.constructor.name; const shouldFail = checkUndefinedAnimationFail( initialAnimationName, isLayoutTransition, + isCustomKeyframe, hasEnteringAnimation, element ); @@ -130,14 +141,23 @@ export function startWebLayoutAnimation< const transform = (props.style as StyleProps)?.transform; - const animationName = transform - ? createAnimationWithExistingTransform(initialAnimationName, transform) - : initialAnimationName; + let animationName = initialAnimationName; + + if (isCustomKeyframe) { + animationName = createCustomKeyFrameAnimation( + (config as CustomConfig).definitions!, + transform + ); + } else { + animationName = transform + ? createAnimationWithExistingTransform(initialAnimationName, transform) + : initialAnimationName; + } const animationConfig = getProcessedConfig( animationName, config as CustomConfig, - isLayoutTransition, + isLayoutTransition || isCustomKeyframe, initialAnimationName as AnimationNames ); diff --git a/src/reanimated2/layoutReanimation/web/componentUtils.ts b/src/reanimated2/layoutReanimation/web/componentUtils.ts index 9948f151ce49..e2fffb9487e1 100644 --- a/src/reanimated2/layoutReanimation/web/componentUtils.ts +++ b/src/reanimated2/layoutReanimation/web/componentUtils.ts @@ -66,10 +66,10 @@ function getReducedMotionFromConfig(config: CustomConfig) { function getDurationFromConfig( config: CustomConfig, - isLayoutTransition: boolean, + needsCustomization: boolean, animationName: AnimationNames ): number { - const defaultDuration = isLayoutTransition + const defaultDuration = needsCustomization ? 0.3 : Animations[animationName].duration; @@ -91,14 +91,14 @@ function getReversedFromConfig(config: CustomConfig) { export function getProcessedConfig( animationName: string, config: CustomConfig, - isLayoutTransition: boolean, + needsCustomization: boolean, initialAnimationName: AnimationNames ): AnimationConfig { return { animationName: animationName, duration: getDurationFromConfig( config, - isLayoutTransition, + needsCustomization, initialAnimationName ), delay: getDelayFromConfig(config), diff --git a/src/reanimated2/layoutReanimation/web/config.ts b/src/reanimated2/layoutReanimation/web/config.ts index c3c6782b0747..4b125ca93f2e 100644 --- a/src/reanimated2/layoutReanimation/web/config.ts +++ b/src/reanimated2/layoutReanimation/web/config.ts @@ -36,13 +36,15 @@ import { } from './animation/Stretch.web'; import { ZoomIn, ZoomInData, ZoomOut, ZoomOutData } from './animation/Zoom.web'; -import type { AnimationData } from './animationParser'; +import type { AnimationData, AnimationStyle } from './animationParser'; // Since we cannot remove keyframe from DOM by its name, we have to store its id export const customAnimations = new Map(); export type AnimationCallback = ((finished: boolean) => void) | null; +export type KeyframeDefinitions = Record; + export interface AnimationConfig { animationName: string; duration: number; @@ -61,6 +63,7 @@ export interface CustomConfig { reduceMotionV?: ReduceMotion; callbackV?: AnimationCallback; reversed?: boolean; + definitions?: KeyframeDefinitions; } export enum TransitionType { diff --git a/src/reanimated2/layoutReanimation/web/createAnimation.ts b/src/reanimated2/layoutReanimation/web/createAnimation.ts index e15182c0fa11..dea67427fc24 100644 --- a/src/reanimated2/layoutReanimation/web/createAnimation.ts +++ b/src/reanimated2/layoutReanimation/web/createAnimation.ts @@ -1,6 +1,7 @@ 'use strict'; import { Animations, AnimationsData, TransitionType } from './config'; +import type { KeyframeDefinitions } from './config'; import { convertAnimationObjectToKeyframes } from './animationParser'; import type { AnimationData, @@ -13,12 +14,12 @@ import { SequencedTransition } from './transition/Sequenced.web'; import { FadingTransition } from './transition/Fading.web'; import { insertWebAnimation } from './domUtils'; +type TransformType = NonNullable; + // Translate values are passed as numbers. However, if `translate` property receives number, it will not automatically // convert it to `px`. Therefore if we want to keep exisitng transform we have to add 'px' suffix to each of translate values // that are present inside transform. -function addPxToTranslate( - existingTransform: NonNullable -) { +function addPxToTranslate(existingTransform: TransformType) { type RNTransformProp = (typeof existingTransform)[number]; if (typeof existingTransform === 'string') { @@ -73,13 +74,13 @@ function addExistingTransform( */ export function createAnimationWithExistingTransform( animationName: string, - existingTransform: NonNullable, - layoutTransition?: AnimationData + existingTransform: TransformType, + customData?: AnimationData ) { let newAnimationData; - if (layoutTransition) { - newAnimationData = layoutTransition; + if (customData) { + newAnimationData = customData; } else { if (!(animationName in Animations)) { return ''; @@ -106,6 +107,39 @@ export function createAnimationWithExistingTransform( return keyframeName; } +export function createCustomKeyFrameAnimation( + keyframeDefinitions: KeyframeDefinitions, + transform: TransformsStyle['transform'] +) { + for (const value of Object.values(keyframeDefinitions)) { + if (value.transform) { + value.transform = addPxToTranslate(value.transform as TransformType); + } + } + + const animationData: AnimationData = { + name: '', + style: keyframeDefinitions, + duration: -1, + }; + + if (transform) { + return createAnimationWithExistingTransform( + animationData.name, + transform, + animationData + ); + } + + animationData.name = generateNextCustomKeyframeName(); + + const parsedKeyframe = convertAnimationObjectToKeyframes(animationData); + + insertWebAnimation(animationData.name, parsedKeyframe); + + return animationData.name; +} + let customKeyframeCounter = 0; function generateNextCustomKeyframeName() { @@ -122,7 +156,7 @@ function generateNextCustomKeyframeName() { export function TransitionGenerator( transitionType: TransitionType, transitionData: TransitionData, - existingTransform?: NonNullable + existingTransform?: TransformType ) { const transitionKeyframeName = generateNextCustomKeyframeName(); let transitionObject; From f239f83fb36c82f7b54be86a5a0581a741658dec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Thu, 19 Oct 2023 13:21:18 +0200 Subject: [PATCH 02/11] Remove non-null assertion --- .../layoutReanimation/web/animationsManager.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/reanimated2/layoutReanimation/web/animationsManager.ts b/src/reanimated2/layoutReanimation/web/animationsManager.ts index dd917c4d98b4..65212385a159 100644 --- a/src/reanimated2/layoutReanimation/web/animationsManager.ts +++ b/src/reanimated2/layoutReanimation/web/animationsManager.ts @@ -1,6 +1,11 @@ 'use strict'; -import type { AnimationConfig, AnimationNames, CustomConfig } from './config'; +import type { + AnimationConfig, + AnimationNames, + CustomConfig, + KeyframeDefinitions, +} from './config'; import { Animations } from './config'; import type { AnimatedComponentProps } from '../../../createAnimatedComponent/utils'; import { LayoutAnimationType } from '../animationBuilder/commonTypes'; @@ -145,7 +150,7 @@ export function startWebLayoutAnimation< if (isCustomKeyframe) { animationName = createCustomKeyFrameAnimation( - (config as CustomConfig).definitions!, + (config as CustomConfig).definitions as KeyframeDefinitions, transform ); } else { From e5c2009cf973b06d8310f5cff345286a73034686 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Tue, 5 Dec 2023 09:33:39 +0100 Subject: [PATCH 03/11] Fix addPxToTranslate --- src/reanimated2/layoutReanimation/web/createAnimation.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/reanimated2/layoutReanimation/web/createAnimation.ts b/src/reanimated2/layoutReanimation/web/createAnimation.ts index 929df92c61cc..a0c1e5cc6c56 100644 --- a/src/reanimated2/layoutReanimation/web/createAnimation.ts +++ b/src/reanimated2/layoutReanimation/web/createAnimation.ts @@ -28,7 +28,7 @@ function addPxToTranslate(existingTransform: TransformType) { (transformProp: RNTransformProp) => { const newTransformProp: ReanimatedWebTransformProperties = {}; for (const [key, value] of Object.entries(transformProp)) { - if (key.includes('translate')) { + if (key.includes('translate') && typeof value === 'number') { // @ts-ignore After many trials we decided to ignore this error - it says that we cannot use 'key' to index this object. // Sadly it doesn't go away after using cast `key as keyof TransformProperties`. newTransformProp[key] = `${value}px`; From e63dc05ec173be037989083bc47641e57aab9e14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Tue, 16 Jan 2024 10:39:07 +0100 Subject: [PATCH 04/11] Adjust timestamp --- src/reanimated2/layoutReanimation/web/animationParser.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/reanimated2/layoutReanimation/web/animationParser.ts b/src/reanimated2/layoutReanimation/web/animationParser.ts index 45f920f1cfe6..6825cbc1e939 100644 --- a/src/reanimated2/layoutReanimation/web/animationParser.ts +++ b/src/reanimated2/layoutReanimation/web/animationParser.ts @@ -41,9 +41,16 @@ export function convertAnimationObjectToKeyframes( let keyframe = `@keyframes ${animationObject.name} { `; for (const [timestamp, style] of Object.entries(animationObject.style)) { - keyframe += `${timestamp}% { `; + const step = + timestamp === 'from' ? 0 : timestamp === 'to' ? 100 : timestamp; + + keyframe += `${step}% { `; for (const [property, values] of Object.entries(style)) { + if (property === 'easing') { + continue; + } + if (property !== 'transform') { keyframe += `${property}: ${values}; `; continue; From b06d7fe58ffab8d808f872157d5e1bc115213191 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Thu, 7 Mar 2024 15:52:58 +0100 Subject: [PATCH 05/11] Apply easing --- src/reanimated2/layoutReanimation/web/animationParser.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/reanimated2/layoutReanimation/web/animationParser.ts b/src/reanimated2/layoutReanimation/web/animationParser.ts index 6825cbc1e939..c1537ee50252 100644 --- a/src/reanimated2/layoutReanimation/web/animationParser.ts +++ b/src/reanimated2/layoutReanimation/web/animationParser.ts @@ -1,6 +1,8 @@ 'use strict'; import type { TransformsStyle } from 'react-native'; +import { WebEasings } from './config'; +import type { WebEasingsNames } from './config'; export interface ReanimatedWebTransformProperties { translateX?: string; @@ -48,6 +50,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; + + keyframe += `animation-timing-function: cubic-bezier(${WebEasings[ + easingName + ].toString()});`; continue; } From e32df626d92ed1b18a6c8a144fe9b66a9a78eabf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Thu, 7 Mar 2024 15:59:45 +0100 Subject: [PATCH 06/11] Change formatting --- src/reanimated2/layoutReanimation/web/animationParser.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/reanimated2/layoutReanimation/web/animationParser.ts b/src/reanimated2/layoutReanimation/web/animationParser.ts index c1537ee50252..a2c16f3b7290 100644 --- a/src/reanimated2/layoutReanimation/web/animationParser.ts +++ b/src/reanimated2/layoutReanimation/web/animationParser.ts @@ -54,9 +54,7 @@ export function convertAnimationObjectToKeyframes( values.name in WebEasings ? values.name : 'linear' ) as WebEasingsNames; - keyframe += `animation-timing-function: cubic-bezier(${WebEasings[ - easingName - ].toString()});`; + keyframe += `animation-timing-function: cubic-bezier(${WebEasings[easingName].toString()});`; continue; } From 2fbefc27578a85988c7ab4d0d90c24c79688a32e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Thu, 7 Mar 2024 16:03:40 +0100 Subject: [PATCH 07/11] Merge conditions --- .../layoutReanimation/web/animationsManager.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/reanimated2/layoutReanimation/web/animationsManager.ts b/src/reanimated2/layoutReanimation/web/animationsManager.ts index 1f703bf9f6a6..ded6685fd407 100644 --- a/src/reanimated2/layoutReanimation/web/animationsManager.ts +++ b/src/reanimated2/layoutReanimation/web/animationsManager.ts @@ -48,16 +48,11 @@ function chooseConfig>( function checkUndefinedAnimationFail( initialAnimationName: string, - isLayoutTransition: boolean, - isCustomKeyframe: boolean + needsCustomization: boolean ) { // This prevents crashes if we try to set animations that are not defined. // We don't care about layout transitions or custom keyframes since they're created dynamically - if ( - initialAnimationName in Animations || - isLayoutTransition || - isCustomKeyframe - ) { + if (initialAnimationName in Animations || needsCustomization) { return false; } @@ -118,8 +113,7 @@ function tryGetAnimationConfigWithTransform< const shouldFail = checkUndefinedAnimationFail( initialAnimationName, - isLayoutTransition, - isCustomKeyframe + isLayoutTransition || isCustomKeyframe ); if (shouldFail) { From 92c1666561d52e0d522cc2617ae3fc35d9560f5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Thu, 7 Mar 2024 16:11:24 +0100 Subject: [PATCH 08/11] Fix formatting --- src/reanimated2/layoutReanimation/web/animationParser.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/reanimated2/layoutReanimation/web/animationParser.ts b/src/reanimated2/layoutReanimation/web/animationParser.ts index a2c16f3b7290..8eb4a7f69111 100644 --- a/src/reanimated2/layoutReanimation/web/animationParser.ts +++ b/src/reanimated2/layoutReanimation/web/animationParser.ts @@ -54,7 +54,10 @@ export function convertAnimationObjectToKeyframes( values.name in WebEasings ? values.name : 'linear' ) as WebEasingsNames; - keyframe += `animation-timing-function: cubic-bezier(${WebEasings[easingName].toString()});`; + keyframe += `animation-timing-function: cubic-bezier(${WebEasings[ + easingName + ].toString()});`; + continue; } From 6e9b4b21ef8f23303f17999c1796b43fde1ca4e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Thu, 7 Mar 2024 16:50:54 +0100 Subject: [PATCH 09/11] Remove Circular dependencies --- .../layoutReanimation/web/animationParser.ts | 4 ++-- .../layoutReanimation/web/componentUtils.ts | 5 +++-- src/reanimated2/layoutReanimation/web/config.ts | 13 ------------- src/reanimated2/layoutReanimation/web/index.ts | 14 ++++++++++++++ 4 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/reanimated2/layoutReanimation/web/animationParser.ts b/src/reanimated2/layoutReanimation/web/animationParser.ts index 8eb4a7f69111..a3fb57e40abb 100644 --- a/src/reanimated2/layoutReanimation/web/animationParser.ts +++ b/src/reanimated2/layoutReanimation/web/animationParser.ts @@ -1,8 +1,8 @@ 'use strict'; import type { TransformsStyle } from 'react-native'; -import { WebEasings } from './config'; -import type { WebEasingsNames } from './config'; +import { WebEasings } from './'; +import type { WebEasingsNames } from './'; export interface ReanimatedWebTransformProperties { translateX?: string; diff --git a/src/reanimated2/layoutReanimation/web/componentUtils.ts b/src/reanimated2/layoutReanimation/web/componentUtils.ts index 610492260cd8..6c5aeceac331 100644 --- a/src/reanimated2/layoutReanimation/web/componentUtils.ts +++ b/src/reanimated2/layoutReanimation/web/componentUtils.ts @@ -1,14 +1,15 @@ 'use strict'; import type { TransformsStyle } from 'react-native'; -import { Animations, TransitionType, WebEasings } from './config'; +import { Animations, TransitionType } from './config'; import type { AnimationCallback, AnimationConfig, AnimationNames, CustomConfig, - WebEasingsNames, } from './config'; +import { WebEasings } from './'; +import type { WebEasingsNames } from './'; import { convertTransformToString } from './animationParser'; import type { TransitionData } from './animationParser'; import { TransitionGenerator } from './createAnimation'; diff --git a/src/reanimated2/layoutReanimation/web/config.ts b/src/reanimated2/layoutReanimation/web/config.ts index 7b119802eda4..8c82027f8d08 100644 --- a/src/reanimated2/layoutReanimation/web/config.ts +++ b/src/reanimated2/layoutReanimation/web/config.ts @@ -114,18 +114,5 @@ export const Animations = { ...RollOut, }; -// Those are the easings that can be implemented using Bezier curves. -// Others should be done as CSS animations -export const WebEasings = { - linear: [0, 0, 1, 1], - ease: [0.42, 0, 1, 1], - quad: [0.11, 0, 0.5, 0], - cubic: [0.32, 0, 0.67, 0], - sin: [0.12, 0, 0.39, 0], - circle: [0.55, 0, 1, 0.45], - exp: [0.7, 0, 0.84, 0], -}; - export type AnimationNames = keyof typeof Animations; export type LayoutTransitionsNames = keyof typeof AnimationsData; -export type WebEasingsNames = keyof typeof WebEasings; diff --git a/src/reanimated2/layoutReanimation/web/index.ts b/src/reanimated2/layoutReanimation/web/index.ts index d9c6485fd0a0..e1221e169556 100644 --- a/src/reanimated2/layoutReanimation/web/index.ts +++ b/src/reanimated2/layoutReanimation/web/index.ts @@ -8,3 +8,17 @@ export { export { getReducedMotionFromConfig, saveSnapshot } from './componentUtils'; export { configureWebLayoutAnimations } from './domUtils'; + +// Those are the easings that can be implemented using Bezier curves. +// Others should be done as CSS animations +export const WebEasings = { + linear: [0, 0, 1, 1], + ease: [0.42, 0, 1, 1], + quad: [0.11, 0, 0.5, 0], + cubic: [0.32, 0, 0.67, 0], + sin: [0.12, 0, 0.39, 0], + circle: [0.55, 0, 1, 0.45], + exp: [0.7, 0, 0.84, 0], +}; + +export type WebEasingsNames = keyof typeof WebEasings; From bee509b828fa47beb91cc902b106e26cc16e2652 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Mon, 11 Mar 2024 11:08:30 +0100 Subject: [PATCH 10/11] Move easing to separate file --- .../layoutReanimation/web/Easing.web.ts | 13 +++++++++++++ .../layoutReanimation/web/animationParser.ts | 4 ++-- .../layoutReanimation/web/componentUtils.ts | 4 ++-- src/reanimated2/layoutReanimation/web/index.ts | 14 -------------- 4 files changed, 17 insertions(+), 18 deletions(-) create mode 100644 src/reanimated2/layoutReanimation/web/Easing.web.ts diff --git a/src/reanimated2/layoutReanimation/web/Easing.web.ts b/src/reanimated2/layoutReanimation/web/Easing.web.ts new file mode 100644 index 000000000000..22c45fe74e46 --- /dev/null +++ b/src/reanimated2/layoutReanimation/web/Easing.web.ts @@ -0,0 +1,13 @@ +// Those are the easings that can be implemented using Bezier curves. +// Others should be done as CSS animations +export const WebEasings = { + linear: [0, 0, 1, 1], + ease: [0.42, 0, 1, 1], + quad: [0.11, 0, 0.5, 0], + cubic: [0.32, 0, 0.67, 0], + sin: [0.12, 0, 0.39, 0], + circle: [0.55, 0, 1, 0.45], + exp: [0.7, 0, 0.84, 0], +}; + +export type WebEasingsNames = keyof typeof WebEasings; diff --git a/src/reanimated2/layoutReanimation/web/animationParser.ts b/src/reanimated2/layoutReanimation/web/animationParser.ts index a3fb57e40abb..243c25380bd1 100644 --- a/src/reanimated2/layoutReanimation/web/animationParser.ts +++ b/src/reanimated2/layoutReanimation/web/animationParser.ts @@ -1,8 +1,8 @@ 'use strict'; import type { TransformsStyle } from 'react-native'; -import { WebEasings } from './'; -import type { WebEasingsNames } from './'; +import { WebEasings } from './Easing.web'; +import type { WebEasingsNames } from './Easing.web'; export interface ReanimatedWebTransformProperties { translateX?: string; diff --git a/src/reanimated2/layoutReanimation/web/componentUtils.ts b/src/reanimated2/layoutReanimation/web/componentUtils.ts index 6c5aeceac331..41dca8757016 100644 --- a/src/reanimated2/layoutReanimation/web/componentUtils.ts +++ b/src/reanimated2/layoutReanimation/web/componentUtils.ts @@ -8,8 +8,8 @@ import type { AnimationNames, CustomConfig, } from './config'; -import { WebEasings } from './'; -import type { WebEasingsNames } from './'; +import { WebEasings } from './Easing.web'; +import type { WebEasingsNames } from './Easing.web'; import { convertTransformToString } from './animationParser'; import type { TransitionData } from './animationParser'; import { TransitionGenerator } from './createAnimation'; diff --git a/src/reanimated2/layoutReanimation/web/index.ts b/src/reanimated2/layoutReanimation/web/index.ts index e1221e169556..d9c6485fd0a0 100644 --- a/src/reanimated2/layoutReanimation/web/index.ts +++ b/src/reanimated2/layoutReanimation/web/index.ts @@ -8,17 +8,3 @@ export { export { getReducedMotionFromConfig, saveSnapshot } from './componentUtils'; export { configureWebLayoutAnimations } from './domUtils'; - -// Those are the easings that can be implemented using Bezier curves. -// Others should be done as CSS animations -export const WebEasings = { - linear: [0, 0, 1, 1], - ease: [0.42, 0, 1, 1], - quad: [0.11, 0, 0.5, 0], - cubic: [0.32, 0, 0.67, 0], - sin: [0.12, 0, 0.39, 0], - circle: [0.55, 0, 1, 0.45], - exp: [0.7, 0, 0.84, 0], -}; - -export type WebEasingsNames = keyof typeof WebEasings; From fc05b98df9ceac01d448fd6b9d915e3ca4d9b793 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Bert?= Date: Mon, 11 Mar 2024 11:12:04 +0100 Subject: [PATCH 11/11] Add use strict --- src/reanimated2/layoutReanimation/web/Easing.web.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/reanimated2/layoutReanimation/web/Easing.web.ts b/src/reanimated2/layoutReanimation/web/Easing.web.ts index 22c45fe74e46..ab6d931663fa 100644 --- a/src/reanimated2/layoutReanimation/web/Easing.web.ts +++ b/src/reanimated2/layoutReanimation/web/Easing.web.ts @@ -1,3 +1,5 @@ +'use strict'; + // Those are the easings that can be implemented using Bezier curves. // Others should be done as CSS animations export const WebEasings = {