I am writing an application in js using cordova.
I have a frame animation that consists of 75 frames. I preload the frames and start creating the animation, my class is responsible for this:
export class AnimFrameAll {
anim;
nameAnim;
nameFrame;
digitsInNumber;
countFrame;
format;
duration;
loop;
ElementDOM;
constructor(nameAnim, nameFrame, digitsInNumber, countFrame, format, duration, loop, ElementDOM){
this.nameAnim = nameAnim;
this.nameFrame = nameFrame;
this.digitsInNumber = digitsInNumber;
this.countFrame = countFrame;
this.format = format;
this.duration = duration;
this.loop = loop;
this.ElementDOM = ElementDOM;
this._preloadImages().then(() => {
this._createAnim();
});
}
/**
* @private
**/
_preloadImages() {
return new Promise((resolve, reject) => {
let loadedCount = 0;
for (let i = 0; i <= this.countFrame; i++) {
const paddedIndex = i.toString().padStart(this.digitsInNumber, '0');
const imgPath = `../../assets/animation/frameAnim/${this.nameAnim}/${this.nameFrame}${paddedIndex}.${this.format}`;
const img = new Image();
img.src = imgPath;
img.onload = () => {
loadedCount++;
if (loadedCount >= this.countFrame) {
resolve();
}
};
img.onerror = reject;
}
});
}
/**
* @private
**/
_createAnim() {
const DATA_ANIM = [];
for (let i = 0; i <= this.countFrame; i++) {
const paddedIndex = i.toString().padStart(this.digitsInNumber, '0');
DATA_ANIM.push({
background: `url('../../assets/animation/frameAnim/${this.nameAnim}/${this.nameFrame}${paddedIndex}.${this.format}') no-repeat center`,
backgroundSize: 'cover'
})
}
let params = {
duration: this.duration,
fill: 'forwards',
iterations: this.loop,
};
this.anim = this.ElementDOM.animate(DATA_ANIM, params);
}
/**
* @public
**/
deleteAnim() {
if (this.anim) {
this.anim.cancel();
this.anim = null;
}
}
}I do the initialization of the class like this:
const animFrame = document.querySelector(".slider_games_card_anim");
const animFrameCards = new AnimFrameAll("frameCards", "Frame_", 5, 74, "png", 6000, Infinity, animFrame);
But when the animation starts in the application, it starts blinking, or disappears altogether after 1-2 laps. In the “network” tab, I see that animation files are constantly being uploaded further (even those that have already been uploaded), although the animation is looped and the same frames are used.