为函数中的单个值设置动画答案

【问题标题】：Animating a single value within a function为函数中的单个值设置动画
【发布时间】：2012-03-30 18:50:24
【问题描述】：

我正在尝试为我在 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 正在被调用，但形状似乎没有被重绘。

【问题讨论】：

我认为您不能为此使用 jQuery.animate（除非您将值绑定到 dummy-DOM-Object 的某个属性）。你为什么不只使用一个普通的间隔？顺便说一句，这个：html5rocks.com/en/tutorials/canvas/notearsgame 是关于此类问题的一个很好的教程。
@m90 我正在研究区间，显然我可以运行我的 layer.draw();很容易，但是我可以使用该方法触发回调函数吗？那个链接太棒了！！
@m90 可以使用jQuery.animate()。检查我的答案

标签： javascript jquery html animation kineticjs

【解决方案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);
    }
});

在这种情况下，我们在 1 秒内将动画从 0 变为 50。

这不完全是您的动画代码，但您应该掌握它。 Demo Here

更多关于animating variables的信息

【讨论】：

刚看到这个，我完全不知道，这是一个很方便的工具。
非常方便将缓动函数用于非 DOM 目的。

【解决方案2】：

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

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

【讨论】：