File size: 1,770 Bytes
f6aada0 47aab45 d86c84c b2fa231 4f51c77 7191cf4 e9c34f9 b2fa231 d86c84c 1419555 b2fa231 57155b1 d86c84c 7191cf4 ce7cdca b2fa231 47aab45 fb03e05 b2fa231 e2c597b ce7cdca 47aab45 9a5a73f b2fa231 9a5a73f 75f8f69 9a5a73f ce7cdca 47aab45 b2fa231 9a5a73f b2fa231 9a5a73f 47aab45 ce7cdca c853239 e569b05 7191cf4 |
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 |
import {AbsoluteFill} from 'remotion';
import React, {useMemo} from 'react';
import {
staticFile,
useVideoConfig,
Img,
Easing,
useCurrentFrame,
interpolate,
} from 'remotion';
import imageSequences from './Assets/ImageSequences.json';
import {TransitionSeries} from '@remotion/transitions';
const ImageStream = React.memo(() => {
const {fps} = useVideoConfig();
const imageComponents = useMemo(() => {
return imageSequences.map((entry, index) => (
<TransitionSeries.Sequence
key={index}
durationInFrames={fps * (entry.end - entry.start)}
>
<Images key={index} entry={entry} />
</TransitionSeries.Sequence>
));
}, [fps]);
return (
<AbsoluteFill
style={{
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
color: 'white',
position: 'absolute',
width: '100%',
height: '100%',
zIndex: 0,
objectFit: 'cover',
}}
>
<TransitionSeries>{imageComponents}</TransitionSeries>
</AbsoluteFill>
);
});
const Images = React.memo(({entry}) => {
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
const duration = useMemo(() => fps * 2.5, [fps]);
const ImgScale = useMemo(
() =>
interpolate(frame, [0, duration], [1, 1.2], {
easing: Easing.bezier(0.65, 0, 0.35, 1),
extrapolateRight: 'clamp',
extrapolateLeft: 'clamp',
}),
[frame, duration]
);
return (
<AbsoluteFill
style={{
backgroundColor: 'black',
}}
>
<Img
id="imagex"
style={{
transform: `translate(-50%, -50%) scale(${ImgScale})`,
position: 'absolute',
top: '50%',
left: '50%',
width: 1080,
height: 1920,
objectFit: 'cover',
}}
src={staticFile(entry.name)}
/>
</AbsoluteFill>
);
});
export default ImageStream;
|