javascript-动画函数中的单个值

我正在尝试动画化我在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方法等会造成任何问题吗？

更新：

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 Here

有关animating variables的更多信息

标签：kineticjs,html5,animation,javascript,jquery
来源： https://codeday.me/bug/20191101/1984656.html