Animer une seule valeur dans une fonction
-
13-12-2019 - |
Question
J'essaie d'animer une forme que j'ai créée en 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();
}
Je veux utiliser jQuery.animate pour changer le animationValue
d'une valeur à une autre au fil du temps.Je ne sais pas vraiment comment y parvenir, je devrai également exécuter une fonction à chaque étape de l'animation Layer.draw();
parce que ma forme est une forme de toile.
Quelqu'un sait comment animer le animationValue
dans myShape.drawFunc ?
Je dois ajouter que j'essaie d'animer dans un myShape.on("mouseover",{});
cela pose-t-il un problème en utilisant la méthode setInterval, etc. ?
MISE À JOUR:
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);
});
le console.log montre que setInterval est appelé mais la forme ne semble pas être redessinée.
La solution
Oui, vous pouvez utiliser animate()
pour changer votre animationValue
d'une valeur à une autre en heures supplémentaires :
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);
}
});
Dans ce cas, nous animons de 0 à 50 en 1 seconde.
Ce n'est pas exactement votre code d'animation, mais vous devriez le comprendre. Démo ici
Plus d'informations sur animation de variables
Autres conseils
var FPS = 30;
setInterval(function() {
update();
draw();
}, 1000/FPS);