Animieren eines einzelnen Werts innerhalb einer Funktion

Question

Ich versuche, eine Form zu animieren, die ich in HTML5 erstellt habe.

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();
}

Ich möchte jQuery.animate verwenden, um das zu ändern animationValue von einem Wert zum anderen Überstunden.Ich bin mir nicht ganz sicher, wie ich das erreichen soll, außerdem muss ich bei jedem Schritt der Animation eine Funktion ausführen Layer.draw(); weil meine Form eine Leinwandform ist.

Weiß jemand, wie man das animiert? animationValue in myShape.drawFunc ?

Ich sollte hinzufügen, dass ich versuche, innerhalb von a zu animieren myShape.on("mouseover",{}); Stellt dies bei Verwendung der setInterval-Methode usw. ein Problem dar?

AKTUALISIEREN:

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);

});

Das console.log zeigt an, dass setInterval aufgerufen wird, aber die Form scheint nicht neu gezeichnet zu werden.

Answer 1

Ja, Sie können es verwenden animate() um deine zu ändern animationValue von einem Wert zum anderen Überstunden:

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 diesem Fall animieren wir in 1 Sekunde von 0 auf 50.

Dies ist nicht unbedingt Ihr Animationscode, aber Sie sollten den Dreh raus haben. Demo hier

Weitere Informationen zu animierende Variablen

Answer 2

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

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