Animating a single value within a function

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.

I don't think you'll be able to use jQuery.animate for this (unless you bind the value to some attribute of a dummy-DOM-Object). Why don't you just use a plain interval? Btw, this: http://www.html5rocks.com/en/tutorials/canvas/notearsgame/ is a good tutorial on matters like this. — m90, Mar 14 '12 at 10:11
@m90 well I was looking into interval, obviously I can run my layer.draw(); easily with that, but can I fire a callback function with that method? That link is brilliant!! — Caius Eugene, Mar 14 '12 at 10:13
@m90 It is possible to use `jQuery.animate()`. Check my answer — Jose Rui Santos, Mar 14 '12 at 10:55

score 3 · Accepted Answer · edited May 23 '17 at 10:24

3

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

edited May 23 '17 at 10:24

Community

1
1

answered Mar 14 '12 at 10:42

Jose Rui Santos

15,009
9
58
71

1

Just saw this, I didn't know about that at all, that's a pretty handy tool. – m90 Mar 14 '12 at 10:56
pretty handy for using easing functions for non-DOM purposes. – Benjamin Intal May 16 '12 at 15:02

score 2 · Answer 2 · answered Mar 14 '12 at 10:20

2

var FPS = 30;
setInterval(function() {
  update();
  draw();
}, 1000/FPS);

https://developer.mozilla.org/en/window.setInterval

answered Mar 14 '12 at 10:20

rskuja

571
4
17

Animating a single value within a function

2 Answers2