make function box more smooth
This commit is contained in:
parent
05572d8404
commit
7cf2017e95
@ -91,7 +91,7 @@ export class FunctionBox extends Node {
|
||||
<Rect direction={"row"} alignItems={"center"} gap={10}>
|
||||
<Rect
|
||||
direction={"row"}
|
||||
fontSize={this.inputFontSize}
|
||||
fontSize={0}
|
||||
ref={makeRef(this.inputs, i)}
|
||||
justifyContent={"end"}
|
||||
opacity={1}
|
||||
@ -153,7 +153,7 @@ export class FunctionBox extends Node {
|
||||
ref={this.output}
|
||||
justifyContent={"end"}
|
||||
opacity={1}
|
||||
fontSize={this.outputFontSize}
|
||||
fontSize={0}
|
||||
></Rect>
|
||||
</Rect>
|
||||
</Rect>
|
||||
@ -164,10 +164,10 @@ export class FunctionBox extends Node {
|
||||
public *resetInput(duration: number) {
|
||||
yield* all(
|
||||
...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) =>
|
||||
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(
|
||||
...this.inputSegments.map((segment) =>
|
||||
segment.points(
|
||||
[
|
||||
{ x: -this.padding, y: 0 },
|
||||
{ x: -this.delta, y: 0 },
|
||||
],
|
||||
duration,
|
||||
all(
|
||||
segment.points(
|
||||
[
|
||||
{ x: -this.padding, y: 0 },
|
||||
{ x: -this.delta, y: 0 },
|
||||
],
|
||||
duration,
|
||||
),
|
||||
segment.opacity(1, duration),
|
||||
),
|
||||
),
|
||||
...this.inputs.map((input) =>
|
||||
@ -231,6 +234,9 @@ export class FunctionBox extends Node {
|
||||
);
|
||||
yield* all(
|
||||
this.resetInput(duration),
|
||||
...this.inputs.map((input) =>
|
||||
all(input.opacity(0.2, duration), input.fontSize(0, duration)),
|
||||
),
|
||||
this.boxMoji().text(this.workingText, duration),
|
||||
);
|
||||
}
|
||||
@ -239,7 +245,6 @@ export class FunctionBox extends Node {
|
||||
yield* all(
|
||||
this.child()?.opacity(0.2, duration),
|
||||
this.output().opacity(0.2, duration),
|
||||
this.output().fontSize(this.outputFontSize, duration),
|
||||
this.outputSegment().opacity(0, duration),
|
||||
);
|
||||
|
||||
@ -276,6 +281,7 @@ export class FunctionBox extends Node {
|
||||
|
||||
yield* all(
|
||||
this.boxMoji().text(this.idlingText, duration),
|
||||
this.output().fontSize(this.outputFontSize, duration),
|
||||
this.outputSegment().points(
|
||||
[
|
||||
{ x: 0, y: 0 },
|
||||
|
@ -20,6 +20,7 @@ export default makeScene2D(function* (view) {
|
||||
gap={12}
|
||||
alignItems="start"
|
||||
y={-10}
|
||||
fontSize={40}
|
||||
>
|
||||
<Node ref={node} opacity={0}>
|
||||
<Txt fontFamily={theme.font} fill={theme.text.hex}>
|
||||
@ -32,10 +33,10 @@ export default makeScene2D(function* (view) {
|
||||
{"=>"} I {"<3"} Functional Programming λ
|
||||
</Txt>
|
||||
<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 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
|
||||
</Txt>
|
||||
</Node>
|
||||
@ -49,12 +50,12 @@ export default makeScene2D(function* (view) {
|
||||
|
||||
yield img().fill(img().getColorAtPoint(0));
|
||||
|
||||
const diff = 380;
|
||||
const diff = 320;
|
||||
yield* all(
|
||||
img().size([450, 450], 1),
|
||||
img().radius(50, 1),
|
||||
img().alpha(1, 1),
|
||||
img().position.x(-diff, 1),
|
||||
img().position.x(-1.3 * diff, 1),
|
||||
node().opacity(1, 1),
|
||||
layout().position.x(diff, 1),
|
||||
src().opacity(1, 1),
|
||||
|
Loading…
Reference in New Issue
Block a user