0

I have a number of image frames that that I need to show one by one to create an animation. I achieved this by setting the background-image property on each frame in my loop. I did this because of the other properties css provides that help me achieve the effect I wanted. Here is the code,

var el = document.getElementById("animation");
loop=()=>{
    var now=performance.now();
    var TimeCompleted=now - StartTime;
    if(TimeCompleted>=this.Interval) {
        StartTime=now-(TimeCompleted%this.Interval);
        el.style.backgroundImage="url("+ images[frame].src + ")";
        frame+=delta;
        if(frame<=-1 || frame>=frames)
        {
            el.dispatchEvent(new Event("animationend"));
            return;
        }
    }
    requestAnimationFrame(loop);
}

and the css

#animation{
    height:100%;
    width:100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

I never saw anyone make animations like this before so I was wondering if this is the best way of approaching this or if this method will cause any performance issues etc.

Exploding tnt
  • 13
  • 4
  • You say you did this because of the other properties css provides that help me achieve the effect I wanted. Is the effect just different time intervals for showing different frames or is there something else? Invoking JS on each frame looks a bit heavy if you can set a timeout instead but I don't know if there are other CSS changes you want to make part way through a frame? – A Haworth Jul 12 '21 at 06:33
  • By that I meant I can easily center the image and resize it to cover the whole screen without losing the aspect ratio. I looked into ```setTimeout```, but people were saying to use ```requestAnimationFrame``` instead as it gives smoother frames. But I am not completely sure how much it applies for ```background-image``` as the discussion was about canvas rendering. – Exploding tnt Jul 12 '21 at 06:51
  • It's just that at the moment you are invoking some JS on every animation frame, regardless of whether you are wanting to alter the image or not whereas with a settimout, the timeout being set to the length of time you want that frame to be shown, you'll only invoke the JS when you need to and the system can get on with optimising the showing (using GPU e.g.) of one of your frames - which may be over many of its frames - as it sees best. – A Haworth Jul 12 '21 at 06:57
  • To keep the aspect ratio you could also use an `` tag and apply `object-fit : cover;` and `object-position : center;` – Xanthous Jul 12 '21 at 07:04
  • @AHaworth I just tried the code with ```setInterval``` and it seems to work just as well. But I read on multiple SO posts, such as [this](https://stackoverflow.com/questions/38709923/why-is-requestanimationframe-better-than-setinterval-or-settimeout), saying to use ```requestAnimationFrame``` over ```setInterval``` or ```setTimeout```, saying it is more optimized for animations and provides smoother and higher quality frames. So that was my reasoning for using ```requestAnimationFrame```. But I was still skeptic because they were all referring to canvas rendering. – Exploding tnt Jul 12 '21 at 07:43
  • The difference betwen what you are doing and the 'normal' animating frame by frame is that in the latter case you want to move to the next frame immediately the previous frame has finished showing at the 'normal' framerate. What you are trying to do is different in that you want to show each of your frames for a different time and so your code as it currently stands is entering JS many more times than it needs to. – A Haworth Jul 12 '21 at 07:55

0 Answers0