File size: 1,953 Bytes
57155b1 d86c84c 7380380 d86c84c 520b716 1419555 d86c84c 2d9a860 14a8e84 d86c84c 1419555 57155b1 1419555 ce7cdca 1419555 57155b1 1419555 57155b1 d86c84c ce7cdca |
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 87 88 89 90 |
import {
AbsoluteFill,
Series,
interpolate,
spring,
useCurrentFrame,
} from 'remotion';
import React from 'react';
import {staticFile, useVideoConfig, Img, Easing} from 'remotion';
import imageSequences from './Assets/ImageSequences.json';
import {TransitionSeries, linearTiming} from '@remotion/transitions';
import {slide} from '@remotion/transitions/slide';
export default function ImageStream() {
const {fps} = useVideoConfig();
return (
<AbsoluteFill
style={{
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
color: 'white',
position: 'absolute',
width: '100%',
height: '100%',
zIndex: 0,
objectFit: 'cover',
}}
>
<TransitionSeries>
{imageSequences.map((entry, index) => {
return (
<>
<TransitionSeries.Sequence
key={index}
// from={fps * entry.start}
durationInFrames={fps * (entry.end - entry.start)}
>
<Images key={index} entry={entry} />;
</TransitionSeries.Sequence>
<TransitionSeries.Transition
presentation={slide('from-left')}
timing={linearTiming({
durationInFrames: 1,
easing: Easing.bezier(0.02, 1.85, 0.83, 0.43),
})}
/>
</>
);
})}
</TransitionSeries>
</AbsoluteFill>
);
}
const Images = ({entry, key}) => {
const {fps} = useVideoConfig();
const frame = useCurrentFrame();
const durationInFrames = (entry.end - entry.start) * fps;
const spr = spring({
fps,
frame,
config: {
damping: 100,
},
delay: 0,
from: 0,
to: 1,
durationInFrames: durationInFrames,
});
const zoom = interpolate(spr, [0, 0.5, 1], [1, 1.5, 1.3], {
// easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
return (
<>
<Img
style={{
transform: `scale(${zoom})`,
// transition: 'all 5s ease',
}}
src={staticFile(entry.name)}
/>
</>
);
};
|