1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
import type { ParamDefinition, ParamValues } from "@/params";
import type { EffectDefinition, MotionOffset } from "@/effects/types";
import { MOTION_EASING_OPTIONS, getMotionIntensity } from "@/effects/motion";
const ZOOM_RANGE = 0.35;
const PAN_ZOOM_HEADROOM = 0.15;
const PAN_TRAVEL = 0.06;
function motionParams(): ParamDefinition[] {
return [
{
key: "intensity",
label: "Intensity",
type: "number",
default: 100,
min: 0,
max: 100,
step: 1,
keyframable: true,
},
{
key: "easing",
label: "Easing",
type: "select",
default: "smooth",
options: MOTION_EASING_OPTIONS,
},
];
}
function zoomOffset({
effectParams,
progress,
direction,
}: {
effectParams: ParamValues;
progress: number;
direction: 1 | -1;
}): MotionOffset {
const intensity = getMotionIntensity({ effectParams });
const amount =
direction === 1 ? progress * intensity : (1 - progress) * intensity;
return {
scale: 1 + ZOOM_RANGE * amount,
translateX: 0,
translateY: 0,
};
}
function panOffset({
effectParams,
progress,
axis,
direction,
}: {
effectParams: ParamValues;
progress: number;
axis: "x" | "y";
direction: 1 | -1;
}): MotionOffset {
const intensity = getMotionIntensity({ effectParams });
const travel = (progress - 0.5) * 2 * PAN_TRAVEL * intensity * direction;
return {
scale: 1 + PAN_ZOOM_HEADROOM * intensity,
translateX: axis === "x" ? travel : 0,
translateY: axis === "y" ? travel : 0,
};
}
function buildMotionDefinition({
type,
name,
keywords,
evaluate,
}: Pick<EffectDefinition, "type" | "name" | "keywords"> & {
evaluate: NonNullable<EffectDefinition["motion"]>["evaluate"];
}): EffectDefinition {
return {
type,
name,
keywords,
params: motionParams(),
renderer: { passes: [] },
motion: { evaluate },
supportsStandalone: false,
};
}
export const motionEffectDefinitions: EffectDefinition[] = [
buildMotionDefinition({
type: "zoom-in",
name: "Zoom In",
keywords: ["zoom", "ken burns", "scale", "push in"],
evaluate: ({ effectParams, progress }) =>
zoomOffset({ effectParams, progress, direction: 1 }),
}),
buildMotionDefinition({
type: "zoom-out",
name: "Zoom Out",
keywords: ["zoom", "ken burns", "scale", "pull out"],
evaluate: ({ effectParams, progress }) =>
zoomOffset({ effectParams, progress, direction: -1 }),
}),
buildMotionDefinition({
type: "pan-left",
name: "Pan Left",
keywords: ["pan", "ken burns", "slide", "left"],
evaluate: ({ effectParams, progress }) =>
panOffset({ effectParams, progress, axis: "x", direction: -1 }),
}),
buildMotionDefinition({
type: "pan-right",
name: "Pan Right",
keywords: ["pan", "ken burns", "slide", "right"],
evaluate: ({ effectParams, progress }) =>
panOffset({ effectParams, progress, axis: "x", direction: 1 }),
}),
buildMotionDefinition({
type: "pan-up",
name: "Pan Up",
keywords: ["pan", "ken burns", "slide", "up", "tilt"],
evaluate: ({ effectParams, progress }) =>
panOffset({ effectParams, progress, axis: "y", direction: -1 }),
}),
buildMotionDefinition({
type: "pan-down",
name: "Pan Down",
keywords: ["pan", "ken burns", "slide", "down", "tilt"],
evaluate: ({ effectParams, progress }) =>
panOffset({ effectParams, progress, axis: "y", direction: 1 }),
}),
];
|
