I started to port my canvas animation to a enclosed class, but what got me really frustrated is that, for some reason my canvas
context could not access an animated property like it used to. That was until, just for shits and giggles, I passed in not the property but a reference of that property (copy if you will)
I want to understand why it is a problem to access a property that is used by another process?
Note: TweenLite ticker is using requestAnimationFrame()
to perform udpates.
Here is cut down code representing the issue, if I'm accessing self.props.ctxProps.angle
directly the context
uses initial value 0
and after animation is done the final value -1.999 * Math.PI
, only when I use a reference variable context
will access the intermediate values which are between 0
and -1.999 * Math.PI
:
var sample = (function () {
var self = new Object();
self.props = {
ctx: document.getElementById("loading-ring").getContext("2d"),
ctxProps: {
canvasX: 50,
canvasY: 50,
radius: 50,
angle: 0.0
}
};
self.updateCanvas = function () {
// TODO: Ask stacakoverflow
var ref_angle = self.props.ctxProps.angle;
self.props.ctx.clearRect(0, 0, 100, 100);
self.props.ctx.beginPath();
self.props.ctx.moveTo(self.props.ctxProps.canvasX, self.props.ctxProps.canvasY);
self.props.ctx.arc(
self.props.ctxProps.canvasX,
self.props.ctxProps.canvasY,
self.props.ctxProps.radius, 0,
ref_angle); // This works - Accesses the intermediate values
//self.props.ctxProps.angle); // This does not work - Accesses only start and end values
self.props.ctx.fill();
}
self.run = function () {
TweenLite.ticker.addEventListener('tick', self.updateCanvas);
TweenLite.to(self.props.ctxProps, 100, { angle: -1.999 * Math.PI });
}
return {
run: self.run
}
})();