.redraw() is not a function.

[H-Ray]

Hi,

I've taken a look through the closed issues and couldn't find anything that answered my question so I'm posting one.

I'm trying to create a "pulse" style animation, by inflating an ellipse and making it transparent.

The issue I'm having is resetting the ellipse so that it goes back to being smaller and opaque, in order to grow and go transparent again (loop).

After playing around with it for a while, I decided to grab the code you've used in your animate docs (with the easing examples) and try to rip out the code that makes those examples reset.

The console is now throwing the error "d.redraw() is not a function". Regardless of what I put in in place of "d", the console throws this error. If I remove the line, I get "d.animate() is not a function".

Any ideas?

Here's my code (the relevant snippet):

var ellipsePulse = canvas.display.ellipse({
x: halfX,
y: halfY,
radius: 50,
stroke: "7px rgba(255,255,255,0.8)"
});

canvas.addChild(ellipsePulse);

ellipsePulse = {	
animation: {
			running: false,
			endCallback: function() {
				ellipsePulse.notify("ready-for-animation")
			},
			start: function() {
				var d = ellipsePulse;
				var c = !this.running;
				this.running = true;
				clearTimeout(this.timer);
				this.timer = setTimeout(function() {
					d.animation.reset();
					d.animate({
						radius: 70,
						opacity: 0
					}, {
						duration: 500,
						easing: "linear"
					});
				})
			},
			stop: function() {
				var d = ellipsePulse;
				clearTimeout(this.timer);
				d.stop();
				this.reset();
				this.running = false
			},
			reset: function() {
				var d = ellipsePulse;
				d.radius = 50;
				d.opacity = 1;
				console.log(d);
				d.redraw();
			}
		}
}

ellipsePulse.animation.start();

[koggdal]

I think you should be able to just use the animation API straight off, no?

ellipsePulse.animate({
  radius: 70,
  opacity: 0,
}, {
  duration: 500,
  easing: 'linear',
  callback: function() {
    ellipsePulse.radius = 50;
    ellipsePulse.opacity = 1;
    canvas.redraw();
    // Maybe you want to trigger the animation once more here, to loop the pulse animation
  },
});

(untested code, but I think it would work)

[H-Ray]

Hi Koggdal,

Thanks for the help!

How would I trigger the animation once more? I've set the animation code you provided as a function, and I'm calling it from inside a canvas.setLoop, but instead of repeating the full animation, it runs through the animation once and then seems to interrupt itself every time it runs afterwards. You can see it in effect here, in the second section: http://sp.thirdfloordigital.net/

[koggdal]

You don't want to call .animate() from within .setLoop(), as that will start a new animation every frame. .setLoop() is for setting a function that will run each frame, where you can update properties of objects for that specific frame, to create custom animations or implement game logic etc. If you want a fixed animation that has a duration and easing effect, you just call .animate() once, outside of any frame loop (for example in the click handler if you want it triggered on click). I see you put the animation in a pulse function, so if you want it to run infinitely, just call pulse again from within the animation callback. Calling pulse the first time will then animate once, wait for the animation to finish, then animate again, wait, animate again and so forth.