Animating a single value within a function
-
13-12-2019 - |
Question
I'm trying to animate a shape i've 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 the animationValue
from one value to another overtime. I'm not really sure how to achieve this, also I will need to run a function on every step of the animation Layer.draw();
because my shape is a canvas shape.
Anyone know how to animate the animationValue
in myShape.drawFunc ?
I should add that I'm trying to animate within a myShape.on("mouseover",{});
does this pose any problem using 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);
});
the console.log is showing the they setInterval is being called but the shape doesn't seem to be redraw.
Solution
Yes, you can use animate()
to change your 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 are animating from 0 to 50 in 1 second.
This is not exactly your animation code, but you should get the hang of it. Demo Here
More information on animating variables
OTHER TIPS
var FPS = 30;
setInterval(function() {
update();
draw();
}, 1000/FPS);