Skip to content

Commit

Permalink
[Web LA] Fix easing (#6304)
Browse files Browse the repository at this point in the history
## Summary

After #6163 was merged, each `worklet` function follows new naming
convention. Since `easings` are `worklets`, their `name` property has
also been changed. In web layout animations we were applying `easing`
based on its name, therefore changing it resulted in only default
`linear` easing being available on web.

This PR adds new `Symbol` into easing functions so that we can once
again get their name and apply correct easing to animations.

## Test plan

Tested on _**BasicLayoutAnimation**_ example with `Easing.exp`
  • Loading branch information
m-bert authored Jul 22, 2024
1 parent 243be4a commit a71d081
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 6 deletions.
11 changes: 11 additions & 0 deletions packages/react-native-reanimated/src/Easing.ts
Original file line number Diff line number Diff line change
Expand Up @@ -313,4 +313,15 @@ const EasingObject = {
inOut,
};

export const EasingNameSymbol = Symbol('easingName');

for (const [easingName, easing] of Object.entries(EasingObject)) {
Object.defineProperty(easing, EasingNameSymbol, {
value: easingName,
configurable: false,
enumerable: false,
writable: false,
});
}

export const Easing = EasingObject;
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,26 @@ import type { ReanimatedSnapshot, ScrollOffsets } from './componentStyle';
import { setElementPosition, snapshots } from './componentStyle';
import { Keyframe } from '../animationBuilder';
import { ReducedMotionManager } from '../../ReducedMotion';
import { EasingNameSymbol } from '../../Easing';

function getEasingFromConfig(config: CustomConfig): string {
const easingName =
config.easingV && config.easingV.name in WebEasings
? (config.easingV.name as WebEasingsNames)
: 'linear';
if (!config.easingV) {
return `cubic-bezier(${WebEasings.linear.toString()})`;
}

const easingName = config.easingV[EasingNameSymbol];

if (!(easingName in WebEasings)) {
console.warn(
`[Reanimated] Selected easing is not currently supported on web.`
);

return `cubic-bezier(${WebEasings.linear.toString()})`;
}

return `cubic-bezier(${WebEasings[easingName].toString()})`;
return `cubic-bezier(${WebEasings[
easingName as WebEasingsNames
].toString()})`;
}

function getRandomDelay(maxDelay = 1000) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,13 @@ export interface AnimationConfig {
reversed: boolean;
}

interface EasingType {
(): number;
[EasingNameSymbol: symbol]: string;
}

export interface CustomConfig {
easingV?: () => number;
easingV?: EasingType;
durationV?: number;
delayV?: number;
randomizeDelay?: boolean;
Expand Down

0 comments on commit a71d081

Please sign in to comment.