功能

Question

我试图动画我在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(); 
} 

我想用jQuery.animate到animationValue从一个值更改为另一个加班。我真的不知道如何做到这一点，我也将需要在动画Layer.draw();的每一步运行的功能，因为我的形状是帆布的形状。

任何人都知道如何在动画的myShape.drawFunc animationValue？

我要补充一点，我想一个myShape.on("mouseover",{});内动画这是否使用setInterval方法等造成任何问题？

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正显示出他们的setInterval被调用，但形状似乎并不被重绘。

Answer 1

是的，你可以使用animate()更改animationValue从一个值到另一个加班：

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

在这种情况下，我们从0动画到50以1秒。

这不正是你的动画代码，但你应该得到它的窍门。上animating variables

Answer 2

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

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