Animated GIF's play only the first time their scene is visited

just came back to this.

I got one of the ideas working. I actually tried this this morning but used the pure date instead of the just the time, which did not work.

	var d = new Date();
	 
	hypeDocument.getElementById("imgcontainer").innerHTML = '<img src="' + '${resourcesFolderName}/test.gif?dummy='  + d.getTime() + '">';

test_MHv1.hype.zip (551.3 KB)

3 Likes

Thanks Mark that’s great.

Does this method require the .gif to be reloaded every time? Don’t mind either way, just wondered.

Thanks again.

Yes it does.

The transfer MB goes up each time the gif loads. Which is about 526kb each time.

I broke the gif out into 101 frames and added each separated image to the resources.

Then ran a new javascript to load them into a rect as the background image.

var imageNumber = 1;
	 
	var imgcontainer = hypeDocument.getElementById("imgcontainer")
 	
	var fireImage = setInterval(function(){ 

imageNumber++
	
	 
	 if (imageNumber < 100){ //-- image total is 101 
	 imgcontainer.style.backgroundImage = 'url( ${resourcesFolderName}/test_' + ('0' + imageNumber).slice(-2) + '.gif)'
	 } else {
	 
	 clearInterval(fireImage);
	  
	 }
	
	

 }, 33); 

This works of the bat and does not up the load weight.

test_MHv2.hype.zip (1.5 MB)

1 Like

hi marc,

you should also clear the interval when leaving the scene before the animation is complete. also may consider requestAnimationFrame insteadof setInterval :mask:

:wink:

Best day

Hans

2 Likes

requestAnimationFrame[quote="h_classen, post:11, topic:7157"]
leaving the scene before the animation is complete
[/quote]

Good call.

I have seen people mention this but not used it before. Do you have a good example of the coding ( maybe using the example above )

Ahh found a good example.

So the code ( single code used on scene load and unload ) would look something like

if (event.type === "HypeSceneLoad" ){ //- Run animation
 
	var imageNumber = 1;
	 
	var imgcontainer = hypeDocument.getElementById("imgcontainer")
	
window.globalID;
repeatOften()

function repeatOften() {
   if (imageNumber < 100){ //-- image total is 101 
	 imgcontainer.style.backgroundImage = 'url( ${resourcesFolderName}/test_' + ('0' + imageNumber).slice(-2) + '.gif)'
	 imageNumber++
	 } else {
	 
	 cancelAnimationFrame(window.globalID);//- Stop animation call
	  
	 }
  window.globalID = requestAnimationFrame(repeatOften);
}
 
}else {

console.log("stopped")
 cancelAnimationFrame(window.globalID); //- Stop animation call

} 

test_MHv3.hype.zip (1.5 MB)

I assume this is better because it works on the natural frame rate of the browser which is what this example is aiming for, so thats why it is better in this case ?..

3 Likes

Hi MarkHunte

I tried your coding but the display of the gif seems wrong. Can you please help me to identify where i have gone wrong? Punjabi_Version_2.hype.zip (2.4 MB)
Stroke_a

I have attached the gif file where it should be and the hype file.

Looking forward to hear from you.

Thank you

Regards
Siew Khim

this line sets the name of the image:
imgcontainer.style.backgroundImage = 'url( ${resourcesFolderName}/test_' + ('0' + imageNumber).slice(-2) + '.gif)'

it’ll work correct up to 99.

1 Like

Hi @siewkhim,

@h_classen has kindly answered your question.

If you type an @ In your post, you will be offered a selection of names of forum members. You can start typing their name to narrow it down.

When you use the @name in a post that member gets a notification…

Hi @h_classen & @MarkHunte

I have tried the code! It works!

Thank you so much!

Regards
Siew Khim

1 Like

… in fact i did not answer the question :slight_smile: i wanted to, but then saw that the naming of the images was inconsistent and canceled my investigations :slight_smile:

so here is a fresh document: imageSequence.hype.zip (510.1 KB)

1 Like

Hi @MarkHunte I have followed your example (test_MHv3) and have it running successfully with my own gif. However the gif I have created I believe is 25 fps, whereas I understand a browsers natural frame rate is 60fps so the gif is playing to fast. Is there a way I could resolve this?

Thanks

Update: I have looked at test_MHv2 and changed the ‘33’ in the last section of code to a higher number (100) and this has slowed the frame rate down to nearly match the original gif.

Is this a proper solution which will work?

Thanks

The 33 refers to milliseconds, so if you need something at 25fps you’d do 1000ms/25fps = 40 ms per frame.

The later imageSequence.hype.zip has a fps option where you could directly enter 25.

Thanks @jonathan for the explanation.

I’m unsure what this could be related to, but viewing on Firefox and Chrome there is flashing between each frame when playing. All images are set to preload so I am struggling to understand why this is happening?

Thanks

Firefox experiences this flashing first time when opening the scene, however Chrome it seems to happen when the scene is revisited. Safari is working great throughout.

Thanks in advance

It is probably a rendering delay and may be due to the size (either file size or dimensions) of the images you are using.

(I’ll take this time to plug that the upcoming Hype v4 does have a sprite sheet feature that can do these animations generally smoothly with the ability to set a custom FPS. You’re welcome to join the beta).

1 Like

Hi @MarkHunte

Looking at your example - test_MHv1 when you import your gif it remains in a paused state. How can I achieve this for another gif as it seems to constantly keep looping when import mine.

Thanks

Thats nothing to do with Hype. The gif was saved with loop off.

Not sure what was used to turn it off or even if I did it, probably not but you can open a gif in something like Preview.app and the save as… a new file. This I think will by default turn the looping off.

Thanks Mark, I have now figured out how to turn looping off so it plays just the once.

Thanks again.

Hi there
I tried the method by @MarkHunte with

var d = new Date(); hypeDocument.getElementById(“imgcontainer”).innerHTML = ‘<img src="’ + ‘${resourcesFolderName}/test.gif?dummy=’ + d.getTime() + ‘">’;

It seems to reload the gif (you see it on the right bottom corner each time the scene is revisited), but it’s not positioned the right way (should be positioned as the coins in the middle.

Here’s my Test 300x250_DE_test.hype.zip (2.6 MB)

What am I missing?
Thank you for your quick support.
Simeon