273 lines
10 KiB
TypeScript
273 lines
10 KiB
TypeScript
import { makeScene2D } from '@motion-canvas/2d/lib/scenes';
|
|
import { Rect, Layout, Circle, Txt } from '@motion-canvas/2d/lib/components';
|
|
import {
|
|
CodeBlock,
|
|
edit,
|
|
lines,
|
|
} from '@motion-canvas/2d/lib/components/CodeBlock';
|
|
import { createRef } from '@motion-canvas/core/lib/utils';
|
|
import { all, delay, waitUntil } from '@motion-canvas/core/lib/flow';
|
|
|
|
import {
|
|
BG,
|
|
BOLD,
|
|
BOXLEFT,
|
|
BOXRIGHT,
|
|
HIGHLIGHT,
|
|
TEXTBOX,
|
|
} from '../utils/constants';
|
|
import {
|
|
IMAGE_EVENT,
|
|
CODESIZE_DEFAULT as CODESIZE_IMAGE_EVENT,
|
|
} from './imageEvent';
|
|
import { easeOutCubic } from '@motion-canvas/core/lib/tweening';
|
|
|
|
const CODESIZE_DEFAULT = 48;
|
|
|
|
const TEXT_EVENT = `{
|
|
"content": {
|
|
"body": "Hello Matrix!",
|
|
"msgtype": "m.text"
|
|
},
|
|
"origin_server_ts": 1679081573367,
|
|
"sender": "@example:matrix.org",
|
|
"type": "m.room.message",
|
|
"event_id": "$abc",
|
|
"room_id": "!def:matrix.org"
|
|
}`;
|
|
|
|
export default makeScene2D(function* (view) {
|
|
const colLeft = createRef<Layout>();
|
|
const colRight = createRef<Layout>();
|
|
const colRightBG = createRef<Rect>();
|
|
const codeTextContainer = createRef<CodeBlock>();
|
|
const leftContainer = createRef<Rect>();
|
|
const textEvent = createRef<Rect>();
|
|
const eventContent = createRef<Rect>();
|
|
const eventContentText = createRef<Txt>();
|
|
const eventTimestamp = createRef<Rect>();
|
|
const eventTimestampText = createRef<Txt>();
|
|
const eventUsername = createRef<Rect>();
|
|
const eventAvatar = createRef<Circle>();
|
|
const eventUsernameText = createRef<Txt>();
|
|
|
|
view.add(
|
|
<>
|
|
<Layout layout padding={10} width={'100%'} height={'100%'}>
|
|
<Layout ref={colLeft} basis={0} width={0}>
|
|
<Rect
|
|
ref={leftContainer}
|
|
fill={BOXLEFT}
|
|
radius={2}
|
|
grow={1}
|
|
direction={'column'}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
gap={25}
|
|
padding={128}
|
|
>
|
|
<Rect
|
|
basis={0}
|
|
ref={textEvent}
|
|
fill={TEXTBOX}
|
|
radius={4}
|
|
lineWidth={2}
|
|
stroke={'#fff'}
|
|
direction={'row'}
|
|
gap={48}
|
|
padding={24}
|
|
opacity={0}
|
|
width="100%"
|
|
>
|
|
<Layout
|
|
direction={'column'}
|
|
gap={12}
|
|
alignItems="center"
|
|
>
|
|
<Circle
|
|
ref={eventAvatar}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
fill={TEXTBOX}
|
|
>
|
|
<Circle size={80} fill={'#FD8A8A'} />
|
|
</Circle>
|
|
<Rect
|
|
ref={eventTimestamp}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
fill={TEXTBOX}
|
|
lineWidth={0}
|
|
lineDash={[0, 0]}
|
|
>
|
|
<Txt
|
|
ref={eventTimestampText}
|
|
fill={'#b9bec6'}
|
|
fontFamily="Inter"
|
|
fontSize={18}
|
|
text={'00:14'}
|
|
/>
|
|
</Rect>
|
|
</Layout>
|
|
<Layout
|
|
direction={'column'}
|
|
gap={12}
|
|
alignItems={'start'}
|
|
>
|
|
<Rect
|
|
ref={eventUsername}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
fill={TEXTBOX}
|
|
>
|
|
<Txt
|
|
ref={eventUsernameText}
|
|
fill={'#7286D3'}
|
|
fontFamily="Inter"
|
|
fontSize={32}
|
|
fontWeight={BOLD}
|
|
text={'Username'}
|
|
/>
|
|
</Rect>
|
|
|
|
<Rect
|
|
ref={eventContent}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
fill={TEXTBOX}
|
|
lineWidth={0}
|
|
lineDash={[0, 0]}
|
|
>
|
|
<Txt
|
|
ref={eventContentText}
|
|
fill={'#fff'}
|
|
fontFamily="Inter"
|
|
fontSize={24}
|
|
text={'Hello Matrix!'}
|
|
/>
|
|
</Rect>
|
|
</Layout>
|
|
</Rect>
|
|
</Rect>
|
|
</Layout>
|
|
<Rect ref={colRight} grow={1} fill={BG}>
|
|
<Rect
|
|
ref={colRightBG}
|
|
fill={BOXRIGHT}
|
|
grow={1}
|
|
radius={4}
|
|
direction={'column'}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<Rect
|
|
fill={TEXTBOX}
|
|
radius={4}
|
|
stroke={'#fff'}
|
|
lineWidth={4}
|
|
padding={32}
|
|
width={'75%'}
|
|
>
|
|
<CodeBlock
|
|
ref={codeTextContainer}
|
|
fontSize={CODESIZE_DEFAULT}
|
|
language="json"
|
|
code={TEXT_EVENT}
|
|
/>
|
|
,
|
|
</Rect>
|
|
</Rect>
|
|
</Rect>
|
|
</Layout>
|
|
</>
|
|
);
|
|
|
|
yield* waitUntil('Show Text Event');
|
|
|
|
let animation_length = easeOutCubic(0.8);
|
|
colLeft().save();
|
|
colRight().save();
|
|
textEvent().save();
|
|
yield* all(
|
|
colLeft().grow(4, animation_length),
|
|
colRight().grow(1, animation_length),
|
|
codeTextContainer().fontSize(23, animation_length),
|
|
colRightBG().margin.left(10, 0.1),
|
|
delay(0.25, all(textEvent().opacity(1, 0.3)))
|
|
);
|
|
yield* waitUntil('Show Content');
|
|
|
|
animation_length = easeOutCubic(1.5);
|
|
const radius = 5;
|
|
const padding = 8;
|
|
const fontSizeHighlighted = 32;
|
|
const dashes = [15, 15];
|
|
const dashSize = 4;
|
|
|
|
eventContent().save();
|
|
eventContentText().save();
|
|
yield* all(
|
|
codeTextContainer().selection(lines(1, 4), animation_length),
|
|
|
|
eventContentText().fontSize(fontSizeHighlighted, animation_length),
|
|
eventContent().stroke(HIGHLIGHT, animation_length),
|
|
eventContent().lineDash(dashes, animation_length),
|
|
eventContent().padding(padding, animation_length),
|
|
eventContent().radius(radius, animation_length),
|
|
eventContent().lineWidth(dashSize, animation_length)
|
|
);
|
|
|
|
yield* waitUntil('Show Timestamp');
|
|
eventTimestamp().save();
|
|
eventTimestampText().save();
|
|
yield* all(
|
|
codeTextContainer().selection(lines(5), animation_length),
|
|
|
|
eventContentText().restore(animation_length),
|
|
eventContent().restore(animation_length),
|
|
|
|
eventTimestampText().fontSize(fontSizeHighlighted, animation_length),
|
|
eventTimestampText().fill('#fff', animation_length),
|
|
eventTimestamp().stroke(HIGHLIGHT, animation_length),
|
|
eventTimestamp().lineDash(dashes, animation_length),
|
|
eventTimestamp().padding(padding, animation_length),
|
|
eventTimestamp().radius(radius, animation_length),
|
|
eventTimestamp().lineWidth(dashSize, animation_length)
|
|
);
|
|
|
|
yield* waitUntil('Show sender');
|
|
yield* all(
|
|
codeTextContainer().selection(lines(6), animation_length),
|
|
|
|
eventTimestampText().restore(animation_length),
|
|
eventTimestamp().restore(animation_length),
|
|
|
|
eventUsernameText().fontSize(fontSizeHighlighted, animation_length),
|
|
eventUsername().stroke(HIGHLIGHT, animation_length),
|
|
eventUsername().lineDash(dashes, animation_length),
|
|
eventUsername().padding(padding, animation_length),
|
|
eventUsername().radius(radius, animation_length),
|
|
eventUsername().lineWidth(dashSize, animation_length),
|
|
|
|
eventAvatar().stroke(HIGHLIGHT, animation_length),
|
|
eventAvatar().lineDash(dashes, animation_length),
|
|
eventAvatar().padding(padding, animation_length),
|
|
eventAvatar().lineWidth(dashSize, animation_length)
|
|
);
|
|
|
|
yield* waitUntil('Back to Overview');
|
|
|
|
animation_length = 0.8;
|
|
yield* all(
|
|
colLeft().restore(animation_length),
|
|
colRight().restore(animation_length),
|
|
codeTextContainer().fontSize(CODESIZE_IMAGE_EVENT, animation_length),
|
|
textEvent().restore(animation_length),
|
|
codeTextContainer().selection(lines(0, 10), animation_length),
|
|
delay(animation_length - 0.1, colRightBG().margin.left(0, 0.1))
|
|
);
|
|
|
|
yield* waitUntil('Next Slide');
|
|
yield* codeTextContainer().edit(1.2)`${edit(TEXT_EVENT, IMAGE_EVENT)}`;
|
|
});
|