File size: 1,383 Bytes
adc8df4 d86c84c 520b716 d86c84c 520b716 a78d9ef d86c84c d2a124e 14a8e84 d86c84c 297f51d d86c84c 6167061 297f51d 6167061 d86c84c d2a124e adc8df4 52fe1f9 d2a124e 52fe1f9 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 {width, height, fps, durationInFrames} = 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>
);
}
|