make function box more smooth

This commit is contained in:
Elizabeth Hunt 2024-02-09 10:58:28 -07:00
parent 05572d8404
commit 7cf2017e95
Signed by: simponic
GPG Key ID: 52B3774857EB24B1
2 changed files with 22 additions and 15 deletions

View File

@ -91,7 +91,7 @@ export class FunctionBox extends Node {
<Rect direction={"row"} alignItems={"center"} gap={10}> <Rect direction={"row"} alignItems={"center"} gap={10}>
<Rect <Rect
direction={"row"} direction={"row"}
fontSize={this.inputFontSize} fontSize={0}
ref={makeRef(this.inputs, i)} ref={makeRef(this.inputs, i)}
justifyContent={"end"} justifyContent={"end"}
opacity={1} opacity={1}
@ -153,7 +153,7 @@ export class FunctionBox extends Node {
ref={this.output} ref={this.output}
justifyContent={"end"} justifyContent={"end"}
opacity={1} opacity={1}
fontSize={this.outputFontSize} fontSize={0}
></Rect> ></Rect>
</Rect> </Rect>
</Rect> </Rect>
@ -164,10 +164,10 @@ export class FunctionBox extends Node {
public *resetInput(duration: number) { public *resetInput(duration: number) {
yield* all( yield* all(
...this.inputs.map((x) => ...this.inputs.map((x) =>
all(x.opacity(1, duration), x.fontSize(this.inputFontSize, duration)), all(x.opacity(0, duration), x.fontSize(0, duration)),
), ),
...this.inputSegments.map((segment) => ...this.inputSegments.map((segment) =>
all(segment.points([], duration), segment.opacity(1, duration)), all(segment.points([], duration), segment.opacity(0, duration)),
), ),
); );
@ -206,12 +206,15 @@ export class FunctionBox extends Node {
}); });
yield* all( yield* all(
...this.inputSegments.map((segment) => ...this.inputSegments.map((segment) =>
segment.points( all(
[ segment.points(
{ x: -this.padding, y: 0 }, [
{ x: -this.delta, y: 0 }, { x: -this.padding, y: 0 },
], { x: -this.delta, y: 0 },
duration, ],
duration,
),
segment.opacity(1, duration),
), ),
), ),
...this.inputs.map((input) => ...this.inputs.map((input) =>
@ -231,6 +234,9 @@ export class FunctionBox extends Node {
); );
yield* all( yield* all(
this.resetInput(duration), this.resetInput(duration),
...this.inputs.map((input) =>
all(input.opacity(0.2, duration), input.fontSize(0, duration)),
),
this.boxMoji().text(this.workingText, duration), this.boxMoji().text(this.workingText, duration),
); );
} }
@ -239,7 +245,6 @@ export class FunctionBox extends Node {
yield* all( yield* all(
this.child()?.opacity(0.2, duration), this.child()?.opacity(0.2, duration),
this.output().opacity(0.2, duration), this.output().opacity(0.2, duration),
this.output().fontSize(this.outputFontSize, duration),
this.outputSegment().opacity(0, duration), this.outputSegment().opacity(0, duration),
); );
@ -276,6 +281,7 @@ export class FunctionBox extends Node {
yield* all( yield* all(
this.boxMoji().text(this.idlingText, duration), this.boxMoji().text(this.idlingText, duration),
this.output().fontSize(this.outputFontSize, duration),
this.outputSegment().points( this.outputSegment().points(
[ [
{ x: 0, y: 0 }, { x: 0, y: 0 },

View File

@ -20,6 +20,7 @@ export default makeScene2D(function* (view) {
gap={12} gap={12}
alignItems="start" alignItems="start"
y={-10} y={-10}
fontSize={40}
> >
<Node ref={node} opacity={0}> <Node ref={node} opacity={0}>
<Txt fontFamily={theme.font} fill={theme.text.hex}> <Txt fontFamily={theme.font} fill={theme.text.hex}>
@ -32,10 +33,10 @@ export default makeScene2D(function* (view) {
{"=>"} I {"<3"} Functional Programming λ {"=>"} I {"<3"} Functional Programming λ
</Txt> </Txt>
<Txt fontFamily={theme.font} fill={theme.text.hex}> <Txt fontFamily={theme.font} fill={theme.text.hex}>
{"=>"} I'm a soon to be SDE at {"\n"} AWS in Seattle. {"=>"} I'm a soon to be SDE at AWS in {"\n"}Seattle.
</Txt> </Txt>
<Txt fontFamily={theme.font} fill={theme.text.hex}> <Txt fontFamily={theme.font} fill={theme.text.hex}>
{"=>"} 20, president of FSLC from {"\n "} 2021 - 2024, grad this {"=>"} 20, president of FSLC from 2021{"\n "} - 2024, grad this
semester semester
</Txt> </Txt>
</Node> </Node>
@ -49,12 +50,12 @@ export default makeScene2D(function* (view) {
yield img().fill(img().getColorAtPoint(0)); yield img().fill(img().getColorAtPoint(0));
const diff = 380; const diff = 320;
yield* all( yield* all(
img().size([450, 450], 1), img().size([450, 450], 1),
img().radius(50, 1), img().radius(50, 1),
img().alpha(1, 1), img().alpha(1, 1),
img().position.x(-diff, 1), img().position.x(-1.3 * diff, 1),
node().opacity(1, 1), node().opacity(1, 1),
layout().position.x(diff, 1), layout().position.x(diff, 1),
src().opacity(1, 1), src().opacity(1, 1),