working on blur
Browse files
Remotion-app/src/HelloWorld/ImageStream.jsx
CHANGED
@@ -36,13 +36,13 @@ export default function ImageStream() {
|
|
36 |
// from={fps * entry.start}
|
37 |
durationInFrames={fps * (entry.end - entry.start)}
|
38 |
>
|
39 |
-
<Images
|
40 |
</TransitionSeries.Sequence>
|
41 |
<TransitionSeries.Transition
|
42 |
presentation={slide('from-left')}
|
43 |
timing={linearTiming({
|
44 |
durationInFrames: 1,
|
45 |
-
easing: Easing.bezier(0.02, 1.85, 0.83, 0.43),
|
46 |
})}
|
47 |
>
|
48 |
jelllo
|
@@ -55,7 +55,7 @@ export default function ImageStream() {
|
|
55 |
);
|
56 |
}
|
57 |
|
58 |
-
const Images = ({entry
|
59 |
const {fps} = useVideoConfig();
|
60 |
const frame = useCurrentFrame();
|
61 |
const durationInFrames = (entry.end - entry.start) * fps;
|
@@ -79,7 +79,7 @@ const Images = ({entry, key}) => {
|
|
79 |
delay: 0,
|
80 |
from: 0,
|
81 |
to: 1,
|
82 |
-
durationInFrames:
|
83 |
});
|
84 |
|
85 |
const zoom = interpolate(spr, [0, 0.5, 1], [1, 1.5, 1.3], {
|
@@ -89,22 +89,49 @@ const Images = ({entry, key}) => {
|
|
89 |
});
|
90 |
|
91 |
const blur = interpolate(initialSpring, [0, 1], [30, 0], {
|
92 |
-
|
93 |
extrapolateLeft: 'clamp',
|
94 |
extrapolateRight: 'clamp',
|
95 |
});
|
96 |
|
97 |
return (
|
98 |
<>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
99 |
<Img
|
100 |
style={{
|
101 |
-
transform: `scale(${zoom})`,
|
102 |
filter: `blur(${blur}px)`,
|
103 |
-
|
|
|
104 |
// transition: 'all 5s ease',
|
105 |
}}
|
106 |
src={staticFile(entry.name)}
|
107 |
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
108 |
</>
|
109 |
);
|
110 |
};
|
|
|
36 |
// from={fps * entry.start}
|
37 |
durationInFrames={fps * (entry.end - entry.start)}
|
38 |
>
|
39 |
+
<Images entry={entry} />;
|
40 |
</TransitionSeries.Sequence>
|
41 |
<TransitionSeries.Transition
|
42 |
presentation={slide('from-left')}
|
43 |
timing={linearTiming({
|
44 |
durationInFrames: 1,
|
45 |
+
// easing: Easing.bezier(0.02, 1.85, 0.83, 0.43),
|
46 |
})}
|
47 |
>
|
48 |
jelllo
|
|
|
55 |
);
|
56 |
}
|
57 |
|
58 |
+
const Images = ({entry}) => {
|
59 |
const {fps} = useVideoConfig();
|
60 |
const frame = useCurrentFrame();
|
61 |
const durationInFrames = (entry.end - entry.start) * fps;
|
|
|
79 |
delay: 0,
|
80 |
from: 0,
|
81 |
to: 1,
|
82 |
+
durationInFrames: 0.5 * fps,
|
83 |
});
|
84 |
|
85 |
const zoom = interpolate(spr, [0, 0.5, 1], [1, 1.5, 1.3], {
|
|
|
89 |
});
|
90 |
|
91 |
const blur = interpolate(initialSpring, [0, 1], [30, 0], {
|
92 |
+
easing: Easing.bezier(0.23, 1, 0.32, 1),
|
93 |
extrapolateLeft: 'clamp',
|
94 |
extrapolateRight: 'clamp',
|
95 |
});
|
96 |
|
97 |
return (
|
98 |
<>
|
99 |
+
<div
|
100 |
+
style={{
|
101 |
+
fontSize: 150,
|
102 |
+
position: 'absolute',
|
103 |
+
zIndex: 1,
|
104 |
+
}}
|
105 |
+
>
|
106 |
+
{blur}
|
107 |
+
</div>
|
108 |
+
|
109 |
<Img
|
110 |
style={{
|
111 |
+
transform: `scale(${zoom}) translateX(-${blur * 5}px)`,
|
112 |
filter: `blur(${blur}px)`,
|
113 |
+
// opacity: 0.1
|
114 |
+
// transform: `translateX(-${blur * 5}px)`,
|
115 |
// transition: 'all 5s ease',
|
116 |
}}
|
117 |
src={staticFile(entry.name)}
|
118 |
/>
|
119 |
+
|
120 |
+
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => {
|
121 |
+
return (
|
122 |
+
<Img
|
123 |
+
key={i}
|
124 |
+
style={{
|
125 |
+
transform: `scale(${zoom}) translateX(-${blur * i * 5}px)`,
|
126 |
+
filter: `blur(${(blur / i) * 2}px)`,
|
127 |
+
opacity: 0.1,
|
128 |
+
// transform: `translateX(-${blur * 5}px)`,
|
129 |
+
// transition: 'all 5s ease',
|
130 |
+
}}
|
131 |
+
src={staticFile(entry.name)}
|
132 |
+
/>
|
133 |
+
);
|
134 |
+
})}
|
135 |
</>
|
136 |
);
|
137 |
};
|