File size: 1,345 Bytes
adc8df4 d86c84c 520b716 d86c84c 520b716 a78d9ef d86c84c 14a8e84 d86c84c 297f51d d86c84c 6167061 297f51d 6167061 d86c84c 14a8e84 adc8df4 03870cd 14a8e84 d86c84c 308f422 87ec163 308f422 14a8e84 308f422 d86c84c |
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 |
import {Series, interpolate, spring, useCurrentFrame} from 'remotion';
import React from 'react';
import {staticFile, useVideoConfig, Img} from 'remotion';
import {slide} from '@remotion/transitions/slide';
import imageSequences from './Assets/ImageSequences.json';
import {TransitionSeries, linearTiming} from '@remotion/transitions';
export default function ImageStream() {
const {fps} = useVideoConfig();
const frame = useCurrentFrame();
return (
<TransitionSeries
style={{
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
color: 'white',
position: 'absolute',
width: '100%',
height: '100%',
zIndex: 0,
objectFit: 'cover',
}}
>
{imageSequences.map((entry, index) => {
const durationInFrames = (entry.end - entry.start) * fps;
const zoom = interpolate(
frame,
[0, 2 * (durationInFrames / 4), durationInFrames],
[1, 1.2, 1],
{extrapolateRight: 'clamp'}
);
return (
<TransitionSeries.Sequence
key={index}
from={fps * entry.start}
durationInFrames={fps * (entry.end - entry.start)}
>
<Img
style={{
transform: `scale(${zoom})`,
transition: 'all 1s ease',
}}
src={staticFile(entry.name)}
/>
</TransitionSeries.Sequence>
);
})}
</TransitionSeries>
);
}
|