Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: withSpring color properties flickering #6821

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+9 −0
Open

fix: withSpring color properties flickering #6821

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/react-native-reanimated/src/Colors.ts
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about convertToRGBA and toLinearSpace functions?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

convertToRGBA converts from rgba string (rgba(255, 0, 0, 1)) to RGBA array, so it should receive correct input. In our current implementation first convertToRGBA is called transforming rgba(255, 0, 0, 1) to [1,0,0,1], then withSpring happens, perhaps returning negative values. And this is the moment where we clamp the values. We could also put clamp in those function you mentioned, but i think it'll overkill because they are protected when other functions (ex. rgbaArrayToRGBAColor) are clamped.

In retrospective we can also move the clamping to util.ts file function colorOnFrame, and clamp the result. In my opinion it will be better to leave clamping in Colors.ts (and if you want extended to convertToRGBA and toLinearSpace). If we were ever to use converting functions in files other that util.ts, then it would guarantee safe result.

Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,13 @@ function parsePercentage(str: string): number {
return int / 100;
}

function clampRGBA(RGBA: ParsedColorArray): void {
'worklet';
for (let i = 0; i < 4; i++) {
RGBA[i] = Math.max(0, Math.min(RGBA[i], 1));
}
}

const names: Record<string, number> = makeShareable({
transparent: 0x00000000,

Expand Down Expand Up @@ -693,6 +700,7 @@ export function convertToRGBA(color: unknown): ParsedColorArray {

export function rgbaArrayToRGBAColor(RGBA: ParsedColorArray): string {
'worklet';
clampRGBA(RGBA);
const alpha = RGBA[3] < 0.001 ? 0 : RGBA[3];
return `rgba(${Math.round(RGBA[0] * 255)}, ${Math.round(
RGBA[1] * 255
Expand All @@ -718,6 +726,7 @@ export function toGammaSpace(
): ParsedColorArray {
'worklet';
const res = [];
clampRGBA(RGBA);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand that you want to clamp values before converting the color array into a string, as done in the rgbaArrayToRGBAColor method. However, I'm curious why we also need to call clampRGBA in the toGammaSpace method. What's the reasoning behind this additional clamping step? 🤔

Copy link
Contributor Author

@patrycjakalinska patrycjakalinska Jan 8, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be honest toGammaSpace is initial place for clamping, as is it the first function to recieve wrong values that need to be clamped:

    animation.current = rgbaArrayToRGBAColor(
      toGammaSpace(res as ParsedColorArray)
    );

It is also helpful to put it in toGammaSpace as it protects interpolateColorRGB function

  return rgbaColor(
    toGammaSpace(r, gamma),
    toGammaSpace(g, gamma),
    toGammaSpace(b, gamma),
    a
  );

So answering your question, toGammaSpace is the place we must put clamping, rgbaArrayToRGBAColor is a place I decided to put it as a precaution if this function would be used without toGammaSpace preceding it C:

for (let i = 0; i < 3; ++i) {
res.push(Math.pow(RGBA[i], 1 / gamma));
}
Expand Down
Loading