Mirrors/clay
1
0
Fork 0
mirror of https://github.com/nicbarker/clay.git synced 2026-04-22 03:01:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Correct handling of position transitions when dimensions are also transitioning

Browse source
This commit is contained in:
Nic Barker 2026-03-26 21:50:01 +11:00
parent 77b54a2cec
commit fd815433f6
2 changed files with 368 additions and 344 deletions
Download patch file Download diff file Expand all files Collapse all files

44
examples/raylib-transitions/main.c
View file

@ -74,58 +74,43 @@ bool Clay_EaseOut(Clay_TransitionCallbackArguments arguments) {
float ratio = arguments.elapsedTime / arguments.duration;
if (ratio < 1) {
float lerpAmount = (1 - powf(1 - ratio, 3.0f));
bool allProperties = arguments.properties == CLAY_TRANSITION_PROPERTY_ALL;
if (allProperties || arguments.properties & CLAY_TRANSITION_PROPERTY_X) {
if (arguments.properties & CLAY_TRANSITION_PROPERTY_X) {
arguments.current->boundingBox.x = Lerp(arguments.initial.boundingBox.x, arguments.target.boundingBox.x, lerpAmount);
} else {
arguments.current->boundingBox.x = arguments.target.boundingBox.x;
}
if (allProperties || arguments.properties & CLAY_TRANSITION_PROPERTY_Y) {
if (arguments.properties & CLAY_TRANSITION_PROPERTY_Y) {
arguments.current->boundingBox.y = Lerp(arguments.initial.boundingBox.y, arguments.target.boundingBox.y, lerpAmount);
} else {
arguments.current->boundingBox.y = arguments.target.boundingBox.y;
}
if (allProperties || arguments.properties & CLAY_TRANSITION_PROPERTY_WIDTH) {
if (arguments.properties & CLAY_TRANSITION_PROPERTY_WIDTH) {
arguments.current->boundingBox.width = Lerp(arguments.initial.boundingBox.width, arguments.target.boundingBox.width, lerpAmount);
} else {
arguments.current->boundingBox.width = arguments.target.boundingBox.width;
}
if (allProperties || arguments.properties & CLAY_TRANSITION_PROPERTY_HEIGHT) {
if (arguments.properties & CLAY_TRANSITION_PROPERTY_HEIGHT) {
arguments.current->boundingBox.height = Lerp(arguments.initial.boundingBox.height, arguments.target.boundingBox.height, lerpAmount);
} else {
arguments.current->boundingBox.height = arguments.target.boundingBox.height;
}
if (allProperties || arguments.properties & CLAY_TRANSITION_PROPERTY_BACKGROUND_COLOR) {
if (arguments.properties & CLAY_TRANSITION_PROPERTY_BACKGROUND_COLOR) {
arguments.current->backgroundColor = CLAY__INIT(Clay_Color) {
.r = Lerp(arguments.initial.backgroundColor.r, arguments.target.backgroundColor.r, lerpAmount),
.g = Lerp(arguments.initial.backgroundColor.g, arguments.target.backgroundColor.g, lerpAmount),
.b = Lerp(arguments.initial.backgroundColor.b, arguments.target.backgroundColor.b, lerpAmount),
.a = Lerp(arguments.initial.backgroundColor.a, arguments.target.backgroundColor.a, lerpAmount),
};
} else {
arguments.current->backgroundColor = arguments.target.backgroundColor;
}
if (allProperties || arguments.properties & CLAY_TRANSITION_PROPERTY_OVERLAY_COLOR) {
if (arguments.properties & CLAY_TRANSITION_PROPERTY_OVERLAY_COLOR) {
arguments.current->overlayColor = CLAY__INIT(Clay_Color) {
.r = Lerp(arguments.initial.overlayColor.r, arguments.target.overlayColor.r, lerpAmount),
.g = Lerp(arguments.initial.overlayColor.g, arguments.target.overlayColor.g, lerpAmount),
.b = Lerp(arguments.initial.overlayColor.b, arguments.target.overlayColor.b, lerpAmount),
.a = Lerp(arguments.initial.overlayColor.a, arguments.target.overlayColor.a, lerpAmount),
};
} else {
arguments.current->overlayColor = arguments.target.overlayColor;
}
if (allProperties || arguments.properties & CLAY_TRANSITION_PROPERTY_BORDER_COLOR) {
if (arguments.properties & CLAY_TRANSITION_PROPERTY_BORDER_COLOR) {
arguments.current->borderColor = CLAY__INIT(Clay_Color) {
.r = Lerp(arguments.initial.borderColor.r, arguments.target.borderColor.r, lerpAmount),
.g = Lerp(arguments.initial.borderColor.g, arguments.target.borderColor.g, lerpAmount),
.b = Lerp(arguments.initial.borderColor.b, arguments.target.borderColor.b, lerpAmount),
.a = Lerp(arguments.initial.borderColor.a, arguments.target.borderColor.a, lerpAmount),
};
} else {
arguments.current->borderColor = arguments.target.borderColor;
}
if (allProperties || arguments.properties & CLAY_TRANSITION_PROPERTY_BORDER_WIDTH) {
if (arguments.properties & CLAY_TRANSITION_PROPERTY_BORDER_WIDTH) {
arguments.current->borderWidth = CLAY__INIT(Clay_BorderWidth) {
.left = Lerp(arguments.initial.borderWidth.left, arguments.target.borderWidth.left, lerpAmount),
.right = Lerp(arguments.initial.borderWidth.right, arguments.target.borderWidth.right, lerpAmount),
@ -133,16 +118,9 @@ bool Clay_EaseOut(Clay_TransitionCallbackArguments arguments) {
.bottom = Lerp(arguments.initial.borderWidth.bottom, arguments.target.borderWidth.bottom, lerpAmount),
.betweenChildren = Lerp(arguments.initial.borderWidth.betweenChildren, arguments.target.borderWidth.betweenChildren, lerpAmount),
};
} else {
arguments.current->borderWidth = arguments.target.borderWidth;
}
return false;
} else {
arguments.current->boundingBox = arguments.target.boundingBox;
arguments.current->backgroundColor = arguments.target.backgroundColor;
arguments.current->overlayColor = arguments.target.overlayColor;
arguments.current->borderColor = arguments.target.borderColor;
arguments.current->borderWidth = arguments.target.borderWidth;
return true;
}
}
@ -298,10 +276,8 @@ Clay_RenderCommandArray CreateLayout(void) {
.border = { darker, CLAY_BORDER_OUTSIDE(3) },
.transition = {
.handler = Clay_EaseOut,
.duration = 1.f,
.properties = CLAY_TRANSITION_PROPERTY_BACKGROUND_COLOR
| CLAY_TRANSITION_PROPERTY_OVERLAY_COLOR
| CLAY_TRANSITION_PROPERTY_WIDTH | CLAY_TRANSITION_PROPERTY_X | CLAY_TRANSITION_PROPERTY_Y,
.duration = 0.5f,
.properties = CLAY_TRANSITION_PROPERTY_WIDTH | CLAY_TRANSITION_PROPERTY_POSITION | CLAY_TRANSITION_PROPERTY_OVERLAY_COLOR | CLAY_TRANSITION_PROPERTY_BACKGROUND_COLOR,
.enter = { .setInitialState = EnterExitSlideUp },
.exit = { .setFinalState = EnterExitSlideUp },
}