45 lines
1.3 KiB
JavaScript
45 lines
1.3 KiB
JavaScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import anime from 'animejs';
|
|
|
|
const startNumber = 1000;
|
|
const endNumber = 1239;
|
|
const imageCount = endNumber - startNumber + 1;
|
|
const images = [];
|
|
|
|
for (let i = startNumber; i <= endNumber; i++) {
|
|
const formattedNumber = String(i).padStart(5, '0');
|
|
images.push(import(`../../assets/characters/F_porche_akimbo_AME/Porsche${formattedNumber}.png`));
|
|
}
|
|
|
|
const CharacterAnimation = () => {
|
|
const totalFrames = imageCount;
|
|
const frameDuration = 20;
|
|
const [currentFrame, setCurrentFrame] = useState(0);
|
|
const [loadedImages, setLoadedImages] = useState([]);
|
|
const characterRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
Promise.all(images).then((resolvedImages) => {
|
|
setLoadedImages(resolvedImages.map(image => image.default));
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setCurrentFrame((prevFrame) => (prevFrame + 1) % totalFrames);
|
|
}, frameDuration);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<img
|
|
ref={characterRef}
|
|
src={loadedImages[currentFrame]}
|
|
alt="Character Animation"
|
|
style={{ width: '200px', height: 'auto' }}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default CharacterAnimation;
|