I am trying to apply animation to all of the images created in a for loop, but none of the images created in the for loop are showing any animation, I have tried in multiple ways such as using forEach and a regular for loop. Essentially, what I want is to make it so the 10 images created prior in a for loop can have the same animation as the first image that is being animated across the screen and work like the first image. Please help, full code is linked here:
https://code.sololearn.com/Wwdw59oenFqB
const fps = 10;
const cats = [];
for (i = 0; i < 10; i ) {
var img = document.createElement("img");
img.setAttribute("src", "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIQAWQMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAGAAIDBAUBB//EADsQAAIBAwMCAwYFAgMJAQAAAAECAwAEEQUSITFBBhNRIlJhcYGRFDJCofDB0SMzsRUkJVNiY5Ki4Qf/xAAYAQADAQEAAAAAAAAAAAAAAAABAgMABP/EAB8RAAMBAAMBAQEBAQAAAAAAAAABAhEDEiExQTJRBP/aAAwDAQACEQMRAD8AMAM1V1S7/BRI7ZwzbeKu45rJ8VRFtIaRR/lOrfTp/Wov4VlbSLlpeRXEWVkBPcHgj6VaAyOtCen3BghWd2AJ5OWxgVonUHaPzbJtxUZaPggj1GKDrqtKPj1 G4qmuiM9axG1SdUG4AEruxVaLVLozZ39DgCpP/olGXBRtahothqSBL yguF/7iA4 vah f8A/N/DLsXNk8WeoSdwPtmtE6pdkP5YDBf3NUbvU7gkrdzbe wcAf3p5503iA F/pUHhjwrpkgaHTo55F7zs0gH0JxRtoU4ng9hVVF4AVcAfSgvfbsm4SqW9G/oaK/CqkWAdujMcU 6zVCUhLHmpcH1qKOpOaJIG8dqbdwLPaTQuMq6EGp8YNcdcxsM4yDWCeXRPcQXgtmupI4W5ymDj55HFb9m8VsuLbALctkdfjxWdqls5vvNtwFyMPj9WK09KsAwUyE4PAPpUq98R0Ov0iuLnN2gYjocE9M1HbTqszO54RSTiu3NiDHc7mDski7cfOo9MtPPvnhlUgPKvX3ev9q5HDTKzXhr2MiGEhc9SRnqarXkUbuznIk7N3rXhtE8 XB9lD2p0 ng 2EIJHGarxy5 i1WglaQXV9cbZUIWMgt64 VemafAsFtFEgACqKGNN0qddQa4nUhSu0DPB NFqj2QDjoOa6ZJc1biLUbdqmyPU1ViOKmzTkDHA4Ga48SsjL0yKcoPNdHUUAHmupXRsrya3cMzK2FA70IeJ/EusW9yIILk28SqMBAP3Neh M9OX8WLkthnXBz2NCH yYtRn/4gkm7oHU/mFQhqK9L52nwl8K6vNemfbLK6Ryqf8XBYgjvgAdc0eaZZCeRnTjnP2/goN0RItLuzBa2vkRTsAGkPJx3JPWj4XDWsAW2IkZ8rgdc0z6uu2eDTNJYeVa5431KPX7iOzvWtbVZHUGOEOTtyO5GcsPXgetek E9cuNS0GC61PaH3FPMRSAceorC1DwNpV7OLt1ktJGbdJEBwW o4z8KItJtQtumnxRiOziGAPe JprqanJFlNPWbMU4klEanOPh2q8eO/SqOmWzRK5Yg4OF VXwD6fOtxziEt6yRDg89q7vH8NR9 mfia7g g/n1qghX4yfnSGO9RhwwDDvTlGfpWFMbxXDDNpjeavI/KQO9BlisEMi7trrnoq5A db3ja8LAWiSez oLQXFJJbkYJEe7C8dT6motrsWlPqE2sSabPYiC6iKqDlHjO0q3qDzS8FarZQXRN2GknyUSSTrt7cUNpq7bvbQSLWlFqEUv8AlW5LDoSKsuSTZSWHot7Lp8lvJJIPabngHJrNtC8k26EmODoT61l6bNcTAMYyvoWrYtYzI4cggDpkYzU7qfqNM1 hHHGqxgL0ru3HOeKjtiTGuSOBTyeRnGMVReol8Ywjnkc0tx9B9qcRwO2TioMt7p/asYz9Mm8 zjcd1Bq2X2qze6M1i FpRJYKpPKjH2OK17s4tpCOu04x64oaBnmusXgudQn5w 7GCTUBiDRqrjjHf1qtLJiVi8gD5POMU zuvOcxSHcw5GBg8VCVp0PxF w8PpJ5bkNtY4HpRdpWiWykx42uvH7VR0GfMTJIApbBA900QW0pkLyKMeYQTnscAH/SqriWk3yMSafbwPhjuOeFNTuAH2oAcdsVn36 RG8itiVuASc/am2NxOx/3m4xH37E/WtfHgZts27KVSWQMSR1PYVZHtcYx061QspCzHy1UQjoB1Pxq7uGfX4UY/kTk/oW0c7qZlvQU9mH6T0Hao/Z H/lTAAfwzd WJkJ43ZHyOP7UTRXcTqVJ615rbX5t5GKH8wq mtyAdeaTsHB qWUSXM8DMn5iVB7g lC/leRqkaISuX5FFkcqXUnmMhLMv5sftWPrlt GniuFH6wf3pV4U o39PnARsDlQCKJLOU WFTvk5 FClo xQ6 7RBplyrxxjncw wrokjSI/Flv59pboz4BuE/YE0zTIwqqXVmPQNU2vXURezhboXLf8AqamsvL/JHGGOeppOZoeE0bemwiKIscgsc 1U7MMhTw1MUlY1PcDmm7lkYnjdQn4CvWPCnII4GccCltP8amiR4c7/AGhjAIqT8RH/ANVE2HiUIwcjrU 4AVDHx0p7da5ygS6BeQeQIyR5oOMN0xT/ABLJbyQJAux5GOSVbO2hV8gcVbsruNxtc4ZabfDYX4lYSAxkHC yDWxps8i7AwXaFOD9qyIYDv3BsjpkelXYUdME42AYqiYrG6neb9Ri3jlDkEfGiLSbgOVXZtLHAz3rFg038TMHcDg8UV6ZB/iKoHC0v1 h3zw1BwowR8eaYVjyGxjmpSVK8fSoZVLDk8 oqgguMn0x9qZti979/wD5UYk8olXBYetP/FL6j7GgE8pj0qUD8pqOazlTOUOMelejDT4wv5ail0uJ/wBPwxS9A6eayo3OQRUJgdIwQpJIzmvRJdAifkqMH4VFF4e8sso8t0I9jd1X4fGlcMZVgBtf3Vn5cm0lCeR8KJLOeaeZCkDbCc4PpW7e GYruzeJAqyFPZOOAan0eNR5azKsMxGDGR3HBx602NIGpsWnJOm1WiIY84AohtYliVuPbJ5NPCqFXaOi8/OuIecY6E5opf6Bseo9nA64610bcZPYenNNBw23BIHHSub8MQM/amARTRK SwBPc5HpUP4KP3D9hVmTjlenyrm0f82sYqsxCkjt/enI29sN6fz/AFpUqBjp/Lk9hxXUUEtSpVjD04OMnjpUnBxkClSogOljj5iuRHJI90ZFcpVjDixJJPf tMYYVcfqzmlSrBHSLjjPcD7ml HT1NKlWCf/2Q==");
img.className = "catSwarm"
img.addEventListener('click', function handleClick(event) {
change();
clickCounter();
});
img.addEventListener('load', function handleClick(event) {
})
document.body.appendChild(img);
cats.push(img)
}
let image = document.querySelector("img");
let angle = Math.PI / 2;
//store the previous time the animate function last fired
let prevTimeArg;
function animate(currentTimeParam) {
if (prevTimeArg != null) {
angle = (currentTimeParam - prevTimeArg) * 0.004;
}
// Setting the previous time to the time the function currently fires
prevTimeArg = currentTimeParam;
image.style.top = (Math.tan(angle) * 150) "px";
image.style.left = (Math.tan(angle) * 150) "px";
image.style.height = (Math.cos(angle) * 1000) "px";
image.style.width = (Math.cos(angle) * 1000) "px";
setTimeout(() => {
requestAnimationFrame(currentTime => animate(currentTime));
}, 0 / fps)
}
for (i = 0; i < cats.length; i ) {
window.requestAnimationFrame(animate);
}Thank you in advance.
CodePudding user response：
I would delegate, if the idea is to animate the cat on click
You can make 3 global vars to use in the animation
const fps = 10;
const div = document.getElementById("catsContainer");
const cats = [];
for (let i = 0; i < 10; i ) {
let img = document.createElement("img");
img.setAttribute("src", "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIQAWQMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAGAAIDBAUBB//EADsQAAIBAwMCAwYFAgMJAQAAAAECAwAEEQUSITFBBhNRIlJhcYGRFDJCofDB0SMzsRUkJVNiY5Ki4Qf/xAAYAQADAQEAAAAAAAAAAAAAAAABAgMABP/EAB8RAAMBAAMBAQEBAQAAAAAAAAABAhEDEiExQTJRBP/aAAwDAQACEQMRAD8AMAM1V1S7/BRI7ZwzbeKu45rJ8VRFtIaRR/lOrfTp/Wov4VlbSLlpeRXEWVkBPcHgj6VaAyOtCen3BghWd2AJ5OWxgVonUHaPzbJtxUZaPggj1GKDrqtKPj1 G4qmuiM9axG1SdUG4AEruxVaLVLozZ39DgCpP/olGXBRtahothqSBL yguF/7iA4 vah f8A/N/DLsXNk8WeoSdwPtmtE6pdkP5YDBf3NUbvU7gkrdzbe wcAf3p5503iA F/pUHhjwrpkgaHTo55F7zs0gH0JxRtoU4ng9hVVF4AVcAfSgvfbsm4SqW9G/oaK/CqkWAdujMcU 6zVCUhLHmpcH1qKOpOaJIG8dqbdwLPaTQuMq6EGp8YNcdcxsM4yDWCeXRPcQXgtmupI4W5ymDj55HFb9m8VsuLbALctkdfjxWdqls5vvNtwFyMPj9WK09KsAwUyE4PAPpUq98R0Ov0iuLnN2gYjocE9M1HbTqszO54RSTiu3NiDHc7mDski7cfOo9MtPPvnhlUgPKvX3ev9q5HDTKzXhr2MiGEhc9SRnqarXkUbuznIk7N3rXhtE8 XB9lD2p0 ng 2EIJHGarxy5 i1WglaQXV9cbZUIWMgt64 VemafAsFtFEgACqKGNN0qddQa4nUhSu0DPB NFqj2QDjoOa6ZJc1biLUbdqmyPU1ViOKmzTkDHA4Ga48SsjL0yKcoPNdHUUAHmupXRsrya3cMzK2FA70IeJ/EusW9yIILk28SqMBAP3Neh M9OX8WLkthnXBz2NCH yYtRn/4gkm7oHU/mFQhqK9L52nwl8K6vNemfbLK6Ryqf8XBYgjvgAdc0eaZZCeRnTjnP2/goN0RItLuzBa2vkRTsAGkPJx3JPWj4XDWsAW2IkZ8rgdc0z6uu2eDTNJYeVa5431KPX7iOzvWtbVZHUGOEOTtyO5GcsPXgetek E9cuNS0GC61PaH3FPMRSAceorC1DwNpV7OLt1ktJGbdJEBwW o4z8KItJtQtumnxRiOziGAPe JprqanJFlNPWbMU4klEanOPh2q8eO/SqOmWzRK5Yg4OF VXwD6fOtxziEt6yRDg89q7vH8NR9 mfia7g g/n1qghX4yfnSGO9RhwwDDvTlGfpWFMbxXDDNpjeavI/KQO9BlisEMi7trrnoq5A db3ja8LAWiSez oLQXFJJbkYJEe7C8dT6motrsWlPqE2sSabPYiC6iKqDlHjO0q3qDzS8FarZQXRN2GknyUSSTrt7cUNpq7bvbQSLWlFqEUv8AlW5LDoSKsuSTZSWHot7Lp8lvJJIPabngHJrNtC8k26EmODoT61l6bNcTAMYyvoWrYtYzI4cggDpkYzU7qfqNM1 hHHGqxgL0ru3HOeKjtiTGuSOBTyeRnGMVReol8Ywjnkc0tx9B9qcRwO2TioMt7p/asYz9Mm8 zjcd1Bq2X2qze6M1i FpRJYKpPKjH2OK17s4tpCOu04x64oaBnmusXgudQn5w 7GCTUBiDRqrjjHf1qtLJiVi8gD5POMU zuvOcxSHcw5GBg8VCVp0PxF w8PpJ5bkNtY4HpRdpWiWykx42uvH7VR0GfMTJIApbBA900QW0pkLyKMeYQTnscAH/SqriWk3yMSafbwPhjuOeFNTuAH2oAcdsVn36 RG8itiVuASc/am2NxOx/3m4xH37E/WtfHgZts27KVSWQMSR1PYVZHtcYx061QspCzHy1UQjoB1Pxq7uGfX4UY/kTk/oW0c7qZlvQU9mH6T0Hao/Z H/lTAAfwzd WJkJ43ZHyOP7UTRXcTqVJ615rbX5t5GKH8wq mtyAdeaTsHB qWUSXM8DMn5iVB7g lC/leRqkaISuX5FFkcqXUnmMhLMv5sftWPrlt GniuFH6wf3pV4U o39PnARsDlQCKJLOU WFTvk5 FClo xQ6 7RBplyrxxjncw wrokjSI/Flv59pboz4BuE/YE0zTIwqqXVmPQNU2vXURezhboXLf8AqamsvL/JHGGOeppOZoeE0bemwiKIscgsc 1U7MMhTw1MUlY1PcDmm7lkYnjdQn4CvWPCnII4GccCltP8amiR4c7/AGhjAIqT8RH/ANVE2HiUIwcjrU 4AVDHx0p7da5ygS6BeQeQIyR5oOMN0xT/ABLJbyQJAux5GOSVbO2hV8gcVbsruNxtc4ZabfDYX4lYSAxkHC yDWxps8i7AwXaFOD9qyIYDv3BsjpkelXYUdME42AYqiYrG6neb9Ri3jlDkEfGiLSbgOVXZtLHAz3rFg038TMHcDg8UV6ZB/iKoHC0v1 h3zw1BwowR8eaYVjyGxjmpSVK8fSoZVLDk8 oqgguMn0x9qZti979/wD5UYk8olXBYetP/FL6j7GgE8pj0qUD8pqOazlTOUOMelejDT4wv5ail0uJ/wBPwxS9A6eayo3OQRUJgdIwQpJIzmvRJdAifkqMH4VFF4e8sso8t0I9jd1X4fGlcMZVgBtf3Vn5cm0lCeR8KJLOeaeZCkDbCc4PpW7e GYruzeJAqyFPZOOAan0eNR5azKsMxGDGR3HBx602NIGpsWnJOm1WiIY84AohtYliVuPbJ5NPCqFXaOi8/OuIecY6E5opf6Bseo9nA64610bcZPYenNNBw23BIHHSub8MQM/amARTRK SwBPc5HpUP4KP3D9hVmTjlenyrm0f82sYqsxCkjt/enI29sN6fz/AFpUqBjp/Lk9hxXUUEtSpVjD04OMnjpUnBxkClSogOljj5iuRHJI90ZFcpVjDixJJPf tMYYVcfqzmlSrBHSLjjPcD7ml HT1NKlWCf/2Q==");
img.className = "catSwarm"
div.appendChild(img);
cats.push(img)
}
let image;
let prevTimeArg;
let angle;
div.addEventListener('click', function handleClick(e) {
image = e.target;
angle = Math.PI / 2;
//store the previous time the animate function last fired
window.requestAnimationFrame(animate);
})
function animate(currentTimeParam) {
if (prevTimeArg != null) {
angle = (currentTimeParam - prevTimeArg) * 0.004;
}
// Setting the previous time to the time the function currently fires
prevTimeArg = currentTimeParam;
image.style.top = (Math.tan(angle) * 150) "px";
image.style.left = (Math.tan(angle) * 150) "px";
image.style.height = (Math.cos(angle) * 1000) "px";
image.style.width = (Math.cos(angle) * 1000) "px";
setTimeout(() => {
requestAnimationFrame(currentTime => animate(currentTime));
}, 0 / fps)
}<div id="catsContainer"></div>CodePudding user response：
You can try this solution, inside the function animate, you should query your images and apply the animation on each image:
function animate(currentTimeParam) {
const images = document.getElementsByClassName('catSwarm')// <=== This is what you need
for (var i = 0; i < images.length; i ) {
const image = images[i]
if (prevTimeArg != null) {
angle = (currentTimeParam - prevTimeArg) * 0.004;
}
// Setting the previous time to the time the function currently fires
prevTimeArg = currentTimeParam;
image.style.top = (Math.tan(angle) * 150) "px";
image.style.left = (Math.tan(angle) * 150) "px";
image.style.height = (Math.cos(angle) * 1000) "px";
image.style.width = (Math.cos(angle) * 1000) "px";
setTimeout(() => {
requestAnimationFrame(currentTime => animate(currentTime));
}, 0 / fps)
}
}
window.requestAnimationFrame(animate);