49 lines
1.7 KiB
JavaScript
49 lines
1.7 KiB
JavaScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import anime from 'animejs';
|
|
|
|
const startNumber = 1000; // Starting number
|
|
const endNumber = 1239; // Ending number
|
|
const imageCount = endNumber - startNumber + 1; // Total number of images
|
|
const images = [];
|
|
|
|
// Loop through the range from startNumber to endNumber
|
|
for (let i = startNumber; i <= endNumber; i++) {
|
|
// Format the number to be 5 digits with leading zeros
|
|
const formattedNumber = String(i).padStart(5, '0');
|
|
images.push(import(`../../assets/characters/F_porche_akimbo_AME/Porsche${formattedNumber}.png`));
|
|
}
|
|
|
|
const CharacterAnimation = () => {
|
|
const totalFrames = imageCount; // Total number of frames
|
|
const frameDuration = 20; // Duration for each frame in milliseconds
|
|
const [currentFrame, setCurrentFrame] = useState(0);
|
|
const [loadedImages, setLoadedImages] = useState([]); // State to hold loaded images
|
|
const characterRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
// Load all images
|
|
Promise.all(images).then((resolvedImages) => {
|
|
setLoadedImages(resolvedImages.map(image => image.default)); // Set the loaded images
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setCurrentFrame((prevFrame) => (prevFrame + 1) % totalFrames);
|
|
console.log(loadedImages)
|
|
}, frameDuration);
|
|
|
|
return () => clearInterval(interval); // Cleanup on unmount
|
|
}, []);
|
|
|
|
return (
|
|
<img
|
|
ref={characterRef}
|
|
src={loadedImages[currentFrame]} // Use the loaded images
|
|
alt="Character Animation"
|
|
style={{ width: '200px', height: 'auto' }} // Adjust size as needed
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default CharacterAnimation;
|