我正在尝试为我在 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();
因为我的形状是画布形状。
任何人都知道如何为animationValue
myShape.drawFunc 设置动画?
我应该补充一点,我正在尝试在其中myShape.on("mouseover",{});
使用 setInterval 方法等设置动画吗?
更新:
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 正在被调用,但形状似乎没有被重绘。