Demo Sprites does not work

[samael205]

Hi @asturur,

I know that FabricJS does not support this kind animation, but the demo Sprite does not work, Tested on Mozilla Firefox and Chrome.

Now i have the next question:

In the demos page of fabricjs, I have replicated in my project the animated sprite demo
This code is based on a custom class that allows you to work with an array of images to generate the animation of the sprite, but for it to work you have to execute the following code.

This creates as a kind of setInterval of every 0.6 seconds to give the feeling that there is movement in the animation. This code works

I assume that the next function
(function render() { canvas.renderAll(); fabric.util.requestAnimFrame(render); })();

It works as a setInterval of JavaScript, in which the call is repeated every X time, and I can, in the setInterval if I add it to a variable, set the variable to null to stop the setInterval.
Can this be done with requestAnimFrame (reder)?. I need this because I need to stop this function at a certain time.

[asturur]

So i did not do the original sprite code demo.
What i would do would be create 2 custom method in this class, called start and stop.

Start would start a chained requestRenderAll to continuosly re render the frame, and stop would stop it. using requestRenderAll would avoid rendering multiple times since each call cancel the previous one.

Let me see if i can update this demo with the concept

[andrejpavlovic]

fabricjs.com/js/sprite.class.js

Lines 57 to 68 in 54f61f6

	play: function() {
	var _this = this;
	this.animInterval = setInterval(function() {
	_this.onPlay && _this.onPlay();
	_this.spriteIndex++;
	if (_this.spriteIndex === _this.spriteImages.length) {
	_this.spriteIndex = 0;
	}
	}, 100);
	},

Setting dirty flag seems to help with the rendering

     _this.spriteIndex++; 
     if (_this.spriteIndex === _this.spriteImages.length) { 
       _this.spriteIndex = 0; 
     } 
     _this.set('dirty', true);
   }, 100); 

[asturur]

i tried to fix last day but i was writing 'this' instead of '_this'. ok i ll pish it up now