Анимация одного значения внутри функции - PullRequest
Новая
       31

Анимация одного значения внутри функции

3 голосов
/ 14 марта 2012

Я пытаюсь анимировать фигуру, созданную в 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, но фигура не перерисовывается.

Ответы [ 2 ]

3 голосов
/ 14 марта 2012

Да, вы можете использовать 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 секунду.

Это не совсем ваш код анимации, но вы должны освоить его. Демо Здесь

Дополнительная информация о анимационных переменных

1 голос
/ 14 марта 2012 
var FPS = 30;
setInterval(function() {
  update();
  draw();
}, 1000/FPS);

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

...