Animating one value inside a function
I am trying to animate a form created in HTML5.
myShape.drawFunc = function(){
var context = this.getContext();
context.beginPath();
context.arc(480, 480, animationValue, startingPoint * Math.PI, endingPoint * Math.PI, false);
context.lineTo(480,480);
context.closePath();
this.fillStroke();
}
I want to use jQuery.animate to change animationValue
from one value to another overtime. I'm not sure how to do this, also I will need to run the function at every stage of the animation Layer.draw();
because my form is a canvas form.
Does anyone know how to animate animationValue
in myShape.drawFunc?
I must add that I am trying to animate inside myShape.on("mouseover",{});
. This creates any problem with the setInterval method etc.
UPDATE:
segment.on("mouseover",function(){
var startingPoint = segData[index].startingPoint;
var endingPoint = segData[index].endingPoint;
var startingRadias = segData[index].radias;
var maxRadias = 250;
var updateRadias = startingRadias;
setInterval(function(){
if(updateRadias < maxRadias){
updateRadias++;
console.log("frame : "+updateRadias);
this.drawFunc = function(){
var context = this.getContext();
context.beginPath();
context.arc(480, 480, updateRadias, startingPoint * Math.PI, endingPoint * Math.PI, false);
context.lineTo(480,480);
context.closePath();
this.fillStroke();
}
rawLayer.draw();
}
},1000/30);
});
console.log shows they are calling setInterval, but the form doesn't seem to be redrawn.
source to share
Yes, you can use animate()
to change animationValue
from one value to another overtime:
var drawFunc = function (animationValue) {
var context = $("#myCanvas")[0].getContext("2d");
context.fillStyle="#FF0000";
context.fillRect(animationValue, animationValue, 150, 75);
},
from = 0, to = 50;
// now animate using the jQuery.animate()
$({ n: from }).animate({ n: to}, {
duration: 1000,
step: function(now, fx) {
drawFunc(now);
}
});
In this case, we'll animate from 0 to 50 in 1 second.
It's not really your animation code, but you should get the hang of it. Demo here
More information on animation variables
source to share