motion blur
Browse files
Remotion-app/src/HelloWorld/ImageStream.jsx
CHANGED
@@ -32,21 +32,18 @@ export default function ImageStream() {
|
|
32 |
return (
|
33 |
<>
|
34 |
<TransitionSeries.Sequence
|
35 |
-
key={
|
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:
|
45 |
-
|
46 |
})}
|
47 |
-
|
48 |
-
jelllo
|
49 |
-
</TransitionSeries.Transition>
|
50 |
</>
|
51 |
);
|
52 |
})}
|
@@ -79,23 +76,36 @@ const Images = ({entry}) => {
|
|
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], {
|
86 |
-
// easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
|
87 |
-
extrapolateLeft: 'clamp',
|
88 |
-
extrapolateRight: 'clamp',
|
89 |
});
|
90 |
|
91 |
-
const
|
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,
|
@@ -108,30 +118,18 @@ const Images = ({entry}) => {
|
|
108 |
|
109 |
<Img
|
110 |
style={{
|
111 |
-
transform: `scale(${zoom})
|
112 |
-
|
|
|
|
|
|
|
|
|
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 |
};
|
|
|
32 |
return (
|
33 |
<>
|
34 |
<TransitionSeries.Sequence
|
35 |
+
key={entry.start}
|
|
|
36 |
durationInFrames={fps * (entry.end - entry.start)}
|
37 |
>
|
38 |
+
<Images key={index} entry={entry} />;
|
39 |
</TransitionSeries.Sequence>
|
40 |
<TransitionSeries.Transition
|
41 |
presentation={slide('from-left')}
|
42 |
timing={linearTiming({
|
43 |
+
durationInFrames: 2,
|
44 |
+
easing: Easing.bezier(0.02, 1.85, 0.83, 0.43),
|
45 |
})}
|
46 |
+
/>
|
|
|
|
|
47 |
</>
|
48 |
);
|
49 |
})}
|
|
|
76 |
delay: 0,
|
77 |
from: 0,
|
78 |
to: 1,
|
79 |
+
durationInFrames: durationInFrames,
|
|
|
|
|
|
|
|
|
|
|
|
|
80 |
});
|
81 |
|
82 |
+
const zoom = interpolate(spr, [0, 0.5, 1], [1, 1.2, 1.1], {
|
83 |
easing: Easing.bezier(0.23, 1, 0.32, 1),
|
84 |
+
// extrapolateLeft: 'clamp',
|
85 |
+
// extrapolateRight: 'clamp',
|
86 |
});
|
87 |
|
88 |
+
const blur = interpolate(
|
89 |
+
initialSpring,
|
90 |
+
[0.0, 0.09, 0.99, 1],
|
91 |
+
[20, 0, 0, 10],
|
92 |
+
{
|
93 |
+
easing: Easing.bezier(0.23, 1, 0.32, 1),
|
94 |
+
extrapolateLeft: 'identity',
|
95 |
+
extrapolateRight: 'identity',
|
96 |
+
}
|
97 |
+
);
|
98 |
+
|
99 |
return (
|
100 |
<>
|
101 |
+
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" className="filters">
|
102 |
+
<defs>
|
103 |
+
<filter id="blur">
|
104 |
+
<feGaussianBlur in="SourceGraphic" stdDeviation={`${blur * 5},0`} />
|
105 |
+
</filter>
|
106 |
+
</defs>
|
107 |
+
</svg>
|
108 |
+
|
109 |
<div
|
110 |
style={{
|
111 |
fontSize: 150,
|
|
|
118 |
|
119 |
<Img
|
120 |
style={{
|
121 |
+
transform: `scale(${zoom}) ${
|
122 |
+
initialSpring > 0.99
|
123 |
+
? `translateX(${blur * 5}px)`
|
124 |
+
: `translateX(-${blur * 5}px)`
|
125 |
+
}`,
|
126 |
+
filter: `url(#blur)`,
|
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 |
};
|