在函数中为单个值进行动画
-
13-12-2019 - |
题
我正在尝试为我在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以将一个值从一个值更改为另一个加班。我真的不确定如何实现这一点,我还需要在动画生成的每个步骤上运行一个函数,因为我的形状是画布形状。
任何人都知道如何在myshape.drawfunc中为animationValue
设置动画?
我应该添加我尝试在世代odicetagcode中动画动画,这是否使用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,但形状似乎似乎没有重绘。
解决方案
是,您可以使用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);
}
});
.
在这种情况下,我们在1秒内为0变为50.
这不是你的动画代码,但你应该掌握它。 demo这里
更多关于动画变量
其他提示
var FPS = 30;
setInterval(function() {
update();
draw();
}, 1000/FPS);
.
不隶属于 StackOverflow