1

I'm trying to make an animated gallery that will smoothly paint first slide, then wait for a while and then repaint the next one and so on (slides are painted by pieces).

I used for that requestAnimationFrame captured in setTimeout and it works just as I want, but only in Firefox. It doesn't invoke the animation at all in Chrome or Opera.

I've tried to comment out the whole part that animates the slide (so that only the first part of it would be painted), but it didn't help. Tried also to take away all that part that is cutting the canvas and image on parts and just paint a whole image, but it didn't help too.

Here's a jsfiddle https://jsfiddle.net/Valilna/64qmtpvu/3/

var slideW = slideObjectsArray[j].width;
var slideH = (slideW / sectionCountW) * sectionCountH;
var slideSectorW = slideW / 5;
var gallerySectorW = galleryWidth / 5;
var speedGallery = (gallerySectorW/100) * 5;
var speedSlide = (slideSectorW/100)*5;

function drawSlide () {
    for (n = 0; n < 5; n++) {
    if (speedGallery <= gallerySectorW) {
        ctx.drawImage(slideObjectsArray[j], slideSectorW * n, 0, 
                      speedSlide, slideH,
                      (gallerySectorW * (n + 1) - speedGallery), 
                      0, speedGallery, galleryHeight);
    } else if (speedGallery > gallerySectorW){
        speedGallery = gallerySectorW;
    ctx.drawImage(slideObjectsArray[j], slideSectorW * n, 0, 
                  speedSlide, slideH,
                  (gallerySectorW * (n + 1) - speedGallery), 
                  0, speedGallery, galleryHeight);
    }
  }

  if (speedGallery < gallerySectorW) {
    speedGallery += (gallerySectorW/100) * 5;
    speedSlide += (slideSectorW/100)*5;
    setTimeout(function () {
      requestAnimationFrame(drawSlide);
    }, 25);
  } else if (speedGallery === gallerySectorW) {
    speedGallery = (gallerySectorW/100) * 5;
    speedSlide = (slideSectorW/100)*5;
    if (j < 6){
      j ++;
    } else {
      j = 0;
    }
    setTimeout(function () {
      requestAnimationFrame(drawSlide);
    }, 4000);
  }

}

slideObjectsArray[0].onload = drawSlide;

I'm new to coding and just started to study, so I'm sure I've made some stupid mistake and I would be very grateful if you'll show it to me.

Oleksandra Vytiahlovska
  • 11
  • 3
  • 1
    Can you provide any jsfiddle or does your console show any errors? – Shayan Aug 09 '18 at 17:26
  • Here's js fiddle https://jsfiddle.net/Valilna/64qmtpvu/3/ and console doesn't show any errors – Oleksandra Vytiahlovska Aug 09 '18 at 18:48
  • If its working in firefox and doesn't work in chrome; It should be related to different RAF and Macrotask queue priorities between two js engines (spider moneky and v8); [check this answer](https://stackoverflow.com/a/43050651/5953610); if it didn't help; let me know – Mechanic Feb 25 '20 at 18:46

0 Answers0