407 lines
9.4 KiB
TypeScript
407 lines
9.4 KiB
TypeScript
import { AnimatedEntity } from "primitives/AnimatedEntities";
|
|
import { Color } from "primitives/Paint";
|
|
import { Timeline } from "primitives/Timeline";
|
|
import {
|
|
staticAnimatedNumber,
|
|
staticAnimatedVec2,
|
|
staticAnimatedVec3,
|
|
} from "primitives/Values";
|
|
import { z } from "zod";
|
|
import { v4 as uuid } from "uuid";
|
|
|
|
function buildRect1(
|
|
offset: number,
|
|
color: z.infer<typeof Color>
|
|
): z.input<typeof AnimatedEntity> {
|
|
return {
|
|
id: uuid(),
|
|
cache: {},
|
|
type: "Rect",
|
|
paint: {
|
|
style: {
|
|
type: "Stroke",
|
|
width: 50,
|
|
color,
|
|
},
|
|
},
|
|
size: {
|
|
type: "Vec2",
|
|
keyframes: [
|
|
{
|
|
type: "Number",
|
|
keyframes: {
|
|
values: [
|
|
{
|
|
id: uuid(),
|
|
interpolation: {
|
|
type: "EasingFunction",
|
|
easing_function: "CircOut",
|
|
},
|
|
value: 0.0,
|
|
offset: 0.0,
|
|
},
|
|
{
|
|
id: uuid(),
|
|
interpolation: {
|
|
type: "Linear",
|
|
},
|
|
value: 1280.0,
|
|
offset: 4.0,
|
|
},
|
|
],
|
|
},
|
|
},
|
|
staticAnimatedNumber(720),
|
|
],
|
|
},
|
|
origin: staticAnimatedVec2(1280 / 2, 720 / 2),
|
|
position: staticAnimatedVec2(0, 0),
|
|
animation_data: {
|
|
offset,
|
|
duration: 10.0,
|
|
},
|
|
};
|
|
}
|
|
|
|
function buildRect(
|
|
offset: number,
|
|
color: z.infer<typeof Color>
|
|
): z.input<typeof AnimatedEntity> {
|
|
return {
|
|
type: "Rect",
|
|
id: uuid(),
|
|
cache: {},
|
|
paint: {
|
|
style: {
|
|
type: "Fill",
|
|
color,
|
|
},
|
|
},
|
|
size: staticAnimatedVec2(1280, 720),
|
|
origin: staticAnimatedVec2(0, -720),
|
|
position: staticAnimatedVec2(1280 / 2, 720 / 2),
|
|
transform: {
|
|
type: "Transform",
|
|
translate: staticAnimatedVec2(0, 0),
|
|
rotate: staticAnimatedVec3(0, 0, 0),
|
|
skew: staticAnimatedVec2(0, 0),
|
|
scale: {
|
|
type: "Vec2",
|
|
keyframes: [
|
|
{
|
|
type: "Number",
|
|
keyframes: {
|
|
values: [
|
|
{
|
|
id: uuid(),
|
|
|
|
interpolation: {
|
|
type: "Linear",
|
|
},
|
|
value: 1.0,
|
|
offset: 0.0,
|
|
},
|
|
],
|
|
},
|
|
},
|
|
{
|
|
type: "Number",
|
|
keyframes: {
|
|
values: [
|
|
{
|
|
id: uuid(),
|
|
|
|
interpolation: {
|
|
type: "EasingFunction",
|
|
easing_function: "CircOut",
|
|
},
|
|
value: 0.0,
|
|
offset: 0.0,
|
|
},
|
|
{
|
|
id: uuid(),
|
|
|
|
interpolation: {
|
|
type: "Linear",
|
|
},
|
|
value: 1.0,
|
|
offset: 4.0,
|
|
},
|
|
],
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
animation_data: {
|
|
offset,
|
|
duration: 10.0,
|
|
},
|
|
};
|
|
}
|
|
|
|
function buildText(
|
|
text: string,
|
|
offset: number,
|
|
size: number,
|
|
y_offset: number,
|
|
color: z.infer<typeof Color>
|
|
): z.input<typeof AnimatedEntity> {
|
|
return {
|
|
type: "Text",
|
|
id: uuid(),
|
|
cache: {},
|
|
paint: {
|
|
style: {
|
|
type: "Fill",
|
|
color,
|
|
},
|
|
font_name: "Gilroy-Regular",
|
|
size,
|
|
align: "Center",
|
|
},
|
|
text,
|
|
animation_data: {
|
|
offset,
|
|
duration: 5.0,
|
|
},
|
|
origin: {
|
|
type: "Vec2",
|
|
keyframes: [
|
|
{
|
|
type: "Number",
|
|
keyframes: {
|
|
values: [
|
|
{
|
|
id: uuid(),
|
|
|
|
interpolation: {
|
|
type: "EasingFunction",
|
|
easing_function: "CircOut",
|
|
},
|
|
value: (1280 / 2) * -1 - 300,
|
|
offset: 0.0,
|
|
},
|
|
{
|
|
id: uuid(),
|
|
|
|
interpolation: {
|
|
type: "EasingFunction",
|
|
easing_function: "QuartOut",
|
|
},
|
|
value: 1280 / 2,
|
|
offset: 5.0,
|
|
},
|
|
],
|
|
},
|
|
},
|
|
staticAnimatedNumber(720 / 2 + y_offset),
|
|
],
|
|
},
|
|
};
|
|
}
|
|
|
|
function buildStaggeredText(
|
|
text: string,
|
|
offset: number,
|
|
color: z.input<typeof Color>
|
|
): z.input<typeof AnimatedEntity> {
|
|
return {
|
|
type: "StaggeredText",
|
|
text,
|
|
cache: { valid: false },
|
|
id: uuid(),
|
|
origin: staticAnimatedVec2(1280 / 2, 720 / 2),
|
|
transform: {
|
|
type: "Transform",
|
|
translate: staticAnimatedVec2(0, 0),
|
|
rotate: staticAnimatedVec3(0, 0, 0),
|
|
skew: staticAnimatedVec2(0, 0),
|
|
scale: staticAnimatedVec2(1, 1),
|
|
},
|
|
animation_data: {
|
|
offset,
|
|
duration: 5.0,
|
|
},
|
|
stagger: 0.1,
|
|
letter: {
|
|
paint: {
|
|
font_name: "Gilroy-Regular",
|
|
style: {
|
|
type: "Fill",
|
|
color,
|
|
},
|
|
size: 90,
|
|
align: "Center",
|
|
},
|
|
transform: {
|
|
type: "Transform",
|
|
translate: {
|
|
type: "Vec2",
|
|
keyframes: [
|
|
staticAnimatedNumber(0),
|
|
{
|
|
type: "Number",
|
|
keyframes: {
|
|
values: [
|
|
{
|
|
id: uuid(),
|
|
interpolation: {
|
|
type: "Spring",
|
|
damping: 15,
|
|
stiffness: 350,
|
|
mass: 1,
|
|
},
|
|
value: 200.0,
|
|
offset: 0.0,
|
|
},
|
|
{
|
|
id: uuid(),
|
|
|
|
interpolation: {
|
|
type: "Linear",
|
|
},
|
|
value: 0.0,
|
|
offset: 4.0,
|
|
},
|
|
],
|
|
},
|
|
},
|
|
],
|
|
},
|
|
rotate: {
|
|
type: "Vec3",
|
|
keyframes: [
|
|
staticAnimatedNumber(0),
|
|
staticAnimatedNumber(0),
|
|
{
|
|
type: "Number",
|
|
keyframes: {
|
|
values: [
|
|
{
|
|
id: uuid(),
|
|
|
|
interpolation: {
|
|
type: "Spring",
|
|
damping: 15,
|
|
stiffness: 150,
|
|
mass: 1,
|
|
},
|
|
value: -180.0,
|
|
offset: 0.0,
|
|
},
|
|
{
|
|
id: uuid(),
|
|
|
|
interpolation: {
|
|
type: "Linear",
|
|
},
|
|
value: 0.0,
|
|
offset: 4.0,
|
|
},
|
|
],
|
|
},
|
|
},
|
|
],
|
|
},
|
|
skew: staticAnimatedVec2(0, 0),
|
|
scale: {
|
|
type: "Vec2",
|
|
keyframes: [
|
|
{
|
|
type: "Number",
|
|
keyframes: {
|
|
values: [
|
|
{
|
|
id: uuid(),
|
|
|
|
interpolation: {
|
|
type: "EasingFunction",
|
|
easing_function: "CircOut",
|
|
},
|
|
value: 0.0,
|
|
offset: 0.0,
|
|
},
|
|
{
|
|
id: uuid(),
|
|
|
|
interpolation: {
|
|
type: "Linear",
|
|
},
|
|
value: 1.0,
|
|
offset: 2.0,
|
|
},
|
|
],
|
|
},
|
|
},
|
|
{
|
|
type: "Number",
|
|
keyframes: {
|
|
values: [
|
|
{
|
|
id: uuid(),
|
|
|
|
interpolation: {
|
|
type: "EasingFunction",
|
|
easing_function: "CircOut",
|
|
},
|
|
value: 0.0,
|
|
offset: 0.0,
|
|
},
|
|
{
|
|
id: uuid(),
|
|
|
|
interpolation: {
|
|
type: "Linear",
|
|
},
|
|
value: 1.0,
|
|
offset: 2.0,
|
|
},
|
|
],
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
export const EXAMPLE_ANIMATED_ENTITIES: Array<z.input<typeof AnimatedEntity>> =
|
|
[
|
|
buildStaggeredText("Work in Progress...", 2.0, {
|
|
value: [255, 255, 255, 1.0],
|
|
}),
|
|
// buildText("Wie gehts?", 2.5, 40, 40, { value: [200, 200, 200, 1.0] }),
|
|
buildRect(0.6, { value: [30, 30, 30, 1.0] }),
|
|
buildRect(0.4, { value: [20, 20, 20, 1.0] }),
|
|
buildRect(0.2, { value: [10, 10, 10, 1.0] }),
|
|
buildRect(0, { value: [0, 0, 0, 1.0] }),
|
|
];
|
|
|
|
export const EXAMPLE_ANIMATED_ENTITIES_2: Array<
|
|
z.input<typeof AnimatedEntity>
|
|
> = [
|
|
buildText("Kleine Dumpfkopf!", 1.0, 80, -30, {
|
|
value: [255, 255, 255, 1.0],
|
|
}),
|
|
// buildText("Wie gehts?", 1.5, 40, 30, { value: [255, 255, 255, 1.0] }),
|
|
buildRect(0.8, { value: [40, 40, 40, 1.0] }),
|
|
buildRect(0.6, { value: [30, 30, 30, 1.0] }),
|
|
buildRect(0.4, { value: [20, 20, 20, 1.0] }),
|
|
buildRect(0.2, { value: [10, 10, 10, 1.0] }),
|
|
buildRect(0, { value: [0, 0, 0, 1.0] }),
|
|
];
|
|
|
|
const ExampleTimeline: z.input<typeof Timeline> = {
|
|
size: [1920, 1080],
|
|
duration: 10.0,
|
|
render_state: {
|
|
curr_frame: 20,
|
|
},
|
|
fps: 120,
|
|
entities: EXAMPLE_ANIMATED_ENTITIES,
|
|
};
|
|
|
|
export { ExampleTimeline };
|